Kindeditor 이미지 업로드 기능

KindEditor는 Javascript로 작성된 오픈 소스 온라인 HTML 편집기로, 개발자는 KindEditor를 사용하여 기존의 여러 줄 텍스트 입력 상자(텍스트 영역)를 대체할 수 있습니다. 시각적 서식 있는 텍스트 입력 상자

사용

1. 공식 웹사이트로 이동하여 최신 버전의 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. 이미지 업로드 요구 사항 uploadJson 매개 변수를 통해 업로드된 URL 경로를 지정합니다.

🎜extraFileUploadParams 매개 변수는 csrf 확인을 제출하는 데 사용됩니다. 🎜🎜🎜🎜🎜이미지 업로드 및 미리 보기 프로세스: 🎜 🎜

🎜🎜서식 있는 텍스트 편집기에서 이미지를 업로드하도록 선택하세요🎜🎜🎜🎜KindEditor 서버에 이미지 업로드 AJAX를 통해 지정된 URL 🎜🎜🎜🎜이 URL에 해당하는 보기 함수는 이미지를 저장하고 이미지 서버 경로가 포함된 json 응답을 반환합니다🎜🎜🎜🎜KindEditor 응답 이미지 경로를 얻은 후 <img> 태그 code>src 속성, 미리보기 이미지 표시 🎜🎜🎜🎜🎜Django의 코드 구현: 🎜rrreeerrreee🎜Description: 🎜🎜
🎜🎜request.FILES는 이미지 객체를 가져오고 🎜🎜🎜🎜imgFile.name은 파일 이름을 가져오며 🎜🎜🎜🎜 error 및 url의 json 응답을 포함하여 반환되어야 합니다🎜🎜🎜🎜이미지를 저장하기 위한 보기 기능 정의🎜🎜🎜🎜미디어 구성(블로그 참조) 및 라우팅 정의 🎜🎜🎜🎜

위 내용은 Kindeditor 이미지 업로드 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!