百度富文本编辑器Ueditor使用心得

百度富文本编辑器Ueditor使用心得

1.下载插件。

小伙伴可依据自身需求下载对应版本，帅气的博主下的是jsp版本。

2.导入项目。

博主项目是SSM，把下载的 ueditor 包放在了 webapp --> resources 文件夹下
​

3.将 ueditor --> jsp 下 lib 文件夹的 jar 包，移动到 WEB-INF --> lib 下。

4.将 ueditor --> jsp 下的 config.json 和 controller.jsp 移动至 ueditor 下。

5.修改 controller.jsp 内容，如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
		 import="com.baidu.ueditor.ActionEnter"
		 pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding( "utf-8" );
	response.setHeader("Content-Type" , "text/html");
	String rootPath = application.getRealPath( "/" );
	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 );
%>

6.修改 ueditor.config.js 文件中内容，如下

a.服务器统一请求接口路径

, serverUrl: URL + "/项目名/resources/ueditor/controller.jsp"

b.编辑器层级的基数,默认是900（有些情况下，需要调整该值， ueditor 的一些弹框会被挡着；如果正常，则此步骤不需改动）

,zIndex : 10900 

c.工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义

, toolbars: [[
            ......此处是ueditor现实的功能按钮，
            可以在此处修改，也可以在使用的jsp页面定义。（博主修改的此处）
        ]]

7.在具体的 jsp 页面使用 ueditor

a.页面最顶部写下如下代码

/**
     * 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
     * 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
     * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
     * 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
     * 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
     * window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
<script type="text/javascript">
    window.UEDITOR_HOME_URL = "/项目名/ueditor/";
</script>

b.引入 js

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

c.定义 div

<div id="show-Content">
     <textarea name="Content" id="Content" type="text/plain" required ></textarea>
</div>

d.定义编辑器

<!-- 编辑器 -->

<script type="text/javascript">
    var ue = UE.getEditor('Content',{//此处的 Content 要和 定义 div 中的 id 名一致
        maximumWords:50000,//字数最大长度限制
        initialFrameHeight:400,//高
        initialFrameWidth:600//宽
    });
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
    	// 此处的 uploadimage 是 ueditor --> config.json 文件中的执行上传图片的action名称
        if (action == 'uploadimage') {
        	// 此处的 ‘uploadimage' 是后端对于图片、视频上传的接口，同时接口前边要带上项目名，否则本机不报错，上传服务器也会报错。
            return '/项目名/uploadimage';
        } else if (action == 'uploadvideo') {
            return '/项目名/uploadvideo';
        } else if (action == 'catchimage') {
            return '/项目名/catchimage';
        }else if (action == 'uploadfile') {
            return '/项目名/uploadfile';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
</script>

e.获取ueditor编辑器 字符数

UE.getEditor('Content').getContentTxt().length

8.结果展示,帅气的博主好开心(｡◕ˇ∀ˇ◕)

9.其他的奇奇怪怪的问题（坑）参考链接

百度富文本UEditor趟坑之路之图片上传不显示
解决Ueditor编辑器图片保存路径问题
ueditor上传视频再次访问回显失败问题
解决ueditor编辑器图片在线管理图片无法显示
ueditor无法滚动到底部工具栏浮动bug怎么修复？
UEditor 工具栏上的按钮列表可以自定义配置,屏蔽某些不要的按钮
使用百度的富文本编辑器UEditor遇到的问题总结