layui富文本的使用注意事項以及拓展

詳情請參考 個人博客地址

一、引入layui.js文件
二、初始化編輯器
PS：layedit.set({}) 方法必須要在初始化編輯器之前

var editIndex, layedit, layer;
$(function () {
    //layui.use(['element', 'jquery', 'form', 'layedit', 'flow'], function () {
    layui.use(['layedit'], function () {
        //var element = layui.element;
        //var form = layui.form;
        layer = layui.layer;
        layedit = layui.layedit;

        //設置圖片上傳
        layedit.set({
            uploadImage: {
                url: '', //接口url
                type: 'post', //默認post
                size: '@ViewBag.ImgSize',//文件大小KB
                //accept: '.jpg'
            }
        });

        //初始化編輯器
        editIndex = layedit.build('remarkEditor', {
            tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "face", "link", "unlink", "image", "code"],
            height: 600, //設置編輯器高度
        });


        $(".layui-layedit .layui-unselect.layui-layedit-tool").append('<i class="layui-icon layedit-tool-preview" title="在線預覽" ><i class="fa fa-eye"></i></i>');
        $(".layedit-tool-preview").click(function () {
            layer.open({
                title: '在線預覽',
                shade: 0.2,
                content: layedit.getContent(editIndex),
                //offset: 'auto',
                area: ['90%', '90%'],//(top.window.innerHeight * 0.80).toString()]
            });
        });
    });//layui 結束
});

var editContent = $.trim(layedit.getContent(editIndex));  //取值
layedit.setContent(editIndex, data.Art_FullContent);  //賦值

三、最后的效果圖就是這樣的

四、Tool工具欄的功能可以自己根據layui中layedit.js自行修改吧，防止緩存在layui.js開頭的n方法中加上 version: true 就可以了
1、修改URL鏈接默認target="_blank"
找到 link: function (i) {}方法，b.call()中去除target參數，這個是點擊的時候賦值的
下面的參數把e.target 改成固定的 "_blank"就可以了

link: function (i) {
    var a = p(i),
        l = e(a).parent();
    b.call(o, {
        href: l.attr("href"),
        //target: l.attr("target")
    },
        function (e) {
            var a = l[0];
            "A" === a.tagName ? a.href = e.url : v.call(t, "a", {
                target: "_blank",//e.target,
                href: e.url,
                text: e.url
            },
                i)
        })
},

然后超鏈接彈框的方法 搜索 title: "超鏈接" 就可以找到，然后注釋掉content內容中的 打開方式的 <li> 布局即可

type: 1,
id: "LAY_layedit_link",
area: "350px",
shade: .05,
shadeClose: !0,
moveType: 1,
title: "超鏈接",
skin: "layui-layer-msg",
content: [
    '<ul class="layui-form" style="margin: 15px;">',
    '<li class="layui-form-item">',
    '<label class="layui-form-label" style="width: 50px;">URL</label>',
    '<div class="layui-input-block" style="margin-left: 90px">',
    '<input name="url" lay-verify="url" value="' + (t.href || "") + '" autofocus="true" autocomplete="off" class="layui-input">',
    "</div>",
    "</li>",
    //'<li class="layui-form-item">',
    //'<label class="layui-form-label" style="width: 60px;">打開方式</label>',
    //'<div class="layui-input-block" style="margin-left: 90px">',
    //'<input type="radio" name="target" value="_self" class="layui-input" title="當前窗口"' + ("_self" !== t.target && t.target ? "" : "checked") + ">",
    //'<input type="radio" name="target" value="_blank" class="layui-input" title="新窗口"  checked="checked" >',
    //"</div>",
    //"</li>",
    '<li class="layui-form-item" style="text-align: center;">',
    '<button type="button" lay-submit lay-filter="layedit-link-yes" class="layui-btn"> 確定 </button>',
    '<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>',
    "</li>",
    "</ul>"
].join(""),

本來想加一個顯示內容的input，用於顯示連接的文本內容，發現加上之后老是取不到值，不知道哪里的問題，如果有知道的就評論說一下吧
后來直接先寫好文本，然后選中在點擊連接進行綁定也是一樣的效果，就是麻煩了一點，將就用吧。。

2、修改插入代碼片段功能，這個需要配合highlight插件使用

code: function (e) {
    k.call(o,
        function (i) {
            //console.log(i.code.replaceAll("<", "&lt").replaceAll(">", "&gt"));
            v.call(t, "pre", {
                //text: i.code,
                text: "<code>" + i.code.replaceAll("<", "&lt").replaceAll(">", "&gt") + "</code>",
                //"lay-lang": i.lang
            },
                e)
        })
},

3、預覽功能拓展
嘗試着搞了一下，還可以。。這個就是一個彈框就挺簡單，頂部代碼有說明

詳情請參考 個人博客地址