KindEditor 開源得富文本編輯器
阿新 • • 發佈：2019-04-03
ati 文件 ron 類庫 速度 elements initial width rip
正常HTML情況寫輸入長文本需要textarea 標簽 。但textarea 標簽局限性很大，切只能輸入單一的文本，我們大多情況下看到的新聞類文本信息大多是圖文混排得，且有的配有視頻和音樂。
我們可以通過KindEditor 來實現前臺代碼得改善。
簡單介紹一下：
KindEditor 是一套開源的在線HTML編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在
主要特點：
- 快速：體積小，加載速度快
- 開源：開放源代碼，高水平，高品質
- 底層：內置自定義 DOM 類庫，精確操作 DOM
- 擴展：基於插件的設計，所有功能都是插件，可根據需求增減功能
- 風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
- 兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
官方文檔：http://kindeditor.net/doc.php
在使用KindEditor時需要導入一個KindEditor JS庫
如圖：
註：KindEditor-all-min.js是基於jquery-1.12.1.js存在 所以放在jquery-1.12.1.js下 。 KindEditor-all-min.js可以在官方下載
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../static/js/jquery-1.12.1.min.js"></script>
<script src="../../static/js/kindeditor/kindeditor-all-min.js"></script>
<title>Document</title>
</head>
<body>
<textarea id="content">富文本</textarea>
<button onclick="checkit()">查看</button>
<script>
initKindEditor();
function initKindEditor() {
var kind = KindEditor.create(‘#content‘, {
width: ‘100%‘, // 文本框寬度(可以百分比或像素)
height: ‘300px‘, // 文本框高度(只能像素)
minWidth: 200, // 最小寬度（數字）
minHeight: 400 // 最小高度（數字）
});
}
function checkit(){
//聲明變量 用來獲取文本內信息
var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
alert(content);
}
</script>
</body>
</html>
本文有所借鑒，忘指正
KindEditor 開源得富文本編輯器