一、简要说明

  在博客、新闻编辑等页面经常需要进行内容编辑,最后还要展示,因此不可能像在TEXT文档里面编辑一样(只是纯文字内容,没有人任何的样式),所以就需要富文本编辑器,通过快捷键或者是固定的语法在编辑器中使用自己想要的样式,使自己编辑的内容条理更清晰,赏心悦目。从展示的方式上可以分为两种:第一种,在后台使用表单工具,编写相应的表单类,然后在后台将代码渲染成相应的表单再传输到前端(django-tinymce、django-ckeditor、django-ueditor等);第二种,返回一个包含一些简单配置的前端页面,当浏览器在解析页面时,就会请求相应的js、css文件并渲染成一个表单(Meditor)。这两种方式,我更偏向于第二种,相对于第一种,后台做的工作更少一些,不用做一些额外的操作,更加的简单。

二、Meditor

   1.根据页面展示,你可以判断是否符合你的口味:https://pandao.github.io/editor.md/

django之前端富文本编辑器(Meditor)

   2.Meditor使用(markdown语法)

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
    <textarea style="display:none;">### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
    </textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

上述代码是官网给的使用格式,千万不要以为只要有代码中的三个文件(editormd.css、jquery.min.js、editormd.min.js)就万事大吉了,还需要有path参数(editormd/lib/里面的文件),如果还不能运行,就对照前端渲染后传递的js、css、font等文件一个一个提取,构建对应的目录;要是嫌麻烦,包里面的所有文件都不动(稍微有一点大)。

   3.配置项介绍

<script type="text/javascript">
    var testEditor;

    $(function() {

        $.get('test.md', function(md){
            testEditor = editormd("test-editormd", {
                width: "90%",
                height: 740,
          # 依赖包的路径,按自己的司机配置 path :
'../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

          # 下面上个配置项,是上传图片的配合项,点击上传图片时,不用自己编写代码,就直接可以提交,但要将imageUploadURL设置为自己的上传URL,而且要记得在后端图片上传的
          # 获取对象的键名:editormd-image-file,必须要使用这个键名获取,否则获取不到
imageUpload : true, imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL : "./php/upload.php", onload : function() { console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.setMarkdown("#PHP"); //this.width("100%"); //this.height(480); //this.resize("100%", 640); } }); }); }); </script>

   4、图片上传简要说明

django之前端富文本编辑器(Meditor)

 

 django之前端富文本编辑器(Meditor)

 只要配置好了,点击上传,选择图片文件,就会自动发送上传请求给配置项中的imageUploadURL,不用自己手写。