富文本编辑器

1.富文本编辑器

 

  富文本编辑器：可视化（所见即所得）的HTML编辑器。

  富文本编辑器，现在有很多，常用包含：CKEditor、ueditor。

 

2.ueditor

 

  ueditor是百度公司开发的一款开源免费的富文本编辑器。

 

3.在jsp项目中集成ueditor

 

  1.下载ueditor：http://ueditor.baidu.com

 

  2.将ueditor整个文件夹拷贝到项目目录WebContent

 

  3.将ueditor下的jsp/lib目录下的所有jar包，移至WebContent/WEB-INF/lib目录中。

 

  4.在jsp页面中导入ueditor相关的js和css文件。

 

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

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

    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

 

    注意：修改src中文件的路径

 

  5.在页面希望出现富文本编辑器的地方，添加如下代码即可。

 

    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

 

    <script type="text/javascript">

//实例化编辑器

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

 

    </script>

 

4.如何在后台Servlet中获取富文本编辑器中的内容

 

  1.在下面的script标记中，添加name属性

 

    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

 

    改为：

 

    <script id="editor" name="desc" type="text/plain" style="width:1024px;height:500px;"></script>

 

5.在ueditor中上传图片

 

      打开utf8-jsp/jsp/config.json文件，找到上传图片配置项中的imageUrlPrefix，值修改为："/项目名"即可。

 

  问题：本地图片上传后，在线管理中无法显示上传的历史图片，具体解决办法为：

 

        打开jsp/controller.jsp，将下面的一行代码，更改为后面的代码：

 

        out.write( new ActionEnter( request, rootPath ).exec() );

 

        更改为：

 

        String action = request.getParameter("action");  

        String result = new ActionEnter( request, rootPath ).exec();  

        if( action!=null && (action.equals("listfile") || action.equals("listimage") ) ){  

            rootPath = rootPath.replace("\\", "/");  

            result = result.replaceAll(rootPath, "/");//把返回路径中的物理路径替换为 '/'  

        }  

        out.write( result );

 

        打开jsp/config.json文件，找到"列出指定目录下的图片"中的imageManagerUrlPrefix修改为："/项目名"

 

6.在ueditor中上传视频

 

  打开utf8-jsp/jsp/config.json文件，找到上传视频配置项中的videoUrlPrefix，值修改为："/项目名"即可。

 

7.在ueditor中上传附件（文件）

 

  打开utf8-jsp/jsp/config.json文件，找到上传文件配置项中的fileUrlPrefix，值修改为："/项目名"即可。

 

8.关于ueditor的一些常用的配置

 

  ueditor的所有配置项，都存储在了ueditor.config.js文件中。

 

  toolbars：工具栏上的按钮。

 

  fullscreen : false //是否开启初始化时即全屏，默认关闭

 

  注意：如果在ueditor.config.js文件中做了修改，那么所有页面上的编辑器都将起作用。全局的。

 

  如果只希望在某个页面的编辑器有一些差异化的设置，那么可以通过js代码实现。

 

  var ue = UE.getEditor('editor', {toolbars:[...], elementPathEnabled : false});