java多页面文本编辑器_[原]多种 网页文本编辑器 分析

文本编辑器应用总结

一．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();

例：

window.onload = function()

{

J.editor.add('elm1').init();

}

lhgeditor小型在线编辑器

二．nicEdit文本编辑器

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');

});

//默认模式

//new nicEditor().panelInstance('area1');

//All Available Buttons

//new nicEditor({fullPanel: true}).panelInstance('area2');

Some Initial Content was in this textarea

//new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance('area3');

//自定义按钮

//newnicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',

'superscript','html','image']}).panelInstance('area4');

HTML content default in textarea

//设置文本编辑器的最大高度

//new nicEditor({maxHeight : 100}).panelInstance('area5');

HTML content default in textarea

三．kindeditor文本编辑器

(1)支持多种语言php、asp

(2)功能强大

默认模式

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']

});

});

KindEditor

Multi Language Examples(多语言)

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();

});

English

简体中文

繁體中文

Arabic

粘贴设置：

KindEditor.ready(function(K) {

K.create('#content1', {

pasteType : 0

});

K.create('#content2', {

pasteType : 1

});

K.create('#content3', {

pasteType : 2

});

});

禁止粘贴

visibility:hidden;">

纯文本粘贴

visibility:hidden;">

HTML粘贴

visibility:hidden;">

自定义插件

//自定义插件#1

KindEditor.lang({

example1 : '插入HTML'

});

KindEditor.plugin('example1', function(K) {

var self = this, name = 'example1';

self.clickToolbar(name, function() {

self.insertHtml('测试内容');

});

});

//自定义插件#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('

text-decoration:line-through;">

');

} else {

cmd.wrap('');

}

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']

});

});