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页面插入下面的代码

<link rel="stylesheet" href="{% static 'plugins/markdown_editor/css/editormd.css' %}"><div id="test-editormd""><textarea name="content" style="display:none;" id="content"></textarea>
</div><script src="{% static 'plugins/markdown_editor/editormd.js' %}"></script><script type="text/javascript">var testEditor;$(function() {$.get('{% static 'plugins/markdown_editor/examples/test.md' %}', function(md){testEditor = editormd("test-editormd", {width: "90%",height: 740,path : '{% static 'plugins/markdown_editor/lib/' %}',theme : "dark",previewTheme : "dark",editorTheme : "pastel-on-dark",markdown : md,codeFold : true,//syncScrolling : false,saveHTMLToTextarea : true,    // 保存 HTML 到 TextareasearchReplace : true,//watch : false,                // 关闭实时预览htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    //toolbar  : false,             //关闭工具栏//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启emoji : true,taskList : true,tocm            : true,         // Using [TOCM]tex : true,                   // 开启科学公式TeX语言支持，默认关闭flowChart : true,             // 开启流程图支持，默认关闭sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fffimageUpload : true,imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "{% url 'admin:markdown_image_upload' %}",onload : function() {console.log('onload', this);}});});
</script>

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

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

from django.http import JsonResponse
from django.conf import settingsclass 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_namereturn 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的属性进行配置或修改。