javascript网页富文本编辑器:kindedit富文本编辑器插件的使用
2015-01-16 23:17
399 查看
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" />
<link rel="stylesheet" href="~/resources/kindeditor/plugins/code/prettify.css" />
<!--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.完成
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" />
<link rel="stylesheet" href="~/resources/kindeditor/plugins/code/prettify.css" />
<!--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打开没有最大化、最小化和关闭按钮的窗口
- 使用JavaScript定时取得脚本(不刷新网页,可更新内容)
- 使用firefox的firebug插件进行网页js调试----firebug使用
- 使用JavaScript控制圆弧背景的导航菜单_网页代码站(www.webdm.cn)
- Web网页中使用Media Player播放MPG视频的代码,并且支持JavaScript控制播放,暂停等功能
- 在网页中使用javascript打开没有最大化、最小化和关闭按钮的窗口
- 网页使用JavaScript与Active空间进行交互
- 使用firefox的firebug插件进行网页js调试----firebug使用
- 在使用FreeTextBox.dll等这些插件时,遇见request响应出现JavaScript与html字符串发生危险性
- 使用JavaScript让网页的title动起来
- embed标签的使用(在网页中播放各种音频视频的插件的使用)
- 使用Javascript直接将网页进行简繁转换[转]
- 使用javascript网页之间的表单对象action的调用
- html网页中使用javascript脚本调用xml文档实例
- 使用javascript创建网页快捷方式
- 在网页中使用javascript打开没有最大化、最小化和关闭按钮的窗口
- 在网页里让文本框只能输入数字的一种方法。外加回车换Tab (javascript key键的使用)+禁止切换输入法---转
- 使用Javascript制作IE插件
- 使用页面插件实现网页及时通信Demo
- 使用 JavaScript 将 Silverlight 添加到网页