文本編輯器應(yīng)用總結(jié)
一． lhgeditor文本編輯器
lhgeditor組件文件結(jié)構(gòu)：
1. lhgeditor.js： 組件的核心JS文件
2. lhgeditor.css：組件的樣式表文件
3. images：組件所需的圖片都在此文件夾中
以上三個(gè)文件為組件所必須的三個(gè)文件，組件包中其它以“_”開(kāi)頭的文件為示例的演示文件，實(shí)際使用中不需要這些文件。當(dāng)然框架核心文件lhgcore.js是每個(gè)組件都必須用到的文件，記得加載組件前先要加載此文件。
lhgeditor組件使用說(shuō)明：
1. 在調(diào)用組件的頁(yè)面加載lhgcore.js和lhgeditor.js兩個(gè)文件。
2. 在window.onload函數(shù)里加入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>
//默認(rèn)模式
//new nicEditor().panelInstance('area1');
<textarea cols="50" id="area1"></textarea>
//All Available Buttons
//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>
//設(shè)置文本編輯器的最大高度
//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) 支持多種語(yǔ)言php、asp
(2) 功能強(qiáng)大
默認(rèn)模式
<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(多語(yǔ)言)
<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">簡(jiǎn)體中文</option>
<option value="zh_TW">繁體中文</option>
<option value="ar">Arabic</option>
</select>
</p>
<textarea name="content" style="width:800px;height:200px;"></textarea>
</form>
粘貼設(shè)置：
<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>測(cè)試內(nèi)容</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>
單獨(dú)調(diào)用組件
上傳圖片彈出框
<script src="../kindeditor.js"></script>
<script src="../lang/zh_CN.js"></script>
<script>
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();
}
});
});
});
});
</script>
<input type="text" id="url" value="" /> <input type="button" id="image" value="選擇圖片" />
取色器
<script src="../kindeditor-min.js"></script>
<script>
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 : '無(wú)顏色',
click : function(color) {
K('#color').val(color);
colorpicker.remove();
colorpicker = null;
}
});
});
});
</script>
<input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打開(kāi)取色器" />
四． jsp基本編輯器
使用步驟：
1.把edit.htm 修改為 edit.jsp
2.把想要使用的地方包含edit.jsp就行了
代碼：
<!--富文本編輯器-->
<%@ include file="edit.jsp"%>
注意事項(xiàng)：
在需要引入編輯器的頁(yè)面中的onload事件，要結(jié)合edit.jsp中的事件
五． Xheditor
(1) 解壓壓縮文件，將其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三個(gè)文件夾上傳到網(wǎng)站相應(yīng)目錄
注：如果您網(wǎng)站中沒(méi)有使用jQuery框架，也請(qǐng)一并上傳jquery文件夾中的jquery-1.4.4.min.js
(2) 在相應(yīng)html文件的</head>之前添加
<script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>
<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
注：如果jQuery之前已經(jīng)在項(xiàng)目頁(yè)面中使用，請(qǐng)勿重復(fù)添加引用代碼
(3).
方法1：在textarea上添加屬性： class="xheditor"
例如：<textarea name="content" class="xheditor">test</textarea>
方法2：在您的頁(yè)面初始JS代碼里加上： $('#elm1').xheditor();
$('#elm1').xheditor()；
例如：
$({
$('#elm1').xheditor()；
});
相應(yīng)的卸載編輯器的代碼為
$('#elm1').xheditor(false)；
例：
自定義按鈕
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script>
<script type="text/javascript">
$(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();}
</script>
1,full(完全):<br />
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
2,mfull(多行完全):<br />
<textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
3,simple(簡(jiǎn)單):<br />
<textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
4,mini(迷你):<br />
<textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
5,custom(自定義):<br />
<textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
6,自定義多行模式:<br />
<textarea id="elm6" name="elm6" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為
</textarea>
皮膚選擇
注：為了保持項(xiàng)目精簡(jiǎn)，同一個(gè)頁(yè)面只能調(diào)用一個(gè)皮膚，當(dāng)同一界面同時(shí)調(diào)用多個(gè)皮膚時(shí)，最后一個(gè)皮膚的按鈕面板樣式會(huì)影響之前的
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script>
<script type="text/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();}
</script>
1,默認(rèn)皮膚:<br/>
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
2,Office 2007 藍(lán)色:<br />
<textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為：
</textarea>
3,Office 2007 銀白色:<br />
<textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為
</textarea>
4,Vista:<br />
<textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為
</textarea>
5,NoStyle:<br />
<textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">
當(dāng)前實(shí)例調(diào)用的Javascript源代碼為
</textarea>
六． Tinymce
使用：
tinyMCE.init({
mode : "textareas",
theme : "simple" //模式
skin : "o2k7",//word
});
默認(rèn)模式
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
This is some example text that you can edit inside the <strong>TinyMCE editor
</textarea>
皮膚設(shè)置
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
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",//工具欄對(duì)齊方式
theme_advanced_statusbar_location : "bottom",//狀態(tài)顯示欄的位置
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"
}
});
</scritp>
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// 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,contextmenu,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"
}
});
</script>
<textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">
This is some example text that you can edit inside the <strong>TinyMCE editor;.
</textarea>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// 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"
}
});
</script>
<textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">
This is some example text that you can edit inside the <strong>TinyMCE
</textarea>
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// 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,|,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"
}
});
</script>
<textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">
This is some example text that you can edit inside the ;
</textarea>
七． ueditor1
1.避免了重復(fù)加載源碼高亮的核心代碼
2.修復(fù)了word粘貼table過(guò)濾出錯(cuò)問(wèn)題
3.修復(fù)插入地圖會(huì)出現(xiàn)style="undefined"的問(wèn)題
4.優(yōu)化了list，多個(gè)相鄰的屬性一直的list會(huì)合并
5.可以在列表中的一行里產(chǎn)生多行的效果（通過(guò)回車再回退操作），類似office的效果
6.添加自定義樣式功能
7.修了在chrome下右鍵刪除td里的圖片會(huì)把整個(gè)td刪除的問(wèn)題
8.改進(jìn)了不同的頁(yè)面調(diào)用一個(gè)editor，URL問(wèn)題
9.增加了顏色選擇器的顏色
10.改進(jìn)了提供的后臺(tái)程序的安全性
11.代碼高亮支持折行
12.改進(jìn)了源碼編輯模式下的性能(ie下),并且支持自動(dòng)換行
13.修改了在destroy之后會(huì)在ie下報(bào)錯(cuò)的問(wèn)題
14.給初始化容器name值，那么在后臺(tái)取值的鍵值就是name給定的值，方便多實(shí)例在一個(gè)form下提交
15.支持插入script/style這樣的標(biāo)簽
16.修復(fù)了列表里插入浮動(dòng)圖片，圖片不占位問(wèn)題
17.源碼模式下,去掉了pre中的
18.完善了_example下的demo例子
19.base64的圖片被過(guò)濾掉了
使用方法：var editorOption = {
//這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個(gè)
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus時(shí)自動(dòng)清空初始化時(shí)的內(nèi)容
autoClearinitialContent:true,
//關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)
wordCount:false,
//關(guān)閉elementPath
elementPathEnabled:false
//更多其他參數(shù)，請(qǐng)參考editor_config.js中的配置項(xiàng)
};
var editor_a = new baidu.editor.ui.Editor(editorOption);
editor_a.render( ' textarea的Id ' );
例：
簡(jiǎn)單應(yīng)用
<script type="text/javascript">
var UEDITOR_HOME_URL = "../"; //指向dialogs，themes等目錄的父目錄，推薦使用/開(kāi)頭的絕對(duì)路徑
</script>
<script type="text/javascript" charset="utf-8" src="../editor_config.js"></script>
<!--使用版-->
<!--<script type="text/javascript" charset="utf-8" src="../editor_all.js"></script>-->
<!--開(kāi)發(fā)版-->
<script type="text/javascript" charset="utf-8" src="editor_api.js">
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', //粘貼時(shí)候的提示依賴了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中，會(huì)覆蓋掉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'
];
</script>
<script type="text/javascript">
// 自定義的編輯器配置項(xiàng),此處定義的配置項(xiàng)將覆蓋editor_config.js中的同名配置
var editorOption = {
//這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個(gè)
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus時(shí)自動(dòng)清空初始化時(shí)的內(nèi)容
autoClearinitialContent:true,
//關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)
wordCount:false,
//關(guān)閉elementPath
elementPathEnabled:false
//更多其他參數(shù)，請(qǐng)參考editor_config.js中的配置項(xiàng)
};
var editor_a = new baidu.editor.ui.Editor(editorOption);
editor_a.render( 'myEditor' );
</script>
<script type="text/plain" id="myEditor" style="width:500px">
<p>這里我可以寫(xiě)一些輸入提示</p>
</script>
