文本编辑器应用总结
一.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']
});
});
visibility:hidden;">
单独调用组件
上传图片弹出框
KindEditor.ready(function(K) {
var editor = K.editor({
allowFileManager : true
});
K('#image').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
imageUrl : K('#url').val(),
clickFn : function(url, title, width, height, border, align) {
K('#url').val(url);
editor.hideDialog();
}
});
});
});
});
图片" />
取色器
KindEditor.ready(function(K) {
var colorpicker;
K('#colorpicker').bind('click', function(e) {
if (colorpicker) {
colorpicker.remove();
colorpicker = null;
}
var colorpickerPos = K('#colorpicker').pos();
colorpicker = K.colorpicker({
x : colorpickerPos.x,
y : colorpickerPos.y + K('#colorpicker').height(),
z : 19811214,
selectedColor : 'default',
noColor : '无颜色',
click : function(color) {
K('#color').val(color);
colorpicker.remove();
colorpicker = null;
}
});
});
});
value="打开取色器" />
四.jsp基本编辑器
使用步骤:
1.把edit.htm修改为edit.jsp
2.把想要使用的地方包含edit.jsp就行了
代码:
注意事项:
在需要引入编辑器的页面中的onload事件,要结合edit.jsp中的事件
五.Xheditor
(1) 解压压缩文件,将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录
注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js
(2) 在相应html文件的之前添加
注:如果jQuery之前已经在项目页面中使用,请勿重复添加引用代码
(3).
方法1:在textarea上添加属性:class="xheditor"
例如:test
方法2:在您的页面初始JS代码里加上:$('#elm1').xheditor();
$('#elm1').xheditor();
例如:
$({
$('#elm1').xheditor();
});
相应的卸载编辑器的代码为
$('#elm1').xheditor(false);
例:
自定义按钮
$(pageInit);
function pageInit()
{
$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});
$('#elm1').xheditor({tools:'full'});
$('#elm2').xheditor({tools:'mfull'});
$('#elm3').xheditor({tools:'simple'});
$('#elm4').xheditor({tools:'mini'});
$('#elm5').xheditor({tools:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'});
$('#elm6').xheditor({tools:'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About'});
}
function submitForm(){$('#frmDemo').submit();}
1,full(完全):
当前实例调用的Javascript源代码为:
2,mfull(多行完全):
当前实例调用的Javascript源代码为:
3,simple(简单):
当前实例调用的Javascript源代码为:
4,mini(迷你):
当前实例调用的Javascript源代码为:
5,custom(自定义):
当前实例调用的Javascript源代码为:
6,自定义多行模式:
当前实例调用的Javascript源代码为
皮肤选择
注:为了保持项目精简,同一个页面只能调用一个皮肤,当同一界面同时调用多个
皮肤时,最后一个皮肤的按钮面板样式会影响之前的
$(pageInit);
function pageInit()
{
$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});
$('#elm1').xheditor({skin:'default'});
$('#elm2').xheditor({skin:'o2007blue'});
$('#elm3').xheditor({skin:'o2007silver'});
$('#elm4').xheditor({skin:'vista'});
$('#elm5').xheditor({skin:'nostyle'});
}
function submitForm(){$('#frmDemo').submit();}
1,默认皮肤:
当前实例调用的Javascript源代码为:
2,Office 2007 蓝色:
当前实例调用的Javascript源代码为:
3,Office 2007 银白色:
当前实例调用的Javascript源代码为
4,Vista:
当前实例调用的Javascript源代码为
5,NoStyle:
当前实例调用的Javascript源代码为
六.Tinymce
使用:
tinyMCE.init({
mode : "textareas",
theme : "simple"//模式
skin : "o2k7",//word
});
默认模式
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
This is some example text that you can edit inside the TinyMCE
editor
皮肤设置
tinyMCE.init({
// General options
mode : "exact",
elements : "elm1",
theme : "advanced",
plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,
advlink,emotions,iespell,insertdatetime,preview,media,searchreple,
print,contextmenu,paste,directionality,fullscreen,noneditable,
visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,
justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,
fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,
numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,
anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw,
|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,
charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,
template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",//工具栏位置
theme_advanced_toolbar_align : "left",//工具栏对齐方式
theme_advanced_statusbar_location : "bottom",//状态显示栏的位置
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
// O2k7 skin
tinyMCE.init({
// General options
mode : "exact",
elements : "elm2",
theme : "advanced",
skin : "o2k7",
plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,
emotions,iespell,insertdatetime,preview,media,searchreplace,print,cont
extmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg,
xhtmlxtras,template,inlinepopups,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,
justifyleft,justifycenter,justifyright,justifyfull,styleselect,
formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,
bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,
unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,
preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,
charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,
nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
This is some example text that you can edit inside the TinyMCE
editor;.
// O2k7 skin (silver)
tinyMCE.init({
// General options
mode : "exact",
elements : "elm3",
theme : "advanced",
skin : "o2k7",
skin_variant : "silver",
plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,
iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,
paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
xhtmlxtras,template,inlinepopups,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough
,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,
formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,
bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,
link,unlink,anchor,image,cleanup,help,code,|,insertdate,
inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,
sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,
ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,
styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas,
nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
This is some example text that you can edit inside the TinyMCE
// O2k7 skin (silver)
tinyMCE.init({
// General options
mode : "exact",
elements : "elm4",
theme : "advanced",
skin : "o2k7",
skin_variant : "black",
plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,
iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,
paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
xhtmlxtras,template,inlinepopups,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough
,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,
formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace
,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,
redo,|,link,unlink,anchor,image,cleanup,help,code,|,
insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,
sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,
ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute
,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualch
ars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
This is some example text that you can edit inside the ;
七.ueditor1
1.避免了重复加载源码高亮的核心代码
2.修复了word粘贴table过滤出错问题
3.修复插入地图会出现style="undefined"的问题
4.优化了list,多个相邻的属性一直的list会合并
5.可以在列表中的一行里产生多行的效果(通过回车再回退操作),类似office的效果
6.添加自定义样式功能
7.修了在chrome下右键删除td里的图片会把整个td删除的问题
8.改进了不同的页面调用一个editor,URL问题
9.增加了颜色选择器的颜色
10.改进了提供的后台程序的安全性
11.代码高亮支持折行
12.改进了源码编辑模式下的性能(ie下),并且支持自动换行
13.修改了在destroy之后会在ie下报错的问题
14.给初始化容器name值,那么在后台取值的键值就是name给定的值,方便多实例在一个form下提交
15.支持插入script/style这样的标签
16.修复了列表里插入浮动图片,图片不占位问题
17.源码模式下,去掉了pre中的
18.完善了_example下的demo例子
19.base64的图片被过滤掉了
使用方法:var editorOption = {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false
//更多其他参数,请参考editor_config.js中的配置项
};
var editor_a = new baidu.editor.ui.Editor(editorOption);
editor_a.render( ' textarea的Id' );
例:
简单应用
var UEDITOR_HOME_URL = "../"; //指向dialogs,themes等目录的父目
录,推荐使用/开头的绝对路径
paths = [
'editor.js',
'core/browser.js',
'core/utils.js',
'core/EventBase.js',
'core/dom/dom.js',
'core/dom/dtd.js',
'core/dom/domUtils.js',
'core/dom/Range.js',
'core/dom/Selection.js',
'core/Editor.js',
'commands/inserthtml.js',
'commands/image.js',
'commands/justify.js',
'commands/font.js',
'commands/link.js',
'commands/map.js',
'commands/iframe.js',
'commands/removeformat.js',
'commands/blockquote.js',
'commands/indent.js',
'commands/print.js',
'commands/preview.js',
'commands/spechars.js',
'commands/emotion.js',
'commands/selectall.js',
'commands/paragraph.js',
'commands/directionality.js',
'commands/horizontal.js',
'commands/time.js',
'commands/rowspacing.js',
'commands/lineheight.js',
'commands/cleardoc.js',
'commands/anchor.js',
'commands/delete.js',
'commands/wordcount.js',
'plugins/pagebreak/pagebreak.js',
'plugins/checkimage/checkimage.js',
'plugins/undo/undo.js',
'plugins/paste/paste.js', //粘贴时候的提示依赖了UI
'plugins/list/list.js',
'plugins/source/source.js',
'plugins/shortcutkeys/shortcutkeys.js',
'plugins/enterkey/enterkey.js',
'plugins/keystrokes/keystrokes.js',
'plugins/fiximgclick/fiximgclick.js',
'plugins/autolink/autolink.js',
'plugins/autoheight/autoheight.js',
'plugins/autofloat/autofloat.js', //依赖UEditor UI,在IE6中,会覆盖掉body的背景图属性
'plugins/highlight/highlight.js',
'plugins/serialize/serialize.js',
'plugins/video/video.js',
'plugins/table/table.js',
'plugins/contextmenu/contextmenu.js',
'plugins/pagebreak/pagebreak.js',
'plugins/basestyle/basestyle.js',
'plugins/elementpath/elementpath.js',
'plugins/formatmatch/formatmatch.js',
'plugins/searchreplace/searchreplace.js',
'plugins/customstyle/customstyle.js',
'ui/ui.js',
'ui/uiutils.js',
'ui/uibase.js',
'ui/separator.js',
'ui/mask.js',
'ui/popup.js',
'ui/colorpicker.js',
'ui/tablepicker.js',
'ui/stateful.js',
'ui/button.js',
'ui/splitbutton.js',
'ui/colorbutton.js',
'ui/tablebutton.js',
'ui/toolbar.js',
'ui/menu.js',
'ui/combox.js',
'ui/dialog.js',
'ui/menubutton.js',
'ui/datebutton.js',
'ui/editorui.js',
'ui/editor.js',
'ui/multiMenu.js'
];
// 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置
var editorOption = {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false
//更多其他参数,请参考editor_config.js中的配置项
};
var editor_a = new baidu.editor.ui.Editor(editorOption);
editor_a.render( 'myEditor' );
这里我可以写一些输入提示