kindeditor富文本框使用方法


這周我一共使用了兩個文本框編輯器!我的上一篇文檔講的是wangeditor這個編輯器,現在就來講講kindeditor這個編輯器!

首先還是去它的官網去下載腳本!

http://kindeditor.net/demo.php

所做的操作和那個wangeditor編輯器差不多都是需要在你的HTML的<body>里面加上下面這段標簽:

1   <textarea style="width: 98%;" rows="15" name="Conten" class="input-block-level" id="Contents"></textarea>

這個就只需要在<body>內加上這個代碼就好!

接下來就是腳本代碼!

 1  (function () {
 2         KindEditor.ready(function (K) {
 3             editor = K.create('textarea[id="Contents"]', {
 4                 resizeType: 0,
 5                 pasteType: 1,
 6                 filterMode: true,
 7                 newlineTag: 'br',
 8                 useContextmenu: false,
 9                 allowPreviewEmoticons: false,
10                 uploadJson: 'js/kindeditor/asp.net/upload_json.ashx',
11                 fileManagerJson: 'js/kindeditor/asp.net/file_manager_json.ashx',
12                 allowFileManager: true
13             });
14         });

這樣它的文本框就被顯示出來了,這段話不止有顯示,同時也還有圖片上傳所需要的配置!

至於獲取文本框內的內容,網上有很多方法我也試了很多個。下面這個才是沒有報錯的!

1 editor.sync();
2     var Contents = $("#Contents").val();

接下來就是圖片上傳的代碼了,這個不需要你改動什么!只需要在你把文本框編輯器顯示出來的那段腳本里。把路徑配置好就沒問題了!

下面這個圖片是我項目里路徑的位置!

接下來你就什么都不需要做了,他會自己把圖片上傳給你做好!

只要你在那里配置好了,一般不會出什么問題!如果你運氣不好,就比如我就出現問題了。困擾了我一天終於給解決了!

這個問題就是,有時候圖片無法上傳,有時候又可以。不可以時報的是路徑不對,或者是405謂詞什么不允許什么的!這個問題經過我的不懈努力終於給解決掉了!

原因是,它的默認配置圖片上傳是以PHP的形式去上傳。而我使用的是ASP.NET,官方文檔只是說你要做圖片上傳只需要在我剛上面寫的顯示出文本框時的腳本里把路徑配置成相應的就行了!

這樣做是可以,可它有時候又識別不了你在腳本里所配置的東西!

這樣的話你就需要去改動這個東東的源碼了!

在下面這個圖片里面找到這個路徑,找到image.js的腳本文件! 在這個里面做一些改動!

這樣這個文本框圖片上傳的問題就解決了,希望能夠幫到你們!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM