您的位置:首页 > 产品设计 > UI/UE

ueditor 1.4.3 图片上传配置注意事项

2014-07-10 10:17 267 查看
经过几天的研究熟悉了百度Ueditor 富文本编辑器的使用,为了防止自己忘记特记录如下:

1、从官网下载1.4.3最新版 http://ueditor.baidu.com/website/download.html。
我下载的是1.4.3 jsp的开发版本,当然也可以下载min版不过min版的配置我就不太清楚了。

2、将下载下来的zip解压后重命名为ueditor 之后将文件添加到项目的webroot下面。

将该目录中 lib文件夹下的jar添加到web/INF下的lib中 。

3、在jsp中导入配配置文件

<scripttype="text/javascript"charset="utf-8"src="ueditor/ueditor.config.js"></script>

<scripttype="text/javascript"charset="utf-8"src="ueditor/ueditor.all.js"></script>

<linkrel="stylesheet"type="text/css"href="ueditor/themes/default/css/ueditor.css"/>

注:我的jsp页面与ueditor处于同一级目录。

4、在jsp页面需要富文本编辑器的地方假如如下代码

<scripttype="text/plain"id="myEditor"name="news.content"></script>

<scripttype="text/javascript">

var editor =
new UE.ui.Editor({

initialFrameHeight:380

});

editor.render("myEditor");

</script>

上面代码包含了如何指定ueditor高度的方法 {initialFrameHeight:380 }。

5、修改ueditor.config.js中的URL

修改前

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

修改后

var URL =
"/TLWXP/ueditor/";

6、个性化编辑器的toolbar

首先找到

window.UEDITOR_CONFIG

修改该栏目下的 toolbars

具体参数对应的工具含义可参考官方文档 http://fex-team.github.io/ueditor/#start-toolbar
7、如果使用了图片上传的功能则要修改 ueditor/jsp/config.json中关于图片路径的配置

修改前

修改后

如需修改其他内容可以继续往下修改对应的项目。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: