一、简要说明
在博客、新闻编辑等页面经常需要进行内容编辑,最后还要展示,因此不可能像在TEXT文档里面编辑一样(只是纯文字内容,没有人任何的样式),所以就需要富文本编辑器,通过快捷键或者是固定的语法在编辑器中使用自己想要的样式,使自己编辑的内容条理更清晰,赏心悦目。从展示的方式上可以分为两种:第一种,在后台使用表单工具,编写相应的表单类,然后在后台将代码渲染成相应的表单再传输到前端(django-tinymce、django-ckeditor、django-ueditor等);第二种,返回一个包含一些简单配置的前端页面,当浏览器在解析页面时,就会请求相应的js、css文件并渲染成一个表单(Meditor)。这两种方式,我更偏向于第二种,相对于第一种,后台做的工作更少一些,不用做一些额外的操作,更加的简单。
二、Meditor
1.根据页面展示,你可以判断是否符合你的口味:https://pandao.github.io/editor.md/
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、图片上传简要说明
只要配置好了,点击上传,选择图片文件,就会自动发送上传请求给配置项中的imageUploadURL,不用自己手写。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:django之前端富文本编辑器(Meditor) - Python技术站