多种 网页文本编辑器 分析
文本编辑器应用总结
一． lhgeditor文本编辑器
lhgeditor组件文件结构：
1. lhgeditor.js： 组件的核心JS文件
2. lhgeditor.css：组件的样式表文件
3. images：组件所需的图片都在此文件夹中
以上三个文件为组件所必须的三个文件，组件包中其它以“_”开头的文件为示例的演示文件，实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件，记得加载组件前先要加载此文件。
lhgeditor组件使用说明：
1. 在调用组件的页面加载lhgcore.js和lhgeditor.js两个文件。
2. 在window.onload函数里加入J.editor.add(编辑器的id).init();
例：
<script type="text/javascript">
window.onload = function()
{
J.editor.add(\'elm1\').init();
}
</script>
<form action="_postdate.asp" method="post" target="_blank">
<div>
<textarea name="elm1" id="elm style="width:600px;height:300px;">
lhgeditor小型在线编辑器</textarea>
</div>
<input type="submit" value="Submit" />
</form>
二． nicEdit文本编辑器
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance(\'area1\');
new nicEditor({fullPanel : true}).panelInstance(\'area2\');
new nicEditor({iconsPath : \'../nicEditorIcons.gif\'}).panelInstance(\'area3\');
new nicEditor({buttonList :[\'fontSize\',\'bold\',\'italic\',\'underline\',\'strikeThrough\',\'subscript\',
\' superscript\',\'html\',\'image\']}).panelInstance(\'area4\');
new nicEditor({maxHeight : 100}).panelInstance(\'area5\');
});
</script>
//默认模式
//new nicEditor().panelInstance(\'area1\');
<textarea cols="50" id="area1"></textarea>
//new nicEditor({fullPanel : true}).panelInstance(\'area2\');
<textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>
//new nicEditor({iconsPath : \'../nicEditorIcons.gif\'}).panelInstance(\'area3\');
<textarea cols="50" id="area3"></textarea>
//自定义按钮
//new nicEditor({buttonList :[\'fontSize\',\'bold\',\'italic\',\'underline\',\'strikeThrough\',\'subscript\',
\'superscript\',\'html\',\'image\']}).panelInstance(\'area4\');
<textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>
//设置文本编辑器的最大高度
//new nicEditor({maxHeight : 100}).panelInstance(\'area5\');
<textarea style="height: 100px;" cols="50" id="area5">
HTML <b>content</b> <i>default</i> in textarea
</textarea>
三． kindeditor文本编辑器
(1) 支持多种语言php、asp
(2) 功能强大
默认模式
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create(\'textarea[name="content"]\', {
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [\'fontname\', \'fontsize\', \'|\', \'forecolor\', \'hilitecolor\', \'bold\', \'italic\',\'underline\',\'removeformat\', \'|\', \'justifyleft\',\'justifycenter\', \'justifyright\', \'insertorderedlist\',\'insertunorderedlist\', \'|\', \'emoticons\', \'image\', \'link\']
});
});
</script>
<textarea name="content" style="width:700px;height:200px;visibility:hidden;">
KindEditor
</textarea>
Multi Language Examples(多语言)
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
K(\'select[name=lang]\').change(function() {
if (editor) {
editor.remove();
editor = null;
}
editor = K.create(\'textarea[name="content"]\', {
langType : this.value
});
});
K(\'select[name=lang]\').change();
});
</script>
<form>
<p>
<select name="lang">
<option value="en">English</option>
<option value="zh_CN">简体中文</option>
<option value="zh_TW">繁體中文</option>
<option value="ar">Arabic</option>
</select>
</p>
<textarea name="content" style="width:800px;height:200px;"></textarea>
</form>
粘贴设置：
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
KindEditor.ready(function(K) {
K.create(\'#content1\', {
pasteType : 0
});
K.create(\'#content2\', {
pasteType : 1
});
K.create(\'#content3\', {
pasteType : 2
});
});
</script>
禁止粘贴
<textarea id="content1" name="content" style="width:700px;height:200px;
visibility:hidden;">
</textarea>
纯文本粘贴
<textarea id="content2" name="content" style="width:700px;height:200px;
visibility:hidden;">
</textarea>
HTML粘贴
<textarea id="content3" name="content" style="width:700px;height:200px;
visibility:hidden;"></textarea>
自定义插件
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script>
// 自定义插件 #1
KindEditor.lang({
example1 : \'插入HTML\'
});
KindEditor.plugin(\'example1\', function(K) {
var self = this, name = \'example1\';
self.clickToolbar(name, function() {
self.insertHtml(\'<strong>测试内容</strong>\');
});
});
// 自定义插件 #2
KindEditor.lang({
example2 : \'CLASS样式\'
});
KindEditor.plugin(\'example2\', function(K) {
var self = this, name = \'example2\';
function click(value) {
var cmd = self.cmd;
if (value === \'adv_strikethrough\') {
cmd.wrap(\'<span style="background-color:#e53333;
text-decoration:line-through;"></span>\');
} else {
cmd.wrap(\'<span class="\' + value + \'"></span>\');
}
cmd.select();
self.hideMenu();
}
self.clickToolbar(name, function() {
var menu = self.createMenu({
name : name,
width : 150
});
menu.addItem({
title : \'红底白字\',
click : function() {
click(\'red\');
}
});
menu.addItem({
title : \'绿底白字\',
click : function() {
click(\'green\');
}
});
menu.addItem({
title : \'黄底白字\',
click : function() {
click(\'yellow\');
}
});
menu.addItem({
title : \'自定义删除线\',
click : function() {
click(\'adv_strikethrough\');
}
});
});
});
KindEditor.ready(function(K) {
K.create(\'#content1\', {
cssPath : [\'../plugins/code/prettify.css\', \'index.css\'],
items : [\'source\', \'removeformat\', \'example1\', \'example2\', \'code\']
});
});
</script>
<textarea id="content1" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>