百度编辑器ueditor-1.4.3-jsp使用教程

【前言】

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

 

【关于版本】

1.语言版本

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

2.原始版本，定制版本

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

如下图：

 

其中，

可见功能区，需要选择想要的功能；

隐藏功能区，需要勾选想要的功能；

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

3.正式版和迷你版

两者最大的区别是：大小，实现方式。

正式版：比较大，iframe实现

迷你版：比较小，div实现

 

【下载】

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

 

【文件结构】

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

大概介绍一下：

文件夹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中也不会报错的：

 

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

1.添加jar包

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

2.验证配置是否正确

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

若显示配置内容则正确，如下：

3.定制上传相关信息

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

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

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的块元素中的内容。

 

【渲染前后对比】

渲染前代码效果：

渲染后代码效果：

 

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