【layui】使用wangEditor

Minions_Fatman

已于 2024-01-04 14:38:04 修改

阅读量749

点赞数

分类专栏： layui 文章标签： layui 前端 javascript

于 2023-07-13 10:43:15 首次发布

本文链接：https://blog.csdn.net/minions_fatman/article/details/131697090

版权

layui 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章详细介绍了wangEditor的配置过程，包括工具栏的定制，如设置字体样式、对齐方式、列表、表格等，以及图片和视频上传的配置。同时，提到了CSS样式定义和HTML结构的构建，以及JavaScript代码用于创建和初始化编辑器。

摘要由CSDN通过智能技术生成

官网地址 wangEditor官网

工具栏配置

共有58个key

    toolbarKeys: [
        "bold","underline","italic","through","code","sub","sup","clearStyle","color",
        "bgColor","fontSize","fontFamily","indent","delIndent",
        "justifyLeft","justifyRight","justifyCenter","justifyJustify",
        "lineHeight","insertImage","deleteImage","editImage","viewImageLink",
        "imageWidth30","imageWidth50","imageWidth100","divider",
        "emotion","insertLink","editLink","unLink","viewLink","codeBlock","blockquote","headerSelect","header1",
        "header2","header3","header4","header5","todo","redo","undo","fullScreen","bulletedList",
        "numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
        "deleteTableCol","tableHeader","tableFullWidth",
        "insertVideo","uploadVideo","uploadImage","codeSelectLang"
    ]

把所有工具栏列出来，就是下图：
在这里插入图片描述

引入 CSS 定义样式

<script type="text/html" template>
    <link href="{{layui.setter.publicUrl}}/static/admin/weditor/style.css" type="text/css" rel="stylesheet">
</script>
<style>
#editor—wrapper { width: 100%; border: 1px solid #ccc; }
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 500px; }
#editor—wrapper .w-e-textarea-video-container video{ width: 100%; }
</style>

定义 HTML 结构

    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <div id="editor—wrapper">
                <div id="toolbar-container"><!-- 工具栏 --></div>
                <div id="editor-container"><!-- 编辑器 --></div>
                <input type="hidden" name="content" id="get_content">
            </div>
        </div>
    </div>

引入 JS 创建编辑器

<script>
var layedit;
createScript("/static/admin/layui/lay/modules/jquery.3.1.1.js");
createScript("/static/admin/weditor/index.js");
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','layer'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,layedit = layui.layedit
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,upload = layui.upload
        ,router = layui.router();

    element.render();
    form.render(null, 'add_article');
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
		autoFocus: false,
        placeholder: '',
        MENU_CONF: {},
        hoverbarKeys: {
            'image': {},
            'video': {},
        },
        onChange(editor) {
            const html = editor.getHtml()
            document.getElementById('get_content').value = html
            // console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    }
    // 上传图片
    editorConfig.MENU_CONF['uploadImage'] = {
        server: layui.setter.baseUrl+'admin/upload/upload', // 上传图片地址
        timeout: 5 * 1000, // 5s
        fieldName: 'file',
        metaWithUrl: false, // 参数拼接到 url 上
        headers: { Accept: 'text/x-json' },
        maxFileSize: 10000 * 1024 * 1024, // 10M
        base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
        customInsert(res, insertFn) {
            let str = res.data.split('/');
            insertFn(res.data, str[str.length - 1], res.data)
        },
        onBeforeUpload(files) {
            // console.log('onBeforeUpload', files)
            return files // 返回哪些文件可以上传
            // return false 会阻止上传
        },
        onProgress(progress) { },
        onSuccess(file, res) { },
        onFailed(file, res) { },
        onError(file, err, res) { },
    }
    // 上传视频
    editorConfig.MENU_CONF['uploadVideo'] = {
        server: layui.setter.baseUrl+'admin/upload/upload', // 上传视频地址
        timeout: 500 * 1000, // 5s
        fieldName: 'file',
        metaWithUrl: false, // 参数拼接到 url 上
        maxFileSize: 20000 * 1024 * 1024, // 10M
        customInsert(res, insertFn) { // 自定义插入视频
			insertFn(res.data, res.data+'?x-oss-process=video/snapshot,t_100,f_jpg')
        },
        onBeforeUpload(files) { // 上传之前触发
            layer.msg('视频上传中...', { icon: 16, shade: 0.01, time: 0 });
            return files // 返回哪些文件可以上传
            // return false 会阻止上传
        },
        // 上传进度的回调函数
        onProgress(progress) { },
        // 单个文件上传成功之后
        onSuccess(file, res) { 
            layer.close(layer.msg());//关闭上传提示窗口
        },
        // 单个文件上传失败
        onFailed(file, res) { },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) { 
            layer.msg(`${file.name} 上传出错`);
			console.log(`${file.name} 上传出错`, err, res)
        },
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple', // 'default' or 'simple'
    })
    const toolbarConfig = {
        toolbarKeys: [
            "bold","underline","italic","through","clearStyle","color","fontSize","indent",
            "justifyRight","justifyLeft","justifyCenter","justifyJustify","lineHeight",
            "deleteImage","editImage","divider","insertLink",
            "blockquote","headerSelect","header1","header2","bulletedList",
            "uploadVideo","uploadImage",
        ]  
    }
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple', // 'default' or 'simple'
    })
   
   
});
}
</script>