富文本编辑器

1.富文本编辑器

  富文本编辑器:可视化(所见即所得)的HTML编辑器。

  富文本编辑器,现在有很多,常用包含:CKEditorueditor

2.ueditor

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

3.jsp项目中集成ueditor

  1.下载ueditorhttp://ueditor.baidu.com

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

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

  4.jsp页面中导入ueditor相关的jscss文件。

    <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="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="1024px;height:500px;"></script>

    改为:

    <script id="editor" name="desc" type="text/plain" style="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});

原文地址:https://www.cnblogs.com/HeXiaoZhou/p/6425751.html