ueditor编辑器(百度富文本编辑器UEditor)

编程之家2024-01-23112次浏览

一、ueditor富文本编辑器怎么用

方法/步骤

第一步需要引入UEditor的源文件，和jquery文件，来对编辑器进行支持。如果看到图二的效果则说明部署成功咯，接下来我们就可以根据自己的实际需求来进行场地参数。

第二步获取编辑器的输入的文本内容，然后对获取的值传递给后台处理，也可通过from表单进行操作。

配置文件上传，图片上传、截图上传路径（以jsp为例）

首先配置ueditor.config.js来初始化ueditor的安装路径,projectName代表项目路径URL则表示，配置后的ueditor的所在路径（可自定义）,详细配置可看图片所示

配

置好路径后我们就可以调用了，接下来需要配置上传文件的路径了(jsp/config.json)里，需要配置的有imageUrlPrefix图片访问

的路径前缀，imagePathFormat/scrawlPathFormat

等*PathFormat路径用来表示上传的文件路径（注意：windows和linux的路径不同方式）,具体配置如图所示

在项目中添加ueditor说需要的jar包文件，然后启动项目。

项目启动完成后，进入页面，我们可以来试试效果，大家可以任意复制图片，上传文件等来实验下我们的配置结果。出现如下结果则说明我们配置成功了，简单吧。

二、百度ueditor编辑器怎么用

1、官方下载最新ASP版本，解压后文件夹自行修改，建议放在根目录下（如下图）

2、用记事本打开\bdu123\asp\config.json文件，修改里面图片、音乐、附件等的上传地址，../../upload代表上传的图片将自动放在网站根目录下文件夹“upload”里面，这个设置的好处是，易于管理上传的图片、音乐及附件等，日后即使你修改百度编辑器存放的文件夹名称，也不会影响图片等的显示（如下图）

3、在ASP中调用编辑器的方法很简单，在添加文章的动态网页中，只需把以下的源代码放置在表单中即可。（注意：代码中ueditor.config.js和ueditor.all.js这两个的调用地址修改正确就OK了）

4、ASP修改文章的动态网页中，把以下的源代码放置在表单中。（注意：代码中ueditor.config.js和ueditor.all.js这两个的调用地址修改正确就OK了）

大功告成（以上所用到的源代码，可到官方文档“入门部署和体验”复制即可。）

三、springmvc怎么使用百度富文本编辑器

上网查询了很多相关资料，此处简要记录下，防止以后遇到类似问题。

一种方式是直接修改源码，步骤如下：

1、编写controller如下（该接口是ueditor前后台交互的统一路径）：

package com.test.dcdp.controller;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import com.baidu.ueditor.ActionEnter;

@Controller

@RequestMapping("/ueditor")

public class UeditorController{

@RequestMapping("/dispatch")

public void config(HttpServletRequest request, HttpServletResponse response){// response.setContentType("application/json");String rootPath= request.getSession().getServletContext().getRealPath("/");response.setHeader("Content-Type","text/html");try{

String a= request.getRequestURI();

String exec= new ActionEnter(request, rootPath).exec();PrintWriter writer= response.getWriter();writer.write(exec);

writer.flush();

writer.close();

} catch(IOException e){

e.printStackTrace();

}

2、修改ueditor的配置文件 ueditor.config.js（指定后台服务器地址）,如下所示修改前：

var URL= window.UEDITOR_HOME_URL|| getUEBasePath();/**

*配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。

window.UEDITOR_CONFIG={

//为编辑器实例添加一个路径，这个不能被注释UEDITOR_HOME_URL: URL

//服务器统一请求接口路径

, serverUrl: URL+"php/controller.php"

修改后：

var getRootPath= function(){

//获取当前网址

var curWwwPath=window.document.location.href;//获取主机地址之后的目录

var pathName=window.document.location.pathname;var pos=curWwwPath.indexOf(pathName);

//获取主机地址

var localhostPaht=curWwwPath.substring(0,pos);//获取带"/"的项目名，如：/uimcardprj

var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);return(localhostPaht+projectName);

}

//获取路径

var applicationPath= getRootPath();

var URL= window.UEDITOR_HOME_URL|| getUEBasePath();var serverURL= applicationPath;

/**

*配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。

window.UEDITOR_CONFIG={

//为编辑器实例添加一个路径，这个不能被注释UEDITOR_HOME_URL: URL

//服务器统一请求接口路径

, serverUrl: serverURL+"ueditor/dispatch"3、修改ueditor源码 ConfigManager.java（指定配置文件路径）.

修改前：

*通过一个给定的路径构建一个配置管理器，该管理器要求地址路径所在目录下必须存在config.properties文件*/

private ConfigManager( String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException{rootPath= rootPath.replace("\\","/");this.rootPath= rootPath;

this.contextPath= contextPath;

if( contextPath.length()> 0){

this.originalPath= this.rootPath+ uri.substring( contextPath.length());} else{

this.originalPath= this.rootPath+ uri;

}

this.initEnv();

}

修改后：

*通过一个给定的路径构建一个配置管理器，该管理器要求地址路径所在目录下必须存在config.properties文件*/

private ConfigManager( String rootPath, String contextPath, String uri) throws FileNotFoundException, IOException{rootPath= rootPath.replace("\\","/");this.rootPath= rootPath;

this.contextPath= contextPath;

/*if( contextPath.length()> 0){

this.originalPath= this.rootPath+ uri.substring( contextPath.length());} else{

this.originalPath= this.rootPath+ uri;

}*/

this.originalPath= rootPath+"static"+ File.separator+"lib"+ File.separator+"ueditor"+ File.separator+"1.4.3"+ File.separator+"jsp"+ File.separator+"controller.jsp";///EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jspthis.initEnv();

}

如上所述，主要修改 originalPath的路径，否则ueditor的配置文件（ueditor_config.json）路径是错误的（与springMVC整合的情况），之所以向上面那样拼接路径，是因为我的ueditor相关文件拷贝在了（EdwManage/src/main/webapp/static/lib/ueditor/1.4.3/jsp/controller.jsp）路径里。

4、（若未执行该步操作，在选择好图片后，点击上传，将提示：“未找到上传文件”）由于上传的文件都会被springmvc的文件上传拦截器拦截，包装，这样百度编辑器接收到文件后不能识别文件格式，因此把spring默认的commonsMultiparResolver，替换成我们自己写的commonsMultiparResolver，并修改配置文件。

重写CommonsMultipartResolver:

package com.tianwen.dcdp.common;

import org.springframework.web.multipart.commons.CommonsMultipartResolver;public class CommonsMultiparResolver extends CommonsMultipartResolver{@Override

public boolean isMultipart(javax.servlet.http.HttpServletRequest request){String uri= request.getRequestURI();

System.out.println(uri);

//过滤使用百度UEditor的URI

if(uri.indexOf("ueditor/dispatch")> 0){//此处拦截路径即为上面编写的controller路径System.out.println("commonsMultipartResolver放行");return false;

}

System.out.println("commonsMultipartResolver拦截");return super.isMultipart(request);

}

修改springMVC配置文件spring-mvc.xml：

<bean id="multipartResolver"

class="com.tianwen.dcdp.common.CommonsMultiparResolver">

</bean>

5、最后配置上传文件保存目录，修改ueditor配置文件（ueditor_config.json）：

修改如下参数（即配置上传文件的URL路径，若配置不正确，富文本编辑器中将不能正确显示上传的图片）：

"imageUrlPrefix":"",/*图片访问路径前缀*/"imagePathFormat":"/static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/*上传保存路径,可以自定义保存路径和文件名格式*/此处 imagePathFormat之所以配置为如上格式，是因为springMVC中，指定了static目录下的资源为静态资源（其他路径都会被springMVC拦截）。

文件默认保存的物理路径为： web应用根路径+ imagePathFormat。

{yyyy}{mm}{dd}：按天分类保存

{time}{rand:6}：随机生成文件名

另外还有一种简单的解决办法：

1、新建一web工程(ueditor)。

2、将下载下来的ueditor文件拷贝到新建工程的webapps目录下,可参考官网介绍。

3、在使用ueditor的工程中，修改ueditor配置文件（ueditor.config.js）如下：

window.UEDITOR_HOME_URL="";var URL= window.UEDITOR_HOME_URL|| getUEBasePath();/**

*配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。

window.UEDITOR_CONFIG={

//为编辑器实例添加一个路径，这个不能被注释UEDITOR_HOME_URL: URL

//服务器统一请求接口路径

, serverUrl: URL+"jsp/controller.jsp"

3、配置上传文件保存路径，修改（ueditor_config.json）：

"imageUrlPrefix":"",/*图片访问路径前缀*/"imagePathFormat":"/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/*上传保存路径,可以自定义保存路径和文件名格式*/