>  기사  >  웹 프론트엔드  >  Layedit 리치 텍스트 편집기에서 디스플레이 소스 코드 기능(코드)을 추가하는 방법

Layedit 리치 텍스트 편집기에서 디스플레이 소스 코드 기능(코드)을 추가하는 방법

不言
不言원래의
2018-08-25 16:35:126573검색

이 글의 내용은 Layedit 리치 텍스트 편집기에서 소스 코드 표시 기능(코드)을 추가하는 방법에 대한 내용입니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

프로젝트에는 리치 텍스트 편집기를 사용해야 하고 소스 코드를 표시하는 기능이 있어야 하는데, 지금 Layui에는 이 기능이 없기 때문에 이 기능을 추가하는 방법을 생각했는데 기본적으로 구현되었습니다. 필요하시면 참고하시면 됩니다

효과는 다음과 같습니다.


Layedit 리치 텍스트 편집기에서 디스플레이 소스 코드 기능(코드)을 추가하는 방법

Layedit 리치 텍스트 편집기에서 디스플레이 소스 코드 기능(코드)을 추가하는 방법 구현 단계는 다음과 같습니다.
1. 자신의 페이지에 다음 두 가지 메소드 코드를 추가하세요

//动态添加编辑器源码查看编辑功能
        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. 공식layedit 생성 메소드를 통해 인덱스를 얻은 후, 다음 메소드를 호출하여 디스플레이 소스코드 함수


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

3를 추가합니다. 데이터를 제출할 때 HTML로 인코딩된 것인지 판단해야 합니다. 그런 다음 데이터를 백그라운드로 제출합니다. 인코딩 및 디코딩 방법(자신의 라이브러리를 사용하거나 온라인에서 찾을 수도 있음)

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

관련 권장 사항:

서식 있는 텍스트의 이미지를 선택하고 편집기에 삽입하는 방법(코드 포함)

사용 업로드할 서식 있는 텍스트 편집기 그림 팝업 레이어의 코드 구현

위 내용은 Layedit 리치 텍스트 편집기에서 디스플레이 소스 코드 기능(코드)을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.