前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ueditor文本编辑器

ueditor文本编辑器

作者头像
JokerDJ
发布2023-11-27 14:45:25
2100
发布2023-11-27 14:45:25
举报
文章被收录于专栏:JokerDJJokerDJ
ueditor文本编辑器

下载地址

jar地址 链接: https://pan.baidu.com/s/1P19vDAAOX4hjSe_HWuJJYg 提取码: uw5c 静态资源地址: 链接: https://pan.baidu.com/s/1mE2xl_LLx6yTt_N8f7jhxw 提取码: qj7n

使用步骤

静态资源导入工程
在这里插入图片描述
在这里插入图片描述
在需要ueditor的页面引入
代码语言:javascript
复制
	<script charset="utf-8" src="../plugins/umedit/ueditor.config.js"</script>
    <script charset="utf-8" src="../plugins/umedit/ueditor.all.min.js"></script>
    <script charset="utf-8" src="../plugins/umedit/lang/zh-cn/zh-cn.js"></script>

示例:

在这里插入图片描述
在这里插入图片描述
在html指定位置中添加富文本
代码语言:javascript
复制
 <div id="editor" name="article_content" style="width:1337px; height: 320px;"></div>
在这里插入图片描述
在这里插入图片描述
在底部初始化富文本
在这里插入图片描述
在这里插入图片描述

初始化完成后

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<script type="text/javascript">
	//初始化富文本编程器
	var ue = UE.getEditor('editor');
	ue.ready(function () {

	});
</script>

配置图片上传

在这里插入图片描述
在这里插入图片描述
引入pom依赖
代码语言:javascript
复制
	  <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>com.fmjava</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.0.0</version>
        </dependency>

        <dependency>
            <groupId>com.fmjava</groupId>
            <artifactId>json</artifactId>
            <version>1.0.0</version>
        </dependency>
其中ueditor和json为自己本地安装Jar包
本地安装方法
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
	mvn install:install-file -DgroupId=com.fmjava -DartifactId=ueditor -Dversion=1.0.0 -Dpackaging=jar -Dfile=ueditor-1.0.0.jar
	mvn install:install-file -DgroupId=com.fmjava -DartifactId=json -Dversion=1.0.0 -Dpackaging=jar -Dfile=json-1.0.0.jar

参数说明 -DgroupId 表示jar对应的groupId

代码语言:javascript
复制
		<groupId>com.fmjava</groupId>

-DartifactId: -DartifactId: 表示jar对应的artifactId

代码语言:javascript
复制
		<artifactId>ueditor</artifactId>

-Dversion -Dversion: 表示jar对应的 version

代码语言:javascript
复制
		<version>1.0.0</version>
配置文件上传

配置文件目录 umedit/jsp/config.json

在这里插入图片描述
在这里插入图片描述

设置图片访问路径前缀 设置为你工程的端口地址

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

SpringMVC配置媒体解析器

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
 <!-- 配置多媒体解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
        <!-- 设定文件上传的最大值5MB,5*1024*1024 -->
        <property name="maxUploadSize" value="5242880"></property>
    </bean>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-11-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ueditor文本编辑器
  • 下载地址
  • 使用步骤
    • 静态资源导入工程
      • 在需要ueditor的页面引入
        • 在html指定位置中添加富文本
          • 在底部初始化富文本
          • 配置图片上传
            • 引入pom依赖
              • 其中ueditor和json为自己本地安装Jar包
                • 本地安装方法
              • 配置文件上传
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档