富文本安装与配置

2021-07-05 10:32:34 阅读：277 来源： 互联网

标签：ueditor 文本编辑 URL 配置 commons result test 文本安装

富文本编辑安装与简介

1、下载并安装富文本编辑器

本文主要采用百度的富文本编辑技术，首先下载富文本编辑器，下载地址：http://ueditor.baidu.com/website/download.html，根据需要下载不同的版本，本文下载的是1.4.3.3 JSP UTF-8的，将下载好的文件复制到项目目录中的webapp/static/components下。

2、引入jar包

将ueditor/jsp/lib目录下的文件ueditor-1.1.2.jar复制到项目项目的lib目录下，此路径可以根据自己的需要放置，在xml中依赖位置做出相应的改变即可。导入目录后，在pom.xml文件中加入依赖:

<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
  			<artifactId>commons-io</artifactId>
  			<version>2.4</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.9</version>
		</dependency>
		<dependency>
		    <groupId>org.json</groupId>
		    <artifactId>json</artifactId>
		    <version>20170516</version>
		</dependency>
		<dependency>
             <groupId>com.baidu.ueditor</groupId>
             <artifactId>ueditor</artifactId>
             <version>1.1.2</version>
             <scope>system</scope>
             <systemPath>${basedir}/lib/ueditor-1.1.2.jar</systemPath>
         </dependency>

3、修改相应配置

将ueditor.config.js文件中的var URL = window.UEDITOR_HOME_URL ||添加相应的路径，如var URL = window.UEDITOR_HOME_URL ||“test/static/components/ueditor/”; 其中test是你的项目名称。

config.json文件中的图片路径根据需要可以做相应的修改，如：

"imageUrlPrefix":"/test"
"imagePathFormat":"/static/components/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

修改配置完成后，启动项目，访问：http://localhost:8080/test/static/components/ueditor/index.html是否配置成功，即访问index.html，不同的项目可能会有不同的路径。

4、应用富文本

富文本在项目中的详细写法可以参照index.html中相关代码，下面主要做简单的写法，首先是jsp文件中:

<script id ="test" name="test" type="text/plain" style="width:100%;height:100%"></script>

然后js文件中：

var testUe = UE.getEditor('test');

function init(url,data,formId){
    $.ajax({
    url:url,
    type:"GET",
    data:data,
    dataType:"application/json",
    success:function(result){
        if(result.code == 200){
            $('#' + formId).form('load', result.body);
             var testUe = UE.getEditor('test');
		     testUe.ready(function() {
				testUe.execCommand('insertHtml', result.body.test); 
				 });
				 queryForm(result.body.apiCode);
        }
    }
    })
}

暂时对富文本的应用就这么多，以后会做相应的补充

标签：ueditor,文本编辑,URL,配置,commons,result,test,文本,安装
来源： https://blog.csdn.net/asxyxxx/article/details/107523572