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

相关推荐
万少4 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站6 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名9 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫9 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊9 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter9 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折9 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_9 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial9 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu10 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端