百度编辑器ueditor-1.4.3-jsp使用教程 作于2014-12-01

【注意】

百度编辑器ueditor上传文件到qiniu已经开源到github,有完整示例,

有需要可以下载运行试试:https://github.com/uikoo9/ueditor-java-qiniu


【前言】

百度编辑器发展到1.4.3功能已经很完善,使用也较为简单,是目前比较流行的富文本编辑器。


【关于版本】

1.语言版本

ueditor在语言方面分为php,asp,.net,jsp版本,语言版本的区分只和文件上传(后台交互)有关系。

2.原始版本,定制版本

ueditor的功能是十分强大的,或者说十分的多,有很多功能是用不到的,所以提供了定制版本的下载,点这里

如下图:

11.png


其中,

可见功能区,需要选择想要的功能;

隐藏功能区,需要勾选想要的功能;

对应的还有语言和服务端版本的选择。

3.正式版和迷你版

两者最大的区别是:大小,实现方式。

正式版:比较大,iframe实现

迷你版:比较小,div实现


【下载】

推荐使用定制版本,选择自己需要的功能,然后选择jsp版本下载。


【文件结构】

下载完成后解压缩,得到下面的文件目录:

12.png

大概介绍一下:

文件夹dialogs:弹窗插件,例如上传图片时候的弹窗;

文件夹jsp:jsp版本上传功能的相关jar以及配置文件;

文件夹lang:语言;

文件夹themes:主题风格,可以选择不同的风格;

文件夹third-party:第三方插件,例如插入代码,代码高亮等;

ueditor.all.js:ueditor核心js,源代码;

ueditor.all.min.js:ueditor核心js,压缩后代码;

ueditor.config.js:默认配置文件;

ueditro.parse.js:文本渲染js,例如插入一段代码后,代码高亮的显示需要该js。


【引入】

    <!-- 默认配置文件 -->
    <script type="text/javascript" charset="utf-8" src="${base}/WUI/ueditor-min-1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${base}/WUI/ueditor-min-1.4.3/ueditor.all.min.js"> </script>
    <!-- 语言文件 -->
    <script type="text/javascript" charset="utf-8" src="${base}/WUI/ueditor-min-1.4.3/lang/zh-cn/zh-cn.js"></script>
    <!-- 如果需要页面渲染的话引入 -->
    <script type="text/javascript" charset="utf-8" src="${base}/WUI/ueditor-min-1.4.3/ueditor.parse.min.js"></script>



【自定义编辑器】

开始使用前需要按自己的需求编辑ueditor.config.js文件,需要注意以下几点:

1.URL需要修改为项目中的ueditor的根路径:

var URL = base + '/WUI/ueditor-min-1.4.3/';

2.后台处理入口jsp的路径要对:

, serverUrl: URL + "jsp/controller.jsp"

3.toolbars可以自己定义需要哪些按钮,例如:

        , toolbars: [[
                      'bold','italic','underline','forecolor','backcolor','|',
                      'fontfamily','fontsize','|',
                      'removeformat','formatmatch','pasteplain','|',
                      'simpleupload','attachment','|',
                      'source','link','unlink','|',
                      'insertcode']]

4.若项目中用到了弹出框,或其他情况导致ueditor被遮挡,调整z-index即可:

,zIndex : 1100     //编辑器层级的基数,默认是900

5.其他的可以自己看注释修改


【初始化】

页面中添加:

<div>
    ...
    <script id="ueditor" type="text/plain">初始化是显示的内容</script>
    ...
</div>

js初始化,可以通过id初始化,如下:

var ue = UE.getEditor('ueditor');

js初始化的时候也可以传入自定义的配置,如下:

var ue = UE.getEditor('ueditor',options);



【效果】

初始化成功后的效果,如下图,而且firebug中也不会报错的:

13.png


【图片上传,文件上传等】

1.添加jar包

将jsp/lib下的jar添加到项目中

2.验证配置是否正确

访问:http://localhost:8080/ueditor1_4_3-utf8-jsp/jsp/controller.jsp?action=config,

若显示配置内容则正确,如下:

14.png

3.定制上传相关信息

修改jsp/config.json中的内容,鉴于图片上传,文件上传,语音上传等配置都相似,所以以图片上传为例,

15.png

需要注意的红框中的两项:

imageUrlPrefix,

若在本地调试,则输入本地路径,例如:http://localhost/com,

若发布到外网,则输入外网地址,例如:http://yourdomain.com,

imagePathFormat,保存路径

最终页面上显示的时候会调用imageUrlPrefix+imagePathFormat去访问。


【第三方插件使用】

ueditor有需要比较有用的插件,详见这里


【页面解析】

1.ueditor对所有ueditor插入的东西都做了解析,

例如通过ueditor插入的代码,如果直接显示是没有效果的,

但是通过ueditor解析后代码就高亮了。

2.录入的时候同正常录入一样,没有改变。

3.显示的时候,在你需要解析的块元素上添加class,然后通过ueparse解析,例如:

<@bspanel type='primary' style='margin-top:20px;' class='ueparse'>${blog.article_content}</@bspanel>

以上代码其实是在div上添加了一个class:ueparse,

然后在页面加载之前,添加以下代码:

<script type="text/javascript" charset="utf-8" src="${base}/WUI/ueditor-min-1.4.3/ueditor.parse.min.js"></script>
<script type="text/javascript" charset="utf-8">
    uParse('.ueparse', {rootPath: base+'/WUI/ueditor-min-1.4.3/'});
</script>

就是渲染你加了class的块元素中的内容。


【渲染前后对比】

渲染前代码效果:

41.png

渲染后代码效果:

42.png


可见使用的ueditor的解析器渲染页面后效果还是很好的。


http://uikoo9.com/
更多精彩内容

求打赏(长按图片即可识别)~
微信 捐助列表:http://uikoo9.com/donate/

阅读:28397