1. 程式人生 > >KindEditor富文字編輯器

KindEditor富文字編輯器

KindEditor簡單使用

KindEditor

KindEditor是一套開源的HTML視覺化編輯器,主要用於讓使用者在網站上獲得所見即所得編輯效果,與此類似技術如:UEditor、CKEditor等
http://kindeditor.net/demo.php

引入相關JS

<link href="../js/kindeditor-4.1.11/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../js/kindeditor-4.1.11/kindeditor-all-min.js"></script>
<script type="text/javascript" src="../js/kindeditor-4.1.11/lang/zh_CN.js"></script>

JS收集下載地址:https://pan.baidu.com/s/17H7eP9SUd7QT0omCyvu0cA 提取碼:7yac

簡單使用

(1)html

<textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>

(2)JavaScript

var PR = {
	// 編輯器引數
	kingEditorParams : {
		//指定上傳檔案引數名稱
		filePostName  : "uploadFile",
		//指定上傳檔案請求的url。
		uploadJson : '/pic/upload',
		//上傳型別,分別為image、flash、media、file
		dir : "image"
	}
}
var itemAddEditor = KindEditor.create("#itemAddForm [name=desc]", PR.kingEditorParams);

itemAddEditor.sync();  //同步文字框中的商品描述
itemAddEditor.html('');  //清空富文字編輯器