KindEditorリッチテキストエディタを使ってDjangoプロジェクト。

始まるネット公式プラグインをダウンロードし、静的ファイルの下に置か

フロントエンドの導入

<スクリプトタイプ= " テキスト/ javascriptの" SRC = " /static/back/kindeditor/kindeditor-all.js " > </ SCRIPT>


<スクリプト>
        KindEditor.ready（関数（K）{
            
            window.editor = K.create（' #content ' 、{
{ ＃                コンテンツ＃のこの文はjqueryのリッチテキストエディタ有効にするために取得することができます} 
                ;関数（）{this.sync（）}：afterBlurを
                幅：" 800 " 、
                高さ：" 600 " 、
                resizeType：0、
                uploadJson：" /バック/記事/アップロード/ " 、
                extraFileUploadParams：{
                    csrfmiddlewaretoken：" {{csrf_token}} "
                }、
                filePostName：" upload_img " // 画像の名前をアップロード
            }）;
        }）;
    </ SCRIPT>

リッチテキストエディタの位置は、ページに定義されています

<TEXTAREAのID = " コンテンツ"名前= " コンテンツ"スタイル= " 幅：700px;高さ：250ピクセル; " > </ TEXTAREA>

アヤックス提出

＃ボタン送信 
<INPUT名= 「dosubmit 」タイプ=の「ボタン」上記のid = 「dosubmit 」 クラス = 「BTN 」値= 「すぐに解放します」 >

＃リッチテキストエディタ提出 
<スクリプト> 
{ ＃    提出する記事}＃ 
    $（' #dosubmitを' ）.click（関数（）{
        $ .post（' /バック/物品/ back_add / '、$（' フォーム' ）.serialize（）、関数（データ）{
             場合（データ[ ' ステータス' ] == 0）{
                layer.msg（データ[ ' 情報' ]）
                { ＃LOCATION.HREF = "/バック/インデックス/インデックス/" ＃} 
            } 他{
                layer.msg（データ[ ' 情報' ]）
            }
        }、' JSON ' ）
    }）
</ SCRIPT>

ルーティング

＃リッチテキストエディタ 
re_path（' Articleこの記事は、/アップロード/だった'、article.upload、名前= ' Articleこの記事は、/アップロード/でした' ）、
＃は、フォームのフォームの内容は、記事を追加受け入れ 
（re_path ' Articleこの記事は、/ /追加した'、article.add、名前= ' Articleこの記事は、追加/ /でした'）、

背景画像受信方法

＃リッチテキストエディタのアップロード画像は
インポートのOSを
 DEF アップロード（要求）：
     「」 "
    エディタビュー機能を受け入れるようにファイルをアップロード
    ：PARAM要求：
    ：戻ります：
    ""」
    ＃1 プリント（request.FILES） 
    img_obj = request.FILES.get（" upload_img " ）
     ＃1 プリント（img_obj.name） 
    パス= os.path.join（settings.MEDIA_ROOT、" add_article_img " 、img_obj.name）
    （パス、オープンと" WB " ：Fなど）
         のためのラインでimg_obj。
            f.write（ライン）
    応答 = {
         " エラー" ：0、
         " URL "：" /メディア/ add_article_img /％sの"％のimg_obj.name
    }
    返すのHttpResponseを（json.dumps（レスポンス））

コンテンツの背景を受信する方法

デフ（要求）を追加します。
    member_obj = Member.objects.all（）
    MEMBER_ID = request.session.get（' MEMBER_ID ' ）
    MEMBER_NAME = request.session.get（' MEMBER_NAME ' ）
     であれば request.method == ' POST ' ：
        タイトル = request.POST.get（" タイトル" ）
        説明 = request.POST.get（' 記述' ）
        コンテンツ = request.POST.get（" コンテンツ" ）
        でaddTime = time.strftime（' ％Y-M-％D％' 、time.localtime（））
        ＃濾過スクリプトタグ、XSS攻撃を防ぐ 
        スープ= BeautifulSoup（コンテンツ、" html.parser "）＃は、文字列を介してオブジェクトを作成BeautifulSoup今後の文字列は、オブジェクト、及び、関連するメソッドでオブジェクトを呼び出すために
        印刷（soup.find_all（）） ＃[<IMG ALT = "" SRC = "/メディア/ add_article_img / hand.png" />、<スクリプトのcharset = "UTF-8" SRC = "/静的/ブログ/ KindEditorは/ KindEditor-all.js"> </ SCRIPT>、<IMG SRC = "/メディア/ add_article_img / thumb_50_img1.jpg" Altキー= "" />] 
        のためのタグ中soup.find_all（）：

            印刷（tag.name）＃1 のimgスクリプト
            であれば tag.name == " スクリプト" ：
                tag.decompose（）
    ＃     150シンボルの前にラベル文字列のテキストを取得＃ビルド要約データ 
        +：DESC = soup.text [150 0] " ... " 
        OBJ = Article.objects.create（ARTICLE_TITLE =タイトル、article_description DESC =、= article_contentのSTR（コンテンツ）、MEMBER_ID = MEMBER_ID、article_addtime = STR（でaddTime）.replace（' / '、' - ' ））
         IF OBJ：
             返す（リダイレクトを' /戻る/ Articleこの記事は、追加/ /だった' ）
     を返すレンダリング（リクエスト、「記事にこの記事をでした/add.html 「地元の人々について、（））

結果ページ

行わ。

KindEditorリッチテキストエディタを使ってDjangoプロジェクト。

おすすめ