xhEditor开源富文本编辑器中文文档

xhEditor开源富文本编辑器中文文档
xhEditor开源富文本编辑器中文文档

1.1.在线可视化HTML编辑器概述

在Web程序应用中,最常见的一种行为是信息和言论的发布和交流。而在信息发布的同时,往往会有对信息发布的格式、类型和功能上的需求,比如:加粗、下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率。在这个需求的背景下,HTML在线编辑器就应运而生了。

顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一。在线HTML编辑器可以实现对编辑内容添加各种丰富多彩的文字效果,以及提供各种方便快捷的操作功能,最大的提高编辑工作效率。在线HTML编辑器是任何网站不可或缺的重要功能组件,是互联网用户得心应手的驰骋网络的有力工具。

1.2.获取xhEditor

1.3.xhEditor运行环境

xhEditor是基于浏览器的HTML、CSS和Javascript环境开发的,因此原则上市场上绝大部分浏览器我们都能完美的运行,目前已测试的浏览器兼容列表如下:IE6.0+,Firefox

3.0+,Opera9.6+,Chrome1.0+,Safari3.22+(+号代表往后所有新版本)。xhEditor是完全基于浏览器环境的,因此不存在操作系统选择性,是完全跨平台的。xhEditor同时也可以应用在任何的服务端语言环境下,例如:PHP、ASP、https://www.360docs.net/doc/cd4259856.html,、JAVA等,可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

1.4.xhEditor基本使用指南

您只需按照以下简单步骤即可学会使用xhEditor:

注:jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改

4.在需要实现可视化的文本框textarea属性中添加:

class="xheditor"

例如:

2.1.进阶使用指导

xhEditor提供两种方式初始化编辑器:

?方法1:利用class属性来初始化和传递各种初始化参数,例:

class="xheditor{skin:'default'}"

?方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例:

$('#elm1').xheditor();

或者

$('#elm1').xheditor({tools:'mini'});

特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。

我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数设置即可定制各种效果的编辑器界面,简单易用且功能强大。

如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。

xhEditor也提供了即时的卸载编辑器方法:

$('#elm1').xheditor(false);

2.2.初始化参数列表

初始化参数示例代码:

$('#elm1').xheditor({tools:'full',skin:'default',showBlocktag:true,interna lScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://xhe https://www.360docs.net/doc/cd4259856.html,/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUr l:"upload.php",upImgExt:"jpg,jpeg,gif,png"});

初始化参数列表:

1.tools:自定义工具按钮

参数值:full(完全),mfull(多行完全),simple(简单),mini(迷你)

或者自定义字符串,例如:

'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'

完整按钮表:

|:分隔符

/:强制换行

Cut:剪切

Copy:复制

Paste:粘贴

Pastetext:文本粘贴

Blocktag:段落标签

Fontface:字体

FontSize:字体大小

Bold:粗体

Italic:斜体

Underline:下划线

Strikethrough:中划线

FontColor:字体颜色

BackColor:字体背景色

SelectAll:全选

Removeformat:删除文字格式

Align:对齐

List:列表

Outdent:减少缩进

Indent:增加缩进

Link:超链接

Unlink:删除链接

Anchor:锚点

Img:图片

Flash:Flash动画

Media:Windows media player视频

Hr:插入水平线

Emot:表情

Table:表格

Source:切换源代码模式

Preview:预览当前代码

Print:打印

Fullscreen:切换全屏模式

About:关于xhEditor

2.skin:皮肤风格选择

参数值:default(默认风格),o2007blue(Office2007蓝

色),o2007silver(Office2007银

色),vista(Vista),nostyle(NoStyle)

https://www.360docs.net/doc/cd4259856.html,yerShadow:阴影的深度(按钮面板和模式窗口的背景阴影)

参数值:0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度) 4.clickCancelDialog:点击任意位置取消按钮面板功能

参数值:默认true(开启点击取消功能),false(关闭点击取消功能,

必需要点击“取消”按钮才能关闭按钮面板)

5.showBlocktag:显示段落标签

参数值:true(显示段落标签),false(不显示)

6.linkTag:样式链接link标签保留状态

参数值:true(保留样式链接link标签),false(清理样式链接link

标签)

7.internalScript:内部JS代码保留状态

参数值:true(保留内部JS代码),false(清理内部JS代码)

8.inlineScript:内联JS代码保留状态

参数值:true(保留内联JS代码),false(清理内联JS代码)

9.internalStyle:内部样式保留状态

参数值:true(保留内部样式),false(清理内部样式)

10.inlineStyle:内联样式保留状态

参数值:true(保留内联样式),false(清理内联样式)

11.width:编辑器宽度

参数值:不带单位的数字,例:300

12.height:编辑器高度

参数值:不带单位的数字,例:100

13.background:编辑器背景

参数值:字符串,例:url(test.gif)no-repeat,设置编辑器背景,

格式同CSS同名参数一致。建议直接设置textarea的css背景

备注:v1.1.1新添加

14.loadCSS:加载样式

参数值:URL地址、URL数组以及直接内部样式,例如:'1.css'、

['1.css','2.css']、''

/>备注:1.0.0RC3新添加加载内部样式功能

15.fullscreen:默认全屏显示

参数值:true(全屏大小),false(标准大小)

16.sourceMode:默认源代码模式

参数值:true(源代码模式),false(编辑模式)

17.forcePtag:强制P标签

参数值:true(强制使用P标签),false(不强制),默认true

18.cleanPaste:是否清理粘贴的HTML代码

参数:0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强

制转文本),默认为1简单清理Word

说明:若网站应用需要保留更多的Word样式效果,请设置此值为1,

不过产生的HTML代码体积会大大增大

备注:1.1.4版本中新变更,原为wordDeepClean和forcePasteText

两个参数

19.disableContextmenu:禁用编辑区的右键菜单

参数值:true(禁用右键菜单),false(不禁用),默认false

备注:v1.1.0新添加

20.editorRoot:编辑器JS文件所在的根路径

参数值:编辑器所在的根路径,用在某些特殊情况下定位编辑器的根

路径,默认为空,读取默认的编辑器根路径

备注:v1.1.0新添加

21.shortcuts:自定义键盘快捷方式

参数:快捷键对应事件代码的对象数组

示例:{'ctrl+enter':function(){$('#frmTest').submit();}}

备注:1.0.0beta2新添加

22.urlBase:相对URL地址的基地址

参数:字符串的URL地址,用以解决前后台不在同一路径的资源定位

问题

备注:1.1.0新添加

23.urlType:本地URL地址强制转换方式选择

参数:abs(绝对路径),root(根路径),rel(相对路径)

备注:1.0.0beta2新添加,v1.1.0版中名字由localUrl变更为

urlType

24.emotPath:修改表情图片的URL根路径

参数:字符串的URL地址,默认为空,指向编辑器路径下的默认表情

备注:1.1.0新添加

25.emotMark:是否在表情img标签上标注emot属性

参数:true(标注),false(不标注),默认为false

说明:若使用了ubb插件,请设置此属性为true

备注:1.0.0beta2新添加

26.emots:添加自定义表情

参数:可定义多个JSON对象数组,示例如下:

{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{na

me:'MSN',count:40,width:22,height:22,line:8}}

name:表情分组名

count:表情数量

list:表情列表,例:{test1:'表情1',test2:'表情2'},键名代表文件名,扩展名必需为gif,键值代表alt信息

width:单个表情区域宽度,必需大于或等于表情最大宽度

height:单表情区域高度,必需大于或等于表情最大高度

line:单行显示表情数量

说明:count和list必需选其中一个值,注意count 模式插入表情img的alt为空

备注:1.0.0beta2新添加

27.hoverExecDelay:悬停自动执行延迟的时间

参数:数值(单位毫秒),默认为100,设置为-1关闭此功能

备注:1.0.0rc2新添加

28.defLinkText:超链接的默认文字

参数值:字符串(默认值:“点击打开链接”)

说明:只在不选择任何内容的情况下才会用到这个参数值

29.modalWidth:showModal弹出窗口的默认宽度

参数值:数值,默认为350

说明:弹出窗口的默认宽度

30.modalHeight:showModal弹出窗口的默认高度

参数值:数值,默认为220

说明:弹出窗口的默认高度

31.modalTitle:showModal弹出窗口是否显示上方的标题栏

参数值:true(显示),false(不显示)

说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显

示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题

32.upBtnText:上传按钮的文字

参数值:任意字符串,默认值:“上传”

备注:1.0.0beta2新添加

33.html5Upload:是否开启HTML5上传支持

参数值:true(允许),false(不允许),默认为true允许

说明:本功能需要浏览器支持HTML5上传

备注:1.0.0Final新添加

34.upMultiple:允许一次上传多少个文件

参数值:大于0的数值,默认:99,设置为1关闭多文件上传

说明:本功能需要浏览器支持HTML5上传

备注:1.0.0RC3新添加

35.upLinkUrl:超链接文件上传接收URL

参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接

上传功能,具体使用方法请参考demo8演示文件

注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:

{editorRoot}upload.php

36.upLinkExt:超链接上传前限制本地文件扩展名

参数值:超链接上传前限制的文件扩展名列表,默认为:zip,rar,txt,

建议与服务端扩展名检查列表一致

37.upImgUrl:图片文件上传接收URL

参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功

能,具体使用方法请参考demo8演示文件

注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:

{editorRoot}upload.php

38.upImgExt:图片上传前限制本地文件扩展名

参数值:图片上传前限制的文件扩展名列表,默认为:

jpg,jpeg,gif,png,建议与服务端扩展名检查列表一致

39.upFlashUrl:动画文件上传接收URL

参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功

能,具体使用方法请参考demo8演示文件

注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:

{editorRoot}upload.php

40.upFlashExt:动画上传前限制本地文件扩展名

参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与

服务端扩展名检查列表一致

41.upMediaUrl:视频文件上传接收URL

参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功

能,具体使用方法请参考demo8演示文件

注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:

{editorRoot}upload.php

42.upMediaExt:视频上传前限制本地文件扩展名

参数值:视频上传前限制的文件扩展名列表,默认为:avi,建议与

服务端扩展名检查列表一致

43.onUpload:文件上传成功回调函数

参数值:成功后需要执行的函数

说明:这个函数执行时返回的值为上传程序返回的msg变量,可能为

字符串或者数组,若为字符串则直接代表url,若是数组,则必需包

含一个url的变量,其它可由可开发者自定义

备注:1.0.0beta2新添加

44.plugins:自定义按钮之插件扩展

插件对象的属性解释:

c:样式表名称

t:插件名字(鼠标在按钮上方时显示)

s:快捷方式,例:"ctrl+enter"

h:是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行)

e:按钮点击后需要执行的代码(省略执行代码,则把当前的插件名作

为参数,调用浏览器的execCommand函数)

特别说明:

如果您希望样式表存储在系统自带的模板目录ui.css中,请将插件

对象的样式名留空,则会自动按照插件名来调用相应的样式,例如:

xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是插件名

具体调用方法请参考演示文件夹中的demo9

45.submit ID:触发表单提交的按钮ID值

参数值:表单提交按钮的ID值,默认在form表单上绑定submit以

同步结果

说明:通过本参数,在非标准submit提交环境下,比如AJAX提交,

可以由用户点击提交按钮以触发编辑器最新值的同步

备注:v1.1.7新添加

46.onPaste:剪切板粘贴回调函数

参数值:用户粘贴后需要执行的函数

说明:此函数用来过滤用户粘贴的代码,若返回false禁用粘贴

备注:v1.1.8新添加

47.localUrlTest:非本站域名测试正则表达式

参数值:正则表达式

说明:本参数用来测试某些组件中测试URL是否属于本站域名

备注:v1.1.8新添加

48.remoteImgSaveUrl:远程图片抓取接收程序URL

参数值:字符串(若不设置不开启此功能)

说明:当localUrlTest测试为false时,会将图片URL发往当前参

数指定的服务器端上传接收程序,抓取成功后将本地URL返回并替换

备注:v1.1.8新添加

49.readTip:无障碍读屏提示

参数值:字符串(默认为空)

说明:无障碍读屏软件提示文字,可用来为残疾人士提示快捷键等信

备注:v1.1.9新添加

2.3.API函数接口列表

API接口示例代码:

var editor=$('#elm1').xheditor({tools:'full',skin:'default'});

editor.focus();

editor.setSource('str')

sHtml=editor.getSource()

editor.appendHTML('

aaa

')

editor.pasteHTML('

aaa

')

editor.pasteText('str')

sHtml=editor.formatXHTML('aaa')

editor.toggleSource()

editor.toggleFullscreen()

alert(editor.settings.upImgExt);

editor.settings.upImgExt='txt,doc';

API接口列表:

1.focus:使编辑器获得焦点

无参数

2.setSource:设置编辑器源代码

参数1:要设置的源代码内容,例:'

aaa

'

3.getSource:返回编辑器格式后的源代码

无参数

4.appendHTML:粘贴HTML内容到编辑器结尾处

参数1:要粘贴的HTML代码,例:'

uuu

'

注:0.9.5版添加

5.getSelect:返回当前选中的内容

参数1:返回格式,可选'text'返回文本格式,其它所有值都返回HTML

格式

6.pasteHTML:粘贴HTML内容到编辑器当前光标处

参数1:要粘贴的HTML代码,例:'

uuu

'

参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区

域之前)、false(粘贴在光标选择区域之后)

7.pasteText:粘贴文本到编辑器当前光标处

参数1:要粘贴的文本,例:'这里的内容完全原样显示

aaa'

参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区

域之前)、false(粘贴在光标选择区域之后)

8.formatXHTML:格式化XHTML代码

参数1:需要格式化的HTML代码,例:'aaa',返回

'aaa'

参数2:是否代码缩进换行,true(执行缩进格式化),false(不执行缩

进格式化),默认为false

9.toggleSource:在源代码模式和编辑模式之间切换

参数1:空(切换),true(显示源代码模式),false(显示编辑模式) 10.toggleFullscreen:在全屏模式和标准大小之间切换

参数1:空(切换),true(显示全屏模式),false(显示标准模式)

11.toggleShowBlocktag:切换块标签显示状态

参数1:空(切换),true(切换为显示块标签),false(切换为不显示块

标签)

12.addShortcuts:添加快捷键

参数1:快捷键值,例:'ctrl+enter'

参数2:用户按下快捷键后需要响应的程序代码,例:

function(){$('#frmTest').submit();}

说明:允许为某个相同快捷键值重复添加多个响应代码

备注:1.0.0beta2新添加

13.delShortcuts:删除快捷键

参数1:快捷键值,例:'ctrl+enter'

备注:1.0.0Final新添加

14.exec:立即执行按钮及插件

参数1:工具按钮名称(不区分大小写),例:Link、img

说明:此函数可以在插件内部或者外部Javascript代码中进行调用15.showModal:显示模式窗口

参数1:模式窗口的标题title

参数2:模式窗口的内容content

参数3:模式窗口的宽度w

参数4:模式窗口的高度h

参数5:模式窗口关闭时的回调函数onRemove

16.showIframeModal:显示iframe式的模式窗口

参数1:模式窗口的标题

参数2:iframe的地址ifmurl,可使用内置变量:{editorRoot},

代表当前编辑器的根路径,例:

{editorRoot}xheditor_plugins/test.html

参数3:提供给目标iframe页面回调用的回调函数,可以在iframe

页面中以这样的形式调用:callback('1.gif');

参数4:模式窗口的宽度w

参数5:模式窗口的高度h

参数6:模式窗口关闭时的回调函数onRemove

17.settings:获取或者修改编辑器内部参数

internalScript:是否清除内部代码

inlineScript:是否清除内联代码

internalStyle:是否清除内部样式

inlineStyle:是否清除内联样式

forcePtag:强制使用P标签

upLinkUrl:超链接上传接口地址

upLinkExt:超链接本地上传扩展限制

upImgUrl:图片上传接口地址

upImgExt:图片本地上传扩展限制

upFlashUrl:动画上传接口地址

upFlashExt:动画本地上传扩展限制

upMediaUrl:视频上传接口地址

upMediaExt:视频本地上传扩展限制

beforeSetSource:在设置源代码到编辑器前调用此函数

beforeGetSource:从编辑器返回源代码前调用此函数

focus:编辑器获得焦点时回调此函数

blur:编辑器失去焦点时回调此函数

注:修改有效变量仅限以上,其它的变量都仅在编辑器初始化时使用2.4.上传程序开发规范

上传接收程序开发必读:

?上传程序分标准HTML4上传和HTML5上传两种情况处理:

1,HTML4上传使用标准的表单上传域,上传文件域的name为:filedata

2,HTML5上传的整个POST数据流就是上传的文件完整数据,而本地文件名等信息储存于HTTP_CONTENT_DISPOSITION这个服务器变量中

?返回内容必需是标准的json字符串,结构可以是如下:

{"err":"","msg":"200906030521128703.gif"}或者

{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}

注:若选择结构2,则url变量是必有

需了解更多细节,请参考发行包中的demos文件夹。其中upload.php、upload.asp、upload.aspx仅为演示参考代码,若您使用的是其它的服务器脚本语言,请自行对初始化参数中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl进行修改,并开发相应服务器上传

接收程序。若您希望在自己的项目中实际使用,请自行修改代码或者重新开发,开发过程中请注意上传文件的格式及大小限制,注意服务器脚本安全问题。

上传文件管理建议方案:

?在编辑器初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值,例如:upload.php?infoid=123

?在服务器接收程序中以这个跟踪值保存到数据库中,同时也可以限制单个跟踪值下总上传文件数或者总文件大小,否则就是一个可以上传无限个文件的漏洞了?最终当前表单提交时,再根据编辑器提交的HTML内容和数据库中上传内容进行比较,删除所有没有使用的上传文件

?定期由服务器脚本删除上传数据库中没提交的文件记录,这样就能防止别人将你的网站作为免费相册空间了

2.5.插件开发指南

标准插件开发流程:

1.设计插件图标并在页面中定义好CSS

2.定义插件参数并写入初始化参数plugins

3.编写插件调用时要执行的代码

下面我们就demo09中的一个最简单插件作介绍:

test7:{c:'testClassName',t:'测试7:showIframeModal

(Ctrl+7)',s:'ctrl+7',i:function(editor){

editor.setSource('test');

},e:function(){

var_this=this;

_this.saveBookmark();

_this.showIframeModal('测试showIframeModal接口

','uploadgui.html',function(v){

_this.loadBookmark();

_this.pasteText('返回值:\r\n'+v);

},500,300);

}}

这个插件实现的功能是打开一个iframe,并将iframe返回的参数字符串插入到当前编辑器光标处。

?其中test7为插件的name,用来在tools初始化参数中调用

?c:'testClassName'为插件的样式名称

?t:'测试7:showIframeModal(Ctrl+7)'是鼠标放在按钮上显示的提示文字

?s:'ctrl+7'是定义插件的快捷方式,在编辑器区域里按设置的快捷方式就会执行此插件事件;

?i:function(){}为插件初始化函数,编辑器初始化完成后会调用此函数

?e:function(){}为插件点击后要执行的代码

特别说明:

1.插件执行函数中可以用this.的方式调用

2.

3.章节中所有的API接口函数。如果使用

回调函数,请将this变量保存在临时变量中,例如_this;

2.在某些浏览器下,打开会转移焦点的操作界面,会导致编辑区域焦点丢失。例如:

showIframeModal,在showIframeModal之前要先执行saveBookmark保存焦点,再在回调函数中执行loadBookmark函数恢复焦点,之后才能调用pasteHTML等函数;

3.如果希望样式表存储在系统自带的模板目录ui.css中,请将插件对象样式名留空,

则会自动按照插件名来调用相应的样式,例如:xhEdtBtnCut、xhEdtBtnCopy,其

中的Cut和Copy是插件名;

2.6.皮肤设计指南

xhEditor的皮肤保存在xheditor_skin文件夹中,每个皮肤一个子文件夹,文件夹结构如下:

xheditor_skin

└─default

├─ui.css

├─iframe.css

└─img

├─icons.gif

├─...

└─loading.gif

?编辑器按钮、面板、模式窗口等样式全部统一存储在ui.css文件中

?编辑区域的样式存储在iframe.css文件中

?编辑器内核用到的图片及css文件中用到的所有图片统一存储在img文件夹中

2.7.关于二次开发

3.1.使用常见问题

1.xhEditor能兼容哪些jQuery版本?

xhEditor最初的版本是基于jQuery v1.3.2开发的,因此目前v1.0系列的所有版本都能最大的兼容v1.3.2。为了获得更好的代码性能,目前xhEditor官方更建议使用jQuery v1.4.4版本。

虽然说v1.0版本系列能最大的兼容jQuery v1.3.2,但是在实际测试过程中,也发现一个不可修正的问题:在IE6下无法使用缩略图上传模式。如果你不需要使用缩略图模式,可以在jQuery v1.3.2基础上完美的运行xhEditor v1.0版本系列。

2.我的网页是GB2312编码的,怎样才能使xhEditor编辑器没有乱码?

如果使用最新版xhEditor的mini压缩版本,因为里面的文字完全utf-8编码化,可以直接调用,不会出现乱码现象。

如果使用的是源代码js文件或早期的xhEditor版本,在非utf-8编码的网页中使用就会出现乱码现象,只需将script的charset属性设置成utf-8即可完美解决:

3.正常加载了xhEditor,读取textarea的value值,为什么读取不到最新编辑结果?

目前网络中所有的在线编辑器都是利用新创建的iframe来实现可视化编辑功能,xhEditor也不例外,所以在提交前必需要将最新的编辑结果重新同步到原来的

textarea。

xhEditor默认会在textarea所在的form对象中绑定onsubmit事件,当用户点击submit按钮时,xhEditor就会将最新结果同步回textarea,随后随表单中的其它表单项一同提交到服务端脚本。因此,如果不需要用Javascript额外处理,普通的表单式提交是没任何问题的。

如果网页中需要用Javascript额外处理编辑结果,比如ajax提交表单,则有三种解决方案:

1.使用jQuery的事件绑定或者标准DOM绑定方法在form上绑定submit事件

(绑定代码必需在xhEditor初始化代码后面),即是在xhEditor把值回传后再

读取,在相应绑定的函数中读取textarea的value值即是最新编辑结果;

2.使用jQuery的标准取值方法:$('#textarea_id').val();

3.使用xhEditor提供的专用读值API接口:editor.getSource();

4.怎么添加自定义的表情?

1.在xheditor_emot文件夹中新建文件夹:msn

2.在msn文件夹中放置40个表情图片文件,文件名分别为:1.gif到40.gif

3.在初始化参数中添加:

emots:{msn:{name:'MSN',count:40,width:22,height:22,li

ne:8}}

此参数定义了一个名字为msn的表情组,显示名称为:“MSN”,总共40个

表情,表情区域的宽度和高度都是22像素,每行8个。

5.怎么覆盖编辑器自带的默认表情?

只需把自定义表情的名称设置为default,即可覆盖掉编辑器中自带的表情组。下面为操作示例:

1.删除xheditor_emot文件夹中的default文件夹

2.将自定义的表情文件夹名改为default

3.在初始化参数中添加:

emots:{'default':{name:'MSN',count:40,width:22,height:

22,line:8}}

6.当前页面设置了document.domain,如何让xhEditor工作正常?

主要考虑到若要让1.0支持跨域调用,编辑器内核架构变动会非常大,因此目前v1.0版本系列暂时还不支持跨域调用。

我们开发团队已经着手规划开发v2.0版本系列,到时会努力提供完美的跨域解决方案,敬请期待。

7.使用普通表单提交,怎么每次服务端取到的值总是之前旧的编辑结果?

如果你使用普通的表单式提交,而非AJAX提交,还是会出现服务端无法读取到最新编辑结果的问题。那么请检查一下你的代码是不是属于以下情况:

1.如果是以下结构的HTML代码,由于是非标准HTML代码结构,在某些浏览

器(例如Firefox)下会导致xhEditor工作不正常:

唯一解决方案:把代码结构改为标准结构:

富文本编辑器的技术演进

富?文本编辑器?的技术演进

?目录一、富文本编辑器介绍 二、语雀文档编辑器面临的问题与解决思路 三、多人实时协同的解决思路

富?文本编辑器? - 常?见交互 富文本输入框 - 输入内容 - 选中 & 操作 操作栏 - 顶部工具栏 - 侧边栏 - 内嵌工具栏

富?文本编辑器? - 浏览器?特性 富文本输入框

这里可以编辑
对内容进行操作 document.execCommand(‘bold’);

富?文本编辑器? - 技术类型 类型描述典型产品 L01、基于 contenteditable 2、使?用 document.execCommand 3、?几千~?几万?行行代码 早期的轻量量级编辑器? L11、基于 contenteditable 2、不不?用 document.execCommand,?自主实现 3、?几万?行行~?几?十万?行行代码 CKEditor、TinyMCE Draft.js、Slate ?石墨??文档、腾讯?文档 L21、不不?用 contenteditable,?自主实现 2、不不?用 document.execCommand,?自主实现 3、?几?十万?行行~?几百万?行行代码 Google Docs O?ce Word Online iCloud Pages WPS ?文字在线版

富?文本编辑器? - 不不同类型的优劣 类型优势劣势 L0技术?门槛低,短时间内快速研发可定制的空间?非常有限 L1站在浏览器?肩膀上,能够满?足 99% 业务场景?无法突破浏览器?本身的排版效果 L2技术都掌控在?自?己?手中,?支持个性化排版技术难度相当于?自研浏览器?、数据库

百度Ueditor配置步骤

百度Ueditor配置步骤 一、官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示: _examples:编辑器完整版的示例页面 dialogs:弹出对话框对应的资源和JS文件 themes:样式图片和样式文件 php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里应该是jsp,php,.net third-party:第三方插件(包括代码高亮,源码编辑等组件) editor_all.js:_src目录下所有文件的打包文件 editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用 editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录 二、部署UEditor到实际项目(UETest)中的步骤: 第一步:在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录,此处在项目根目录下建立,起名为ueditor。

第二步:拷贝源码包中的dialogs 、themes 、third-party 、editor_all.js 和editor_config.js 到ueditor 文夹中。其中,除了ueditor 目录之外的其余文件均为具体项目文件,此处所列仅供示例。 第三步:为简单起见,此处将以根目录下的index.aspx 页面作为编辑器的实例化页面,用来展示UEditor 的完整版效果。在index.aspx 文件中,首先导入编辑器需要的三个入口文件,示例代码如下: 1 2 3 编辑器完整版实例 第四步:然后在index.aspx 文件中创建编辑器实例及其DOM 容器。具体代码示例如下: 1 2 3 4 5 6 7 //下面是实例化 最后一步: 在/UETest/ueditor/ editor_config.js 中查找URL 变量配置编辑器在你项目中的路径。 1 2 //强烈推荐以这种方式进行绝对路径配置 URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/"; 新增编辑器容器拖动缩放功能,配置项为:scaleEnabled 、minFrameWidth 、minFrameHeight 控制大小 congig.js 文件中 //,initialFrameWidth:1000 //初始化编辑器宽度,默认1000 //,initialFrameHeight:320 //初始化编辑器高度,默认320

五款最好的程序文本编辑器

多场合下我们会用到纯文本编辑器,Windows自带的记事本功能很简陋,因此我们从网友的投票提名中选取了前五个最佳的文本编辑器(实际上有六个)。这些编辑器实际上主要适合程序员使用,他们的清单如下。 Notepad++ (Windows) 优于Windows记事本的一个文本编辑器,完全免费且开源,对于不同的编程语言可以实现语法高亮,代码折叠以及宏,起可定制性非常强。 Emacs (所有平台) Emacs文本编辑器深受高级程序员的喜爱,具有内置的宏功能以及强大的键盘命令,这对于编辑代码来说真是一种享受,这个程序几乎被移植到了每一个平台,并有多个发行版,其中最流行的是GNU Emacs和XEmacs,它们是跨平台、完全免费并且开源。 UltraEdit (Windows)

UltraEdit是一个49.95美元的共享软件,也提供了友好界面的编程编辑器,支持语法高亮,代码折叠和宏,以及一大堆其他的功能,内置了对于HTML、PHP 和JavaScript等语法的支持,和其类似的一个共享软件EditPlus也不错。 TextMate (Mac OS X) 价值63美元的TextMate功能强大且更具吸引力,其界面很具吸引力,在短短几年中就获得了大量的爱好者。Windows用户如果喜欢TextMate的话可以尝试用一下类似TextMate的E Text Editor。 Vim (所有平台)

和Emacs一样,Vim以键盘宏而广受欢迎,做为著名的老牌编辑器Vi的后代,Vim很适合键盘操作的程序员的口味。Vim的可定制性很强,Windows用户可以试试gVim或gVim Portable,Mac用户则有MacVim。如果你只是需要Vim 最有特色的部分的轻量型编辑器,可以试试Cream。 TextPad (Windows) 基于Windows的共享软件TextPad售价32.5美元,它同样拥有适合程序员的多种功能,语法高亮,代码拦截以及宏,TextPad具有不错的搜索能力和易用性。

几种常用网页文本编辑器总结

文本编辑器应用总结 一.lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js:组件的核心JS文件 2. lhgeditor.css:组件的样式表文件 3. images:组件所需的图片都在此文件夹中 以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。 lhgeditor组件使用说明: 1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。 2. 在window.onload函数里加入J.editor.add(编辑器的id).init(); 例:

二.nicEdit文本编辑器 再引入三个js文件ueditor.all.js、ueditor.config.js、lang/zh-cn/zh-cn.js,一定是在以上代码之后引入。 在需要使用编辑器的位置,添加代码如下: 标签。 3)引入相关文件 4)创建编辑器 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用 一、下载安装Ckeditor,并将其整合到项目中 1、什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求,此时就需要使用一种叫做富文本编辑器的东西,这类编辑器有很多,ckeditor就是其中一种,下面介绍其使用方法 2、如何下载 √ 进入官方网站https://www.360docs.net/doc/cd4259856.html,/,点击Download进入下载页面 √ CKEDITOR支持多种编程语言及框架(如:java、https://www.360docs.net/doc/cd4259856.html,、sharepoint等),我们选择https://www.360docs.net/doc/cd4259856.html, √ 下载后解压,简单解释里面内容 3、下面讲如何将CKEditor整合到我们的应用中 √ 新建一个网站

√ 为了代码清晰,新建一个目录,起名JS,方便将ckeditor放到该目录下 √ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页,起名test_ckeditor √ 增加对ckeditor的引用 √ 调用,主要是通过对TextBox的格式化实现富文本的显示效果 √ 为了简便,我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合),从https://www.360docs.net/doc/cd4259856.html,/下载

√ 将下载后的文件放到JS文件夹下 √ 引用jquery(通过将jquery类库拖放到title标签下) √ 页面上添加TextBox文本框(ID:TextBox1) √ 用ckeditor插件格式化TextBox1。在中添加如下代码 (注:以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造,让其看起来更炫) √ 按F5键预览,即可看到TextBox1被ckeditor格式化后的效果

细数几款免费好用的在线HTML编辑器

细数几款免费好用的在线HTML编辑器 先普及一下基本知识:什么叫在线HTML编辑器?说得简单点,在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框,可以进行图文排版等操作。当年本菜鸟做网站的时候,曾经自己用javascript编写过一个比较简单的在线HTML编辑器,用于文本内容的排版。但是因为水平有限,很多功能都无法实现。后来有了eWebEditor,功能确实强大,但这个编辑器是个收费的软件,并且正因为功能强大,也就显得过重,一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢?答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发,让我们得以享受他们的成果。一、百度出品的UEditorUEditor是由百度web 前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。特别要说的是,头条号后台发布文章的编辑器就是用的UEditor!百度UEditorUEditor还有一个轻量版的,叫做UMeditor,简称UM。UM是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线HTML编辑器。主要特点是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了

div的加载方式,以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧,以经受贴吧每天几亿的pv 的考验,功能设计应当是最优化的了。当然随着代码的减少,UM的功能对于UE来说还是有所减少,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。百度UEditor界面二、xhEditor开源HTML编辑器xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。xhEditor完全基于Javascript 开发,可以应用在任何的服务端语言环境下,例如:PHP、ASP、https://www.360docs.net/doc/cd4259856.html,、JA V A等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。 主要特点:精简迷你:初始加载4个文件,包括:1个js(50k)+2个css(10k)+1个图片(5k),总共65k。若js和css文件进行gzip压缩传输,可以进一步缩减为24k左右。使用简单:简单的调用方式,加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。无障碍访问:提供WAI-ARIA全面支持,全键盘精细操作,全程语音向导,提供完美无障碍访问体验,充分满足残疾人的上网需求。内置Ajax上传:内置强大的Ajax上传,包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传),剪切板上传及远程抓

使用文本编辑器

文本编辑器使用 Visual C++6.0开发环境中包含了一个功能强大的文本编辑器,使用它可以管理、编辑及打印源代码文件。虽然该文本编辑器和其他基于Windows文本编辑器软件(如Windows 98的记事本)的大多数功能是相同的,但它是集成在Visual C++6.0开发环境中,一旦文档窗口中的源代码文件被打开,就可以使用了,且增加许多帮助快速键入代码、提高可读性的功能,例如在文本编辑器中用不同的颜色表示不同的语法结构(蓝色表示关键字,浅绿色表示注释)。 使用文本编辑器,用户可以实现以下功能: ·通过在线弹出的列表框选择所需要的类成员、参数或值来完成相应的语句。 ·使用文本编辑器的宏操作。 ·可以为不同的编程语言产生相应的代码源文件,包括C/C++、SQL及HTML。 ·为源文件中相应的字、词或语法定制不同的颜色以及文本编辑器的外规定制等。 ·在单个或多个源文件中进行多种条件的漫游、查找和替换。 ·用书签标记源文件中要处理的代码行。 ·管理源文件窗口,在多个窗口之间进行拖放操作。 ·支持SQL脚本的处理、切换等操作。 1 选定文本 在文本编辑过程中常常需要选定所需要的文本,并进行剪切、复制、删除、增加或减少缩进等操作。在选择时,可以选定文本中的一行、多行或文本块,其相应的操作过程如下: (1)选定一行 将鼠标移至要选定的行的最左边,当鼠标箭头变成反向时,单击鼠标左键。 (2)选定多行 将鼠标移至要选定内容的开始处,按下左键并拖动,在选定内容的结尾处释放鼠标。 (3)选定文本块 将鼠标移至要选定内容的开始处,按下鼠标左键之前按住ALT键不放并拖动,在选定内容的结尾处释放鼠标和ALT键。 另外,若双击鼠标左键,则鼠标所在位置的整个单词被选定。

ueditor1.4.3jsp utf-8版配置使用教程

Ueditor在线编辑器配置示例 1.简介 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 2.下载 首页地址:https://www.360docs.net/doc/cd4259856.html,/website/index.html,点击下载,可以根据需要下载php、aps、jsp、.net版本。由于1.4版本和1.3版本内容变更较大,本例中使用了最新版本1.4.3.1 jsp utf-8 版本进行测试。 3.配置 下载ueditor后,放入系统的js库中,由于本例的相同功能的ewebeitor 放在webroot下,本例中也直接放入的webroot下,结构图如下:

首先配置通用配置的控制器路径,文件名为:ueditor.config.js。此文件配置需要对应下载的版本,即jsp版对应修改: serverUrl: URL + "jsp/controller.jsp" 修改了通用配置后,还需要修改对应的上传文件、图片等路径,我们需要根据我们配置的版本去设置对应目录的内容,jsp版本如下:

实际配置如下图: 下面还有对应图片、视频的配置,与图片配置类似。 4.问题 4.1jar问题

需要的jar都已在ueditor中包含,直接拷贝至项目的lib中并加入classpath中即可。 1.4.3版本需要commons-io- 2.4.jar支持。所以在buildpath中需要将该包放置靠前。 4.2拦截器问题 对于使用了Struts2或配置了其他拦截器的,需要将该请求放行如Struts2一般配置为: 对于此类会拦截jsp的请求的配置,可以根据项目需要, 1.改为*.action,*.do之类的请求匹配 2.加入自己的拦截器,如本例所配置的 com.linewell.core.filter.ExtendStrutsPrepareFilter中, 不解的可以参照: https://www.360docs.net/doc/cd4259856.html,/krysml/article/details/9006533

多文档文本编辑器

可视化程序设计-多文档文本编辑器 设计报告 学号:000000000000 姓 名:XXXX 学院:XXXXX 层次:XXXX

目录 一、设计分析 (3) 二、开发平台、工具.................................................. 3. 三、程序结构及设计.................................................. 3. 3.1文件模块:...................................................... 3. 3.2编辑模块: ...................................................... 4. 3.3格式模块: ...................................................... 4. 3.4查看模块: ...................................................... 4. 3.5帮助模块: ...................................................... 4. 四、源程序代码说明.................................................. 6. 4.1界面设计 ...................................................... .6.. 4.2.具体功能的实现................................................. 6. 五、操作方法流程及程序试验结果 (9) 5.1.程序启动界面:................................................. 9. 5.2.新建多个文本文件............................................... 9. 5.3文档编辑页面 .................................................. 1.0 5.4.保存界面 (10) 5.5打开文档 (11) 5.6退出文档 (11) 5.7字体大小设置界面 (12) 5.8字体颜色设置界面 (12) 六、设计体会 (13)

如何将UEditor部署到PHP程序上

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。最近在开发程序的时候需要集成一个富文本编辑器,UEditor的UI及UE比CKEditor、KindEditor要好出不少。所以简单地对UEditor研究了一下,记录于此。 一、下载UEditor编辑器 UEditor官方网站:https://www.360docs.net/doc/cd4259856.html,/ 在下载频道可以下载到最新版本的UEditor UEditor的下载方式分为两种,完整下载与定制下载,完整下载提供UTF-8与GBK两种编码的版本,定制下载目前只有UTF-8编码,推荐使用定制下载,按需求定制,如果程序不是UTF-8编码,可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码,记得同时修改HTML文件中的charset=utf-8。 二、精简UEditor编辑器 完整版的相关文档与示例页面较多,可以自行研究一下,下面为定制版中可以精简的文件。 index.html是所定制的UEditor编辑器的示例文件,删除之。 editor.js与editor.min.js内容相同,editor.min.js是editor.js的压缩版,使用时加载editor.min.js 即可,所以editor.js也可以删除。 三、将UEditor部署到PHP程序上 1.将UEditor的所有文件放在PHP程序的目录中,这里我把文件放在/ueditor目录下。 2.在网页中引入UEditor文件 3.在textarea标签下初始化UEditor 四、配置UEditor编辑器 editor_config.js是UEditor的配置文件,首先对路径进行配置。

相关文档
最新文档