Layui富文本编辑器拓展,增加工具栏

2021-05-04   阅读:2935   分类:前端    标签: Layui

在原有layedit基础上新增

1.html源码模式

2.全屏

3.批量上传图片、插入视频

4.字体颜色、背景色设置、段落格式设置

5.插入表格

6.右键修改图片视频、段落居中格式、删除等功能

7.插入水平线hr

8.锚点

9.插入代码和插入超链接拓展

10.插入自定义链接

11.简单实现撤销重做


image.png

下载:https://gitee.com/YuJian11/layedit.git

使用方法:

步骤一:将下载好的ace.js和layedit.js文件复制到\layui-v2.5.5\lay\modules目录下,并替换layedit.js,如下图所示

image.png

步骤二、引入相关文件:

<script src="/lib/layui-v2.5.5/lay/modules/ace.js" charset="utf-8"></script>

步骤三、使用编辑器

<textarea id="layeditDemo" style="display: none;"></textarea>
<script>
    layui.use(['layedit', 'layer', 'jquery'], function(){
        var layedit = layui.layedit;
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '{{route("ladmin.article.upload")}}',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '{{route("ladmin.article.upload")}}',
                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', 'image_alt', 'video', 'anchors'
                , '|', 'fullScreen'
            ]
            , height: '400px'
        });
        var ieditor = layedit.build('layeditDemo');
});
</script>

注意这里图片上传接口和视频删除接口,以及图片删除接口

layui富文本编辑器layedit同步编辑器内容到textarea

1、给textarea绑定lay-verify="art_content",然后在form的表单自定义验证中加入如下代码即可

<textarea id="layeditDemo" name="art_content" lay-verify="art_content"></textarea>

2、同步内容

var ieditor = layedit.build('layeditDemo');
        //处理同步问题
        form.verify({
            art_content: function(value) {
                return layedit.sync(ieditor);
            }
        });

这里用到官方的layedit.sync(index),用于同步编辑器内容到textarea(一般用于异步提交)参数 index:即var ieditor = layedit.build('layeditDemo');该方法返回的索引

【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/676.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×