layui框架实战案例(24):layedit工具栏添加查看源代码按钮的解决方案

news2024/12/25 12:23:17

layUI框架实战案例系列文章

layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
layui框架实战案例(20)：常用条件判断和信息展示技巧(图片预览、动态表格、短信已读未读、链接分享、信息脱敏、内置框架页)
layui框架实战案例(19)：layui-table模块表格综合应用（筛选查询、导入导出、群发短信、一键审核、照片展示、隐私加密）
layui框架实战案例(18)：保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案
layui框架实战案例(17)：流加载文档layui.flow组件的前后端解决方案
layui框架实战案例(16)：xm-select下拉多选插件实战记录（远程搜索、过滤、翻页、单选、提示文字）
layui框架实战案例(15)：上传提示413 request entity too large宝塔配置的解决方案
layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(13)：colorpicker颜色选择器的使用
layui框架实战案例(12)：layui标签输入框inputTag
layui框架实战案例(11)：表单自定义验证规则
layui框架实战案例(10)：短信验证码60秒倒计时
layui框架实战案例(9)：layPage 静态数据分页组件
layui框架实战案例(8)：web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
layui框架实战案例(7)：时间范围选择及时间处理的解决方案
layui框架实战案例(6)：上传图片和视频自动调用IOS或安卓系统的摄像头功能
layui框架实战案例(5)：基于PHP后端的layUI上传视频到七牛云对象储存并自动转码
layui框架实战案例(4)：因内容安全策略导致弹出层模态框无法正常显示微信公众号文章使用window.open的解决方案
layui框架实战案例(3)：layui上传错误请求上传接口出现异常解决方案
layui框架实战案例(2)：layui文件上传PHP后台参数获取方式及JSON返回格式
layui框架实战案例(1)：layui组件table异步加载数据结合php后台动态翻页的解决方案

其他目录

layui动态表格翻页和搜索的代码分析
layui实现定位、查询数据以及select筛选的组合功能
layui多文件上传与PHP后端对接的解决方案
layui内部表单互动的实战案例：根据radio单选框自动改变input内容
layui复选框checkbox全选和获取值的解决方案
layui和weui结合手机端select表单底部选择和被遮挡的解决方案

select编辑回显内容及事件调用

layUI框架实战案例系列文章
html容器代码
富文本编辑
封装调用方法
验证内容

在这里插入图片描述
layedit是一款基于layui框架的富文本编辑器，适用于后台管理系统、博客编辑等场景，提供了很多实用的功能，包括但不限于：

字体、字号、颜色设置，加粗、斜体、下划线、删除线等文字样式设置。
图片、链接、表格、列表插入，源代码、全屏、撤销、重做等操作。
自定义工具栏。

html容器代码

    <div class="layui-form-item">
                            <label for="poi_content" class="layui-form-label">工程信息 <span class="x-red">*</span></label>
                            <div class="layui-input-inline" style="width: 100%;"><textarea name="poi_content" id="poi_content" class="layui-textarea"><p>1</p><p><img src="upload/poi/8_ad_214d2fa823d4d686c04fd41a4a5cff45.png" alt="8_ad_214d2fa823d4d686c04fd41a4a5cff45.png"><br></p></textarea></div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>

富文本编辑

  //编辑器上传图片;
        layedit.set({
            uploadImage: {
                url: '?m=Upload&a=uploadDeal&act=upEdit&fromType=poi&token=' + upToken
                , type: 'post'
            }
        });

        //编辑器
        var index1 = layedit.build('poi_content', {
            tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right', 'link', 'unlink', 'image']
        });
        setHtmlCodeToEdit('poi_content',index1);//设置源码菜单

新增方法：setHtmlCodeToEdit('poi_content',index1);//设置源码菜单

其中poi_content为对应的HTML容器对应的ID

封装调用方法

/************layEdit富文本编辑器 Begin*********/
function setHtmlCodeToEdit(ele, id) {
    $("#" + ele).next().find('div.layui-layedit-tool').append('<span class="layedit-tool-mid"></span>');
    $("#" + ele).next().find('div.layui-layedit-tool').append('<i class="layui-icon layui-icon-code-circle" title="查看源码" style="font-size: 18px!important;" οnclick="getHtml(this,' + id + ')"></i> ');
}

//显示原代码
function getHtml(boj, index) {
    layui.use('layedit', function () {
        var layedit = layui.layedit, $ = layui.jquery;
        var context = layedit.getContent(index);
        if ($(boj).hasClass('layui-icon-code-circle')) {
            $(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body")
                .html(HtmlUtil.htmlEncode(context));
            $(boj).removeClass("layui-icon-code-circle");
            $(boj).addClass("layui-icon-layouts");
            $(boj).attr("title", "查看HTML");
        } else if ($(boj).hasClass('layui-icon-layouts')) {
            $(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body")
                .html(HtmlUtil.htmlDecode(context));
            $(boj).removeClass("layui-icon-layouts");
            $(boj).addClass("layui-icon-code-circle");
            $(boj).attr("title", "查看源码");
        }
    });
}

var HtmlUtil = {
    /*1.用浏览器内部转换器实现html转码*/
    htmlEncode: function (html) {
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement("div");
        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
        //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
        var output = temp.innerHTML;
        temp = null;
        return output;
    },
    /*2.用浏览器内部转换器实现html解码*/
    htmlDecode: function (text) {
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement("div");
        //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
        temp.innerHTML = text;
        //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }
};

/************layEdit富文本编辑器 End*********/

验证内容

 var poi_content = layedit.getContent(index1);
            if (poi_content.length <= 0) {
                layer.msg("工程信息不能为空", {icon: 2, time: 2000});
                $('#poi_content').focus();
                return false;
            }