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

83 阅读 0 评论 55 点赞

我是靠谱客的博主闪闪鸭子，最近开发中收集的这篇文章主要介绍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 到 Textarea
                        searchReplace : 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", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                        imageUpload : 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 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})