kindeditor是一个比较轻量的编辑器,下载地址 http://kindeditor.net/down.php
需要引入的几个文件
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>
js
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
var options = {
cssPath : '/css/index.css',
filterMode : true
};
var editor = K.create('textarea[name="content"]', options);
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery
// 设置HTML内容
</script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor1 = K.create('textarea[name="article.content"]', {
cssPath: 'Resources/kindeditor/plugins/code/prettify.css',
resizeType: 1,
allowPreviewEmoticons:false,
allowImageUpload: true,
allowFileManager: false,
items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterChange:function() {
K('.word_input').html(this.count('text'));
var input = this.count('text');
var remain = 1500 - input;
K('.word_remain').html(remain);
}
});
prettyPrint();
});
</script>
HTML部分
<textarea id="editor_id" name="content" style="width:1200px;height:300px;"></textarea>
id名称必须是editor_id,而且是唯一的id名