Js 之移动端富文本插件（wangEditor）

文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

下载：https://github.com/wangfupeng1988/wangEditor/releases

一、效果图

 

 

 二、代码示例

<div id="editorContainer" style="margin-bottom: 10px;"></div>

<script src="__INDEX__/style/js/wangEditor.min.js"></script>
<script>
var E = window.wangEditor;
var editor = new E('#editorContainer');
// 自定义菜单配置
editor.customConfig.menus = [
    'head',
    'bold',
    'image'
];
editor.customConfig.showLinkImg = false;
editor.customConfig.uploadImgShowBase64 = true;
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 5;
// editor.customConfig.uploadFileName = 'file';
//editor.customConfig.uploadImgServer = '{:url("upload")}';
editor.customConfig.customUploadImg = function (files, insert) {
    // files 是 input 中选中的文件列表
    // insert 是获取图片 url 后，插入到编辑器的方法

    for(let i = 0;i < files.length; i++){
        var form = new FormData();
        form.append("file", files[i]);
        $.ajax({
                url: '{:url("upload")}',
                type: "post",
                processData: false,
                contentType: false,
                data: form,
                dataType: 'json',
                success(res) {
                    // 上传代码返回结果之后，将图片插入到编辑器中
                insert(res.data)
                }
            })
        }
    };

editor.customConfig.onchange = function (html) {
    // 监控变化，同步更新到 textarea
    $('#content').val(html)
};
editor.create();
</script>