java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤

  1. 下载 UEditor 最新版
    打开 UEditor 官网(官网网址链接,请点击),进入后如下图
    java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第1张图片
    ,选择下载,进入下载页面,选择jsp最新版本
    java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第2张图片
  2. 解压后,将文件放入项目中。
    如我解压后,将文件名字改为“ueditor”,放入到我的项目中。

在这里插入图片描述
java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第3张图片
3.添加ueditor的相关 jar包
将下载下来的文件中 ueditor\jsp\lib 下有 5 个jar包,将这5个jar包添加到项目构建路径。

java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第4张图片
因为我的项目是 springBoot架构,所以我将jar包添加到项目中是通过maven依赖。步骤如下:(1)在resources 根目录下建立 lib 文件夹,将5个jar包拷入 lib 文件夹下。
java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第5张图片
(2)在pom.xml 文件中添加依赖,图片下面有 添加依赖的代码
java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第6张图片

<!-- 百度ueditor引入本地jar包 --> 
        <dependency>
			<groupId>com.yl.json</groupId>
			<artifactId>json</artifactId>
			<version>1.0</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/src/main/resources/lib/json.jar</systemPath>
        </dependency>
        <dependency>
			<groupId>com.yl.commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/src/main/resources/lib/commons-io-2.4.jar</systemPath>
        </dependency>
        <dependency>
			<groupId>com.yl.commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/src/main/resources/lib/commons-fileupload-1.3.1.jar</systemPath>
        </dependency>
        <dependency>
			<groupId>com.yl.commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.9</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/src/main/resources/lib/commons-codec-1.9.jar</systemPath>
        </dependency>
        <dependency>
			<groupId>com.yl.ueditor</groupId>
			<artifactId>ueditor</artifactId>
			<version>1.1.2</version>
			<scope>system</scope>
			<systemPath>${project.basedir}/src/main/resources/lib/ueditor-1.1.2.jar</systemPath>
		</dependency>

  1. 修改后台配置,即修改 config.json 文件
    修改 ueditor/jsp/config.json 文件,我这里只修改了读取文件的路径前缀,上传的路径没有修改,用的默认的路径。(注意:修改读取文件路径前缀时,要写全,如 localhost/XX/XX 这样的不行,需要写成:http://192.168.1.503:端口/XXX)

java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第7张图片
java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第8张图片
4. 接下来就可以在页面中引用了
一定要在页面中引入几个js,如下图
java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤_第9张图片

  1. 接下来就是在页面中使用了,以及初始化了,很简单就不说了

  2. 如果有问题可以联系本人:扣扣:839785192

你可能感兴趣的:(java项目中使用 UEditor 百度富文本框编辑器,操作详细步骤)