對于網頁編輯器對做項目的時候是非常的又用的一個編輯器,大大的減輕了開發人員的負擔,感覺KindSoft是一個不錯的選擇,因此也在不斷的使用。
下面對一些簡單的配置進行歸納一下:
首先是將下載的KindSoft文件導入到項目的目錄下;
復制代碼 代碼如下:
<script src="../Content/kindeditor-4.1.4/kindeditor-all.js" type="text/javascript"></script>
<script src="../Content/kindeditor-4.1.4/lang/zh_CN.js" type="text/javascript"></script>
這兩個引用在xx.aspx文件的Head部分
然后插入下面的一段代碼:
復制代碼 代碼如下:
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#tbContent');
});
</script>
tbContent是要嵌入的Input標簽的id值,呵呵嘿嘿、、驚喜就出現了;如下圖所示:
但是如果要進行圖片、flash或者視頻的上傳的話,你就會很郁悶了,很多時候都會因為上傳路徑不對而出錯,因此你需要設置你的圖片、flash或者視頻文件的路徑;只需將上面一段代碼改為如下部分則可以滿足基本的需求了:
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
KindEditor.ready(function (K) {
K.create('#tbContent', {
uploadJson: '../Content/kindeditor-4.1.4/asp.net/upload_json.ashx',
fileManagerJson: '../Content/kindeditor-4.1.4/asp.net/file_manager_json.ashx',
allowFileManager: true
});
});
上面標記顏色的部分應該根據自己的文件路徑選擇合適的路徑;
最后就是有關編輯器中的控件并不是自己所需要的,所以你需要在如下的路徑進行配置:
展開kindeditor-4.1.4,找到kindeditor.js文件,雙擊就去,然后找到在246頁左右,就有一個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',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
參數的解釋如下:
source | HTML代碼 |
preview | 預覽 |
undo | 后退 |
redo | 前進 |
cut | 剪切 |
copy | 復制 |
paste | 粘貼 |
plainpaste | 粘貼為無格式文本 |
wordpaste | 從Word粘貼 |
selectall | 全選 |
justifyleft | 左對齊 |
justifycenter | 居中 |
justifyright | 右對齊 |
justifyfull | 兩端對齊 |
insertorderedlist | 編號 |
insertunorderedlist | 項目符號 |
indent | 增加縮進 |
outdent | 減少縮進 |
subscript | 下標 |
superscript | 上標 |
formatblock | 段落 |
fontname | 字體 |
fontsize | 文字大小 |
forecolor | 文字顏色 |
hilitecolor | 文字背景 |
bold | 粗體 |
italic | 斜體 |
underline | 下劃線 |
strikethrough | 刪除線 |
removeformat | 刪除格式 |
image | 圖片 |
flash | Flash |
media | 視音頻 |
table | 表格 |
hr | 插入橫線 |
emoticons | 插入表情 |
link | 超級鏈接 |
unlink | 取消超級鏈接 |
fullscreen | 全屏顯示 |
about | 關于 |
print | 打印 |
code | 插入程序代碼 |
map | Google地圖 |
baidumap | 百度地圖 |
lineheight | 行距 |
clearhtml | 清理HTML代碼 |
pagebreak | 插入分頁符 |
quickformat | 一鍵排版 |
insertfile | 插入文件 |
template | 插入模板 |
anchor | 插入錨點 |