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

标签: # ueditor  java  jsp

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

1.下载插件。

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

2.导入项目。

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

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

ueditor包下jsp中lib处理

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

移动jsp文件下两个人文件

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遇到的问题总结

版权声明:本文为yuluochenxiao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yuluochenxiao/article/details/108323623