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>