> 백엔드 개발 > PHP 튜토리얼 > 한 페이지에서 여러 KindEditor 편집기를 사용하고 서버 측에 값을 전달하는 방법

한 페이지에서 여러 KindEditor 편집기를 사용하고 서버 측에 값을 전달하는 방법

眼眸间的深情
풀어 주다: 2023-04-10 11:34:02
원래의
3125명이 탐색했습니다.

오늘 KindEditor를 사용할 때 한 페이지에 두 개의 에디터를 사용해야 하는데 처음에는 위와 같은 코드를 직접 추가했더니 효과가 나왔어요. 하지만 제출할 때 항상 낮은 값이 높은 값을 덮어쓰므로 이 문제가 크지 않아야 한다고 생각하므로 약간의 수정을 거쳐 마침내 효과가 달성되기를 바랍니다. 진전!

다음 단계는 다음과 같습니다.

1. 편집기 배열 선언:

var editor = new Array();
로그인 후 복사

2. 이전 편집기 표시 줄 코드

KindEditor.ready(function(K) {
        window.editor = K.create('#content', defaultEditorOptions);
});
로그인 후 복사

를 인덱스 배열 형식의 코드로 변경합니다.

KindEditor.ready(function(K) {
        window.editor[0] = K.create('#content', defaultEditorOptions);
        window.editor[1] = K.create('#ycontent', defaultEditorOptions);
});
로그인 후 복사

이렇게 하면 KindEditor 편집기의 렌더링이 표시됩니다.

3. KindEditor에서 입력한 관련 데이터를 전달합니다.

KindEditor 편집기의 이전 전달 방법은 다음과 같습니다.

<script>

$("#submitBtn").on(&#39;click&#39;, function(event) {
        //编辑器中的内容异步提交
        editor.sync();
        event.preventDefault();
        var params = $("form").serializeArray();
        sendRequest(&#39;{:U("doEdit")}&#39;, params, function(data) {
            if (data.status == 1) {
                simpleSwal(data.info, &#39;&#39;, 1, function() {
                    jumpCurrentFrame();
                });
            } else {
                simpleSwal(data.info, &#39;&#39;, 2);
            }


        });


    });

<script>
로그인 후 복사

위 코드를 변경해야 합니다. 값을 전달하는 올바른 방법:

$("#submitBtn").on(&#39;click&#39;, function(event) {
        //编辑器中的内容异步提交
        editor[0].sync();
        editor[1].sync();//需要注意的是,这里面的索引数值是需要和变为一个索引数组形式的代码索引值一致,即键值一样多!!!
        event.preventDefault();
        var params = $("form").serializeArray();
        sendRequest(&#39;{:U("doEdit")}&#39;, params, function(data) {
            if (data.status == 1) {
                simpleSwal(data.info, &#39;&#39;, 1, function() {
                    jumpCurrentFrame();
                });
            } else {
                simpleSwal(data.info, &#39;&#39;, 2);
            }


        });


    });
로그인 후 복사

이 방법으로 서버 측에서 해당 값을 수신하고 확인할 수 있습니다.

전체 코드는 아래에 게시되어 있습니다. 필요한 친구는 살펴보세요.

<script>
 // 点击提交
    $("#submitBtn").on(&#39;click&#39;, function(event) {
        //编辑器中的内容异步提交
        editor[0].sync();
        editor[1].sync();
        event.preventDefault();
        var params = $("form").serializeArray();
        sendRequest(&#39;{:U("doEdit")}&#39;, params, function(data) {
            if (data.status == 1) {
                simpleSwal(data.info, &#39;&#39;, 1, function() {
                    jumpCurrentFrame();
                });
            } else {
                simpleSwal(data.info, &#39;&#39;, 2);
            }


        });


    });
    </script>

    <!-- 编辑器插件 -->
    <script charset="utf-8" src="__PUBLIC__/lib/js/plugins/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="__PUBLIC__/lib/js/plugins/kindeditor/lang/zh_CN.js"></script>
    <!-- 为避免kindeditor获取目录时出错,路径引入都避开base设置,采用根路径 -->
    <!-- uploadJson等的路径默认是PHP的,可以不用配置。 -->
    <!-- 但是若配置,则其相对路径起始是主窗口URL或者base,不是kindeditor自身的basePath -->
    <script>
    var editor = Array();
    var defaultEditorOptions = {
        width: &#39;100%&#39;,
        resizeType: 1,
        items: [
            &#39;source&#39;, &#39;|&#39;, &#39;undo&#39;, &#39;redo&#39;, &#39;|&#39;, &#39;preview&#39;, &#39;print&#39;, &#39;template&#39;, &#39;code&#39;, &#39;cut&#39;,
            &#39;copy&#39;, &#39;paste&#39;, &#39;plainpaste&#39;, &#39;wordpaste&#39;, &#39;|&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;,
            &#39;justifyright&#39;, &#39;justifyfull&#39;, &#39;insertorderedlist&#39;, &#39;insertunorderedlist&#39;, &#39;indent&#39;,
            &#39;outdent&#39;, &#39;subscript&#39;, &#39;superscript&#39;, &#39;clearhtml&#39;, &#39;quickformat&#39;, &#39;selectall&#39;, &#39;|&#39;,
            &#39;fullscreen&#39;, &#39;/&#39;, &#39;formatblock&#39;, &#39;fontname&#39;, &#39;fontsize&#39;, &#39;|&#39;, &#39;forecolor&#39;,
            &#39;hilitecolor&#39;, &#39;bold&#39;, &#39;italic&#39;, &#39;underline&#39;, &#39;strikethrough&#39;, &#39;lineheight&#39;,
            &#39;removeformat&#39;, &#39;|&#39;, &#39;image&#39;, &#39;multiimage&#39;, &#39;|&#39;, &#39;table&#39;, &#39;hr&#39;, &#39;emoticons&#39;,
            &#39;pagebreak&#39;, &#39;anchor&#39;, &#39;link&#39;, &#39;unlink&#39;, &#39;|&#39;, &#39;about&#39;
        ],
        uploadJson: &#39;{:U("imgUpload",array("f"=>"imgFile"))}&#39;,
        formatUploadUrl: false,
        // uploadJson: &#39;__ROOT__/Public/lib/js/plugins/kindeditor/php/upload_json_extend.php&#39;,
        afterUpload: function(url) {}
    };


    KindEditor.ready(function(K) {
        window.editor[0] = K.create(&#39;#content&#39;, defaultEditorOptions);
        window.editor[1] = K.create(&#39;#ycontent&#39;, defaultEditorOptions);
    });
    </script>
로그인 후 복사

위 내용은 한 페이지에서 여러 KindEditor 편집기를 사용하고 서버 측에 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿