富文本编辑器java代码 富文本编辑器前端

一、简要说明

　　在博客、新闻编辑等页面经常需要进行内容编辑，最后还要展示，因此不可能像在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，不用自己手写。