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富文本编辑器工具栏-遇见你与你分享

相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript