這篇文章主要介紹“怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務(wù)器端”,在日常操作中,相信很多人在怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務(wù)器端問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務(wù)器端”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
成都創(chuàng)新互聯(lián)公司成立于2013年,先為吳興等服務(wù)建站,吳興等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為吳興企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
今天使用KindEditor編輯器時需要涉及到一個頁面使用兩個編輯器的問題,剛開始,我直接在添加和上面一樣性質(zhì)的代碼,效果是出來了。但是提交的時候下面的那個值總是將上面的那個值覆蓋了,我感覺這問題應(yīng)該不大,于是經(jīng)過一番搗鼓,最終實現(xiàn)效果,這是我個人總結(jié)的心得,希望大家一起學習,共同進步!
以下是操作步驟:
1.聲明一個editor數(shù)組:
var editor = new Array();
2.將之前的編輯器顯示行代碼:
KindEditor.ready(function(K) { window.editor = K.create('#content', defaultEditorOptions); });
變?yōu)橐粋€索引數(shù)組形式的代碼:
KindEditor.ready(function(K) { window.editor[0] = K.create('#content', defaultEditorOptions); window.editor[1] = K.create('#ycontent', defaultEditorOptions); });
這樣,KindEditor編輯器的效果圖便會顯示出來:
3.傳遞KindEditor所填寫的相關(guān)數(shù)據(jù):
之前一個KindEditor編輯器的傳遞方式是這樣的:
<script> $("#submitBtn").on('click', function(event) { //編輯器中的內(nèi)容異步提交 editor.sync(); event.preventDefault(); var params = $("form").serializeArray(); sendRequest('{:U("doEdit")}', params, function(data) { if (data.status == 1) { simpleSwal(data.info, '', 1, function() { jumpCurrentFrame(); }); } else { simpleSwal(data.info, '', 2); } }); }); <script>
我們需要將上述代碼部分改為如下我們的正確傳值方式:
$("#submitBtn").on('click', function(event) { //編輯器中的內(nèi)容異步提交 editor[0].sync(); editor[1].sync();//需要注意的是,這里面的索引數(shù)值是需要和變?yōu)橐粋€索引數(shù)組形式的代碼索引值一致,即鍵值一樣多!??! event.preventDefault(); var params = $("form").serializeArray(); sendRequest('{:U("doEdit")}', params, function(data) { if (data.status == 1) { simpleSwal(data.info, '', 1, function() { jumpCurrentFrame(); }); } else { simpleSwal(data.info, '', 2); } }); });
這樣,我們就可以在服務(wù)器端進行相應(yīng)值的接收和校驗了。
下面把完整的代碼貼下,需要的小伙伴可以看下:
<script> // 點擊提交 $("#submitBtn").on('click', function(event) { //編輯器中的內(nèi)容異步提交 editor[0].sync(); editor[1].sync(); event.preventDefault(); var params = $("form").serializeArray(); sendRequest('{:U("doEdit")}', params, function(data) { if (data.status == 1) { simpleSwal(data.info, '', 1, function() { jumpCurrentFrame(); }); } else { simpleSwal(data.info, '', 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設(shè)置,采用根路徑 --> <!-- uploadJson等的路徑默認是PHP的,可以不用配置。 --> <!-- 但是若配置,則其相對路徑起始是主窗口URL或者base,不是kindeditor自身的basePath --> <script> var editor = Array(); var defaultEditorOptions = { width: '100%', resizeType: 1, items: [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', '|', 'table', 'hr', 'emoticons', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ], uploadJson: '{:U("imgUpload",array("f"=>"imgFile"))}', formatUploadUrl: false, // uploadJson: '__ROOT__/Public/lib/js/plugins/kindeditor/php/upload_json_extend.php', afterUpload: function(url) {} }; KindEditor.ready(function(K) { window.editor[0] = K.create('#content', defaultEditorOptions); window.editor[1] = K.create('#ycontent', defaultEditorOptions); }); </script>
到此,關(guān)于“怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務(wù)器端”的學習就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
本文名稱:怎么在一個頁面上使用多個KindEditor編輯器并將值傳遞到服務(wù)器端
分享URL:http://muchs.cn/article12/jpjsgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機網(wǎng)站建設(shè)、網(wǎng)站排名、ChatGPT、網(wǎng)站策劃、Google、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)