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

2023-12-25 11:38:20

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

文章来源:https://blog.csdn.net/yu502586512/article/details/135193809
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。