富文本编辑器总结

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});