富文本编辑器Ueditor的简单使用

前端

1.先安装uditor，安装成功后引入，就可以使用了：

<vue-ueditor-wrap v-model="projectLog.remarks" :config="myConfig"></vue-ueditor-wrap><script type="text/javascript">export default {components: {VueUeditorWrap},data() {return {myConfig: {// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 400,// 初始容器宽度initialFrameWidth: '100%',// 上传文件接口serverUrl: 'http://120.27.242.17:8082/config',// UEditor 资源文件的存放路径，在后端UEDITOR_HOME_URL: 'http://120.27.242.17:8082/admin/ueditor/'}}}}
<script>

到这里前端就配置完成了

后端

1.下载jsp版本的ueditor，然后放到项目\src\main\resources\static\admin下

2.后端config接口（单独用一个类来写）：

@Controller
@CrossOrigin
@EnableConfigurationProperties(UeditorProperties.class)
public class UeditorController {@Autowiredprivate UeditorProperties ueditorProperties;/*** 百度Ueditor图片上传* @param request* @param response*/@RequestMapping(value = "/config")public void config(HttpServletRequest request, HttpServletResponse response) {response.setContentType("application/json");//String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/admin/ueditor/jsp";String rootPath = "/www/wwwroot/target/classes/static/admin/ueditor/jsp";  //指明这是绝对路径，写法必须是这个格式（target包下到jsp目录）System.out.println(rootPath);try{response.setCharacterEncoding("UTF-8");String exex = new ActionEnter(request, rootPath).exec();System.out.println(exex);PrintWriter printWriter = response.getWriter();printWriter.write(new ActionEnter(request, rootPath).exec());printWriter.flush();printWriter.close();} catch (Exception e) {e.printStackTrace();}}
}

3.最后改一个配置文件ueditor的/jsp/config.json

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

4.文件上传后路径就是http://120.27.242.17:80/admin/ueditor/jsp/upload/image/{time}{rand:6}

富文本编辑器Ueditor的简单使用相关推荐

富文本编辑器Ueditor实战（二）-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
java集成富文本编辑器UEditor
JAVA集成富文本编辑器UEditor 集成前说明集成UEditor 一.UEditor下载二.UEditor迁入项目三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址说明: 支持 vue-cli 2.x 支持 ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
富文本编辑器——UEditor的使用——基础积累
富文本编辑器--UEditor的使用--基础积累之前在做后台管理系统时,遇到了一个富文本编辑器的功能,用于新闻内容的编辑. 话不多说,直接上效果图: 全屏的效果及对应的功能菜单如下: 上面的菜单已经 ...

富文本编辑器Ueditor的简单使用

前端

后端

富文本编辑器Ueditor的简单使用相关推荐

最新文章

热门文章