layui如何自定义layedit富文本编辑器工具栏

layui自带了layedit富文本编辑器,我们在使用过程中有时候不需要全部工具,或者想自定义工具栏,该如何弄呢?以下方法教大家自定义自己的layedit编辑器。

步骤1:定义存放编辑器的盒子

复制代码
<div class="layui-form-item layui-form-text">
         <label>小程序内容</label>
         <div>
                   <textarea name="min_content" class="layui-textarea content" id="content"  style="display:none" placeholder="请输入META描述" >{php}if( isset($sys_config->min_content) != '' ) echo  $sys_config->min_content ;{/php}</textarea>
         </div>
</div>

步骤2:实例化layedit

复制代码
<script>
 
    layui.use(['layedit','form'], function () {
        var form = layui.form
            ,layer = layui.layer
            ,$ = layui.$;
 
        var layedit = layui.layedit;
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '/Attachment/LayUploadFile',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/Attachment/LayUploadFile',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            //右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作,
            //传递参数:
            //图片: imgpath --图片路径
            //视频: filepath --视频路径 imgpath --封面路径
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            //开发者模式 --默认为false
            , devmode: true
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink','images', 'image_alt', 'video', 'anchors'
            , '|','table', 'fullScreen']
            , height: '90%'
            });
        var layedit = layedit.build('content');
 
      
 
    });
</script>

layui如何自定义layedit富文本编辑器工具栏-遇见你与你分享

相关推荐
南囝coding17 分钟前
这个仓库堪称造轮子的鼻祖,建议看看!
前端·后端
suedar32 分钟前
关于工程化的随想
前端
安琪吖41 分钟前
微前端:qiankun框架在开发中遇到的问题
前端·vue·element-ui
不爱说话郭德纲44 分钟前
🔥产品:"这功能很常见,不用原型,参考竞品就行!" 你会怎么做
前端·产品经理·产品
wordbaby1 小时前
React 异步请求数据处理优化经验总结
前端·react.js
拉不动的猪1 小时前
回顾 pinia VS vuex
前端·vue.js·面试
Warren981 小时前
Java异常讲解
java·开发语言·前端·javascript·vue.js·ecmascript·es6
超级土豆粉1 小时前
Taro Hooks 完整分类详解
前端·javascript·react.js·taro
iphone1081 小时前
从零开始学网页开发:HTML、CSS和JavaScript的基础知识
前端·javascript·css·html·网页开发·网页
2503_928411561 小时前
7.31 CSS-2D效果
前端·css·css3