700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > edui 富文本编辑_百度富文本编辑器ueditor使用总结

edui 富文本编辑_百度富文本编辑器ueditor使用总结

时间:2022-05-31 07:52:00

相关推荐

edui 富文本编辑_百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结

2. 从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:

_examples:编辑器完整版的示例页面

dialogs:弹出对话框对应的资源和js文件

themes:样式图片和样式文件 PHP/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里我们选择php

third-party:第三方插件(包括代码高亮,源码编辑等组件)

editor_all.js:_src目录下所有文件的打包文件(用于发布版本)

editor_api.js: API接口配置文件(开发版本)

editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用

editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录

3.编辑器的实例化页面,导入编辑器需要的三个入口文件,示例代码如下:

4.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器,示例代码如下:

这里写你的初始化内容

vareditor=newUE.ui.Editor();

editor.render("myEditor");

//1.2.4以后可以使用一下代码实例化编辑器

//UE.getEditor('myEditor')

5.在editor_config.js中查找URL变量配置编辑器在你项目中的路径。

官网示例:

//强烈推荐以这种方式进行绝对路径配置

URL=window.UEDITOR_HOME_URL||"/UETest/ueditor/";

我的配置:

(function(){

/**

*编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。

*鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。

*"相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/umeditor/"这样的路径。

*如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。

*因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。

*window.UMEDITOR_HOME_URL="/xxxx/xxxx/";

*/

/**

*@authorwusuopubupt

*@date-10-24

*

*setwindow.UMEDITOR_HOME_URL="/ueditor/";

*

**/

window.UMEDITOR_HOME_URL="/ueditor/";//注意就是这里!

varURL=window.UMEDITOR_HOME_URL||(function(){

functionPathStack(){

6.如果用editor_api.js (也就是不用editor.all.js)开发时,打开editor_api.js,代码如下

/**

*开发版本的文件导入

*/

(function(){

varpaths=[

'editor.js',

'core/browser.js',

'core/utils.js',

'core/EventBase.js',

'core/dtd.js',

'core/domUtils.js',

'core/Range.js',

'core/Selection.js',

'core/Editor.js',

'core/filterword.js',

'core/node.js',

'core/htmlparser.js',

'core/filternode.js',

'plugins/inserthtml.js',

'plugins/image.js',

'plugins/justify.js',

'plugins/font.js',

'plugins/link.js',

'plugins/print.js',

'plugins/paragraph.js',

'plugins/horizontal.js',

'plugins/cleardoc.js',

'plugins/undo.js',

'plugins/paste.js',

'plugins/list.js',

'plugins/source.js',

'plugins/enterkey.js',

'plugins/preview.js',

'plugins/basestyle.js',

'plugins/video.js',

'plugins/selectall.js',

'plugins/removeformat.js',

'plugins/keystrokes.js',

'plugins/dropfile.js',

'ui/widget.js',

'ui/button.js',

'ui/toolbar.js',

'ui/menu.js',

'ui/dropmenu.js',

'ui/splitbutton.js',

'ui/colorsplitbutton.js',

'ui/popup.js',

'ui/scale.js',

'ui/colorpicker.js',

'ui/combobox.js',

'ui/buttoncombobox.js',

'ui/modal.js',

'ui/tooltip.js',

'ui/tab.js',

'ui/separator.js',

'ui/scale.js',

'adapter/adapter.js',

'adapter/button.js',

'adapter/fullscreen.js',

'adapter/dialog.js',

'adapter/popup.js',

'adapter/imagescale.js',

'adapter/autofloat.js',

'adapter/source.js',

'adapter/combobox.js'

],

/**

*@authorwusuopubupt

*@date-10-24

*

*modifiedbaseURL='/ueditor/src/';

*/

baseURL='/ueditor/src/';

for(vari=0,pi;pi=paths[i++];){

document.write('');

}

})();

可以看到,这里有一项:baseURL,就是JS文件的路由,这里要根据ueditor_api.js文件的实际路径去配置!

7.文件上传问题:

打开ueditor.config.js,可以看到如下配置:

//图片上传配置区

,imageUrl:URL+"php/imageUp.php"//图片上传提交地址

//,imagePath:URL+"php/"//图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置

,imagePath:"/"

,imageFieldName:"upfile"//图片数据的key,若此处修改,需要在后台对应文件修改对应参数

这里的imageURL是图片上传所调用的php文件的地址,而imagePath则是为新上传的图片生成的图片地址的host部分;

再打开ueditor/php/下的imageUp.php文件,有配置如下:

$config=array(

"savePath"=>"/var/www/store/upload/",//存储文件夹

"maxSize"=>1000,//允许的文件最大尺寸,单位KB

"allowFiles"=>array(".gif",".png",".jpg",".jpeg",".bmp")//允许的文件格式

);

//上传文件目录

//$Path="upload/";

$Path="/var/www/store/upload/";

这里需要把上传文件到服务器的目的地址(上传文件保存文件)savePath修改成你指定的文件地址。

由于相对路径和绝对路径的问题,生成的地址有可能是错的,这时就要hack一下生成图片URL的JS文件:

ueditor/dialogs/image/image.js 中修改:

/**

*@authorwusuopubupt

*@date-10-24

*@returnurlmodified

**/

varreg=/\/var\/www\/test\/upload\//;

url=url.replace(reg,"");

var$img=$(""),

$item=$("

这里的正则的规则要根据具体情况来定!

至此,Ueditor便在我的环境中配置成功了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。