kindeditor画像アップロード機能

KindEditor は Javascript で書かれたオープンソースのオンライン HTML エディターであり、開発者は KindEditor を使用して、従来の複数行のテキスト入力ボックス (テキストエリア) を置き換えることができます。ビジュアル リッチ テキスト入力ボックス

を使用します

1. 公式 Web サイトにアクセスして KindEditor の最新バージョンをダウンロードし、すべてのファイルを解凍してプロジェクトの静的フォルダーにコピーします。必要に応じて次のディレクトリを削除できることに注意してください:

• asp - ASP プログラム

• asp.net - ASP.NET プログラム

• php - PHP プログラム

• jsp - JSP プログラム

• 例 - リッチ テキスト エディターを表示する必要があるデモ ファイル

HTML テンプレートに <textarea> タグを追加します。 <textarea>标签：

<label for="article_body">文章内容</label><textarea id="article_body" name="article_body"></textarea>

添加脚本，引入KindEditor JS文件，为指定标签创建富文本编辑器。这里主要说使用KindEditor 上传图片时的必要参数：

<script src="{% static &#39;kindeditor-4.1.10/kindeditor-all-min.js&#39; %}"></script><script>
    var options = {
        resizeType: 0,
        uploadJson: "/upload/", //指定图片上传的url路径，server端写一个视图来处理上传的图片
        extraFileUploadParams: {            "csrfmiddlewaretoken": "{{ csrf_token }}"
        }
    };
    KindEditor.create("#article_body", options); //为指定元素创建富文本编辑器</script>

说明：

1. 图片上传要通过uploadJson参数指定上传的url路径

2. extraFileUploadParams参数用于提交csrf验证

图片的上传和预览流程：

1. 在富文本编辑器中选择上传图片

2. KindEditor 将图片通过AJAX的方式上传到服务器指定url

3. 该url对应的视图函数保存图片，并返回包含图片服务器路径的json响应

4. KindEditor 拿到响应的图片路径后，通过<img>标签的src属性，显示预览图片

Django中的代码实现：

from django.conf.urls import urlfrom app import views

urlpatterns = [
    url(r'^upload/$', views.upload_file, name='upload_file'),

    url(r&#39;^media/(?P<path>.*)$&#39;, serve, {&#39;document_root&#39;: settings.MEDIA_ROOT}),  # 配置media路由]

def upload_file(request):
    # 拿到文件，保存在指定路径
    print(request.FILES) # {&#39;imgFile&#39;: [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]}
    imgFile = request.FILES.get(&#39;imgFile&#39;)  # 拿到文件对象，imgFile.name, 拿到文件名

    with open(&#39;app01/media/upload/img/&#39;+imgFile.name,&#39;wb&#39;)as f:   # with open 无法创建文件夹，需要自己创建
        for chunk in imgFile.chunks():
            f.write(chunk)    # 返回json响应
    response = {        
    &#39;error&#39;: 0,        &#39;url&#39;: &#39;/media/upload/img/&#39;+imgFile.name        # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
    }    return HttpResponse(json.dumps(response))

说明：

1. request.FILES中拿到图片对象

2. imgFile.name拿到文件名

3. 必须返回包含error和urlrrreee

4. スクリプトを追加し、 KindEditor JS ファイルを作成し、タグを指定してリッチ テキスト エディターを作成します。ここでは主に、KindEditor を使用して画像をアップロードするときに必要なパラメータについて説明します:

   rrreee

   説明:

5. Imageアップロード要件 uploadJson パラメーターを使用して、アップロードされた URL パスを指定します

🎜extraFileUploadParams パラメーターは、CSRF 検証を送信するために使用されます 🎜🎜🎜🎜🎜 画像のアップロードとプレビューのプロセス: 🎜 🎜

🎜🎜リッチ テキスト エディターで画像をアップロードすることを選択します🎜🎜🎜🎜KindEditor 画像をサーバーにアップロードします指定された URL を AJAX 経由で取得します🎜🎜🎜🎜この URL に対応する view 関数は画像を保存し、画像サーバーのパスを含む json 応答を返します🎜🎜🎜🎜KindEditor 応答画像のパスを取得した後、<img> タグ code>src 属性、プレビュー イメージを表示します 🎜🎜🎜🎜🎜Django でのコード実装: 🎜rrreeerrreee🎜説明: 🎜🎜
🎜🎜request.FILES で画像オブジェクトを取得します 🎜🎜🎜🎜imgFile.name でファイル名を取得します 🎜🎜🎜🎜 error と url の json レスポンスを含むものを返す必要があります🎜🎜🎜🎜画像を保存するためのビュー関数を定義します🎜🎜🎜🎜メディアを設定し (ブログを参照)、ルーティングを定義します🎜🎜🎜🎜

以上がkindeditor画像アップロード機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。