wangEditor富文本编辑器

• 官网：www.wangEditor.com
• 文档：www.wangeditor.com/doc

使用wangEditor编辑器，我是直接下载他的源码js，优点就是加载快

<script type="text/javascript" src="js/wangEditor.js"></script>

然后就是创建编辑器了

你要先在html中创建一个div，给一个id

const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

 看到这样就表示引入成功，接下来就是配置菜单，你可能不想要其中得一个工具，那么你就可以根据文档进行菜单得配置

   editor.config.menus = [
       'head', //标题
    'bold',//加粗
    'fontSize',//字体大小
    'fontName',//字体
    'italic',//斜体
    'underline',//下划线
    'strikeThrough',//中划线
    'indent',//对齐方式
    'lineHeight',//行高
    'foreColor',//字体颜色
    'backColor',//背景色
    'link',//链接
    'list',//序列
    'todo',//有序列表
    'justify',//对齐方式
    'quote',//
    'emoticon',//表情
    'image',//图片
    'video',//视频
    'table',//变革
    'code',//代码
    'splitLine',//
    'undo',//撤销
    'redo',//回复
    'underline'//全屏
    ]

配置图片可以不用接口也可以配置成功，但是为了传参给后台，减少服务器得压力，最好是配置一个图片接口

 editor.config.uploadVideoServer = '/uploadWangEditorVideo';//上传视频接口

    editor.config.uploadVideoName = 'multipartFile';//上传视频参数名，这个是后台设置

    editor.config.uploadImgServer = '/uploadWangEditorImg';//上传图片接口

    editor.config.uploadFileName = 'multipartFile';//上传图片参数名
  
   
  

视频也是一样得配置，参数是后台设置，需要用的话需要和你们得后台人员确认参数即可

最后常用的就是监听最新页面变化，我用的是onchange方法

editor.config.onchange = function (newHtml) { //监听编辑器内容变化
        editorHtml=newHtml //获取最新的html并赋值
    };

最后完整的代码在这里奉上：

var editorHtml='';
var editor;

//富文本编辑器
$(document).ready(function(){
    edito()//编辑器初始化
});
function edito() {
    const E = window.wangEditor
    editor= new E( document.getElementById('div1') )
    editor.config.height = 500  //配置高度
    //配置工具栏
    editor.config.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'emoticon',
        'image',
        'video',
        'undo',
        'redo',
        'underline'
    ]
    //上传视频参数配置  正式服改.com
    editor.config.uploadVideoServer = '/uploadWangEditorVideo';//上传视频接口
    editor.config.uploadVideoName = 'multipartFile';//上传视频参数名
    editor.config.uploadImgServer = '/uploadWangEditorImg';//上传图片接口
    editor.config.uploadFileName = 'multipartFile';//上传图片参数名
    editor.config.uploadVideoTimeout =  1000 * 60 * 5 //上传视频最长时间
    editor.config.onchange = function (newHtml) { //监听编辑器内容变化
        editorHtml=newHtml //获取最新的html并赋值
    };
    editor.create() //创建编辑器
}

最后结果就是