天天看点

javascript网页富文本编辑器:kindedit富文本编辑器插件的使用

kindedit是一个轻量级的国内富文本插件,其嵌入在网页中的方式很简单,API也很完善,主要的一点是功能齐全,完全免费。 1.kindedit依赖文件: <!--jquery-lib-->

<script src="~/resources/Scripts/jquery-1.10.2.min.js"></script>

<!--kindeidtor-plugin-->

<!--kindeidtor-css-->

<link rel="stylesheet" href="~/resources/kindeditor/themes/default/default.css" target="_blank" rel="external nofollow" />

<link rel="stylesheet" href="~/resources/kindeditor/plugins/code/prettify.css" target="_blank" rel="external nofollow" />

<!--kindeidtor-core&language.js-->

<script charset="utf-8" src="~/resources/kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="~/resources/kindeditor/lang/zh_CN.js"></script>

<!--kindeidtor-eidtor-plugin-->

<script charset="utf-8" src="~/resources/kindeditor/plugins/code/prettify.js"></script>

<!--kindeidtor-call-js--> 2.插入kindedit的输入文本到html的body中 <textarea id="input" name="article.content1" cols="92" rows="10"></textarea>

<div class="word_count">当前已输入<span class="word_input">0</span>你还可以输入<span class="word_remain">1000</span>字符</div> 3.插入kindedit的运行脚本到head中 <script type="text/javascript">

KindEditor.ready(function (K) {

var editor1 = K.create('textarea[name="article.content1"]', {

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> 4.完成

javascript网页富文本编辑器:kindedit富文本编辑器插件的使用

继续阅读