Django搭建强大好用的文本编辑器

简介

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。需要的小伙伴可在GitHub上下载使用(https://github.com/pandao/editor.md/)。完整的demo也可以参考下面的地址：https://pandao.github.io/editor.md/examples/index.html。

下面是这款在线编辑器的特性。

• 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可变身为代码编辑器；
• 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
• 支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
• 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
• 支持识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析，具有可靠的安全性和几乎无限的扩展性；
• 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
• 兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；

这款在线编辑器有一个缺点就是无法将HTML转换为markdown语法。不过在未来可能会弥补好这一点。

Django配置

• 在github上将整个下载下来后放入django项目的static目录下

• html页面插入下面的代码

• 前端代码中的imageUploadURL字段是图片上传的地址，该功能要在后端视图中自己实现。本次图片存放在fastdfs分布式文件存储系统中，关于这个查看Django搭建fastdfs。后端返回的参数可以源码中查看获取，有三个参数：success、message、url，如下图所示：

后端接收的参数名为editormd-image-file，如下图所示：

from django.http import JsonResponse
from django.conf import settings

class Markdown_Upload_image(View):
    def post(self,request):
        FDFS_Client = Fdfs_client('utils/fastdfs/client.conf')
        image_file = request.FILES.get('image_file')
        if not image_file:
            return JsonResponse({'success':0,'message':'上传图片为空'})
        if image_file.content_type not in ('image/jpeg', 'image/png', 'image/gif'):
            return JsonResponse({'success': 0, 'message': '不能上传非图片文件'})
        try:
            image_ext_name = image_file.name.split('.')[-1]
        except Exception as e:
            image_ext_name = 'jpg'
        try:
            upload_res = FDFS_Client.upload_by_buffer(image_file.read(), file_ext_name=image_ext_name)
        except Exception as e:
            return JsonResponse({'success': 0, 'message': '图片上传异常'})
        if upload_res.get('Status') != 'Upload successed.':
            return JsonResponse({'success': 0, 'message': '图片上传到服务器失败'})
        image_name = upload_res.get('Remote file_id')
        image_url = settings.FASTDFS_SERVER_DOMAIN + image_name
        return JsonResponse({'success':1,'message':'上传图片成功','url':image_url})

Editor.md的常用方法

• testEditor.gotoLine(num);

功能是到达指定行，参数num是一个正整数。

• testEditor.show();

显示这个在线编辑器，如果已经显示，则该方法无效。

• testEditor.hide();

隐藏这个在线编辑器，如果已经隐藏，则该方法无效。

• testEditor.getMarkdown();

以markdown的格式返回编辑器内的内容。可用alert()方法弹出来显示。

• testEditor.getHTML();

以HTML的格式返回编辑器内的内容。可用alert()方法弹出来显示。

• testEditor.watch();

开启实时预览功能。

• testEditor.unwatch();

关闭实时预览功能。

• testEditor.previewing();

隐藏工具栏，编辑器展示此时的文本预览的内容。(全窗口预览HTML)

• testEditor.fullscreen();

将编辑器全屏展示，按ESC恢复。

• testEditor.showToolbar();

显示编辑器工具栏，如果已经显示，该方法失效。

• testEditor.hideToolbar();

隐藏编辑器工具栏，如果已经隐藏，该方法失效。

• testEditor.config('key','value');

对testEditor的属性进行配置或修改。