Comment ajouter la fonction d'affichage du code source (code) dans l'éditeur de texte enrichi laidedit

Le contenu de cet article explique comment ajouter la fonction d'affichage du code source (code) dans l'éditeur de texte enrichi layedit. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Étant donné que le projet doit utiliser un éditeur de texte enrichi et avoir la fonction d'afficher le code source, mais que layui n'a pas cette fonction pour le moment, j'ai donc pensé à un moyen d'ajouter cette fonction et je l'ai essentiellement réalisé
Il y a un besoin à cet égard, vous pouvez vous référer à l'effet

comme suit :

Les étapes de mise en œuvre sont les suivantes :
1. Ajoutez les deux codes de méthode suivants sur votre propre page

//动态添加编辑器源码查看编辑功能
        function setHtmlCodeToEdit(ele,id) {
            $("#" + ele).next().find(&#39;div.layui-layedit-tool&#39;).append(&#39;<span class="layedit-tool-mid"></span>&#39;);
            $("#" + ele).next().find(&#39;div.layui-layedit-tool&#39;).append(&#39;<i class="layui-icon layui-icon-code-circle" title="查看源码" style="font-size: 18px!important;" onclick="getHtml(this,&#39;+id+&#39;)"></i> &#39;);
        }
        //显示原代码
        function getHtml(boj,index) {
            layui.use(&#39;layedit&#39;,function() {
                var layedit = layui.layedit, $ = layui.jquery;
                var context = layedit.getContent(index);
                if ($(boj).hasClass(&#39;layui-icon-code-circle&#39;)) {
                    $(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(&#39;layui-icon-layouts&#39;)){
                    $(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","查看源码");
                }
            });
        }

2. Après avoir obtenu l'index via la méthode de création officielle layedit, appelez la méthode suivante pour ajouter la fonction d'affichage du code source : Lors de la soumission de données, vous devez porter un jugement. Si elles sont codées en HTML, décodez-les puis soumettez les données en arrière-plan

index = layedit.build('Introduction', opt1);//初始化
                    setHtmlCodeToEdit('Introduction',index);//设置源码菜单

4. Méthodes d'encodage et de décodage (vous pouvez également utiliser votre propre bibliothèque, ou la trouver en ligne)

var context = layedit.getContent(index);//这里是前面获取到index
                        if (context.length > 0) {
                            if (context.indexOf(&#39;<&#39;) >= 0) {//需要进行解码
                                $(document.getElementById("LAY_layedit_" + index)).contents().find("body")
                                    .html(HtmlUtil.htmlDecode(context));
                            }
                            //同步到编辑框
                            layedit.sync(index);

Recommandations associées :

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; 
    }
};

Comment sélectionner une image en texte enrichi et l'insérer dans l'éditeur (code ci-joint)

Utilisez l'éditeur de texte enrichi pour télécharger l'implémentation du code de la couche contextuelle d'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!