KindEditor
官方站点:http://kindeditor.net/down.php 文档说明:http://kindeditor.net/doc.php
引用这个库LitJSON.dll
加入JS
头文件
<link href="../kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<script src="../kindeditor/kindeditor-min.js" type="text/javascript"></script>
<script src="../kindeditor/zh_CN.js" type="text/javascript"></script>
页面初始化 Kindeditor
//后面根据这个操作富文本
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', { //textarea的name值
allowFileManager: true,
resizeType: 1, //允许改变富文本高度
uploadJson: '../kindeditor/net/upload_json.ashx', // 上传配置 一般处理文件
fileManagerJson: '../kindeditor/net/file_manager_json.ashx',
items: ['source', 'wordpaste', '|', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', 'lineheight', 'link', '|', 'emoticons', 'image', 'multiimage', 'insertfile', 'media', '|', 'preview', 'fullscreen'
],
//工具栏目配置
afterCreate: function () {
var self = this;
//点击保存事件
document.getElementById("btnSaveWrite").onclick = function () {
self.sync(); //同步编辑器内容
saveContent(); //保存内容到数据库 我这里是 Ajax提交
}
//Ctrl Enter 快捷保存
K.ctrl(self.edit.doc, 13, function () {
self.sync();
saveContent();
});
}
});
});
富文本标签
<textarea name="content" style="width: 100%; height: 350px; visibility: hidden; line-height: 25px;"></textarea>
<!--保存的按钮 这里只是例子 请自由更改 id-->
<input id="btnSaveWrite" type="button" value="保存" class="btn" />
保存
function saveContent() {
if (editor.isEmpty()) {//判断内容是否为空 (回车 空格视为空)
editor.focus(); //富文本选中
}
//editor.html() 获取富文本的值 包括html标签 是你要存入数据库的值
//editor.html('在这里赋值给富文本,可以 Ajax从数据库查询赋值')
else if (editor.html().length > 23888) {
alert("很抱歉,内容过长。");
}
else {
//这里就写保存到数据库的方法
}
}
editor.readonly(); //只读
editor.readonly(false); //取消只读