前端

安装vue-ueditor-wrap

npm i vue-ueditor-wrap

引入并注册VueUeditorWrap组件,配置组件属性

<script>
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
export default {name: 'Ueditor',components: {VueUeditorWrap},data () {return {msg: '',myConfig: {// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 500,// 初始容器宽度initialFrameWidth: '100%',// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）serverUrl: '//localhost:9000/ueditor/server',// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2UEDITOR_HOME_URL: '/static/ueditor/'}}}
}
</script>

页面引用，注意:config

<template><div><h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue  UEditor + Spring Boot演示</h2><hr/><div  class="preview" v-html="msg"></div><vue-ueditor-wrap v-model="msg" :config="myConfig" ></vue-ueditor-wrap></div></template>

引入百度ueditor

前端效果演示

后端核心代码

/*** @ClassName UeditorController* @Description TODO* @Author lxt* @Date 2021/7/22 22:21*/
@Slf4j
@RequestMapping("/ueditor")
@Controller
public class UeditorController {@Value("${lxt.server}")private String server;//用户名private String userName = "admin";// 模拟数据库 存储已上传的图片资源，userName 模拟用户标识为key分类private final Map<String, UeditorOnlineImage> imageMap = new ConcurrentHashMap<>();private void add(Ueditor ueditor,String id){UeditorOnlineImage ueditorOnlineImage = imageMap.get(id);if(ueditorOnlineImage == null){ueditorOnlineImage = new UeditorOnlineImage();ueditorOnlineImage.setState(Ueditor.ACTION_SUCCESS);}UeditorImage ueditorImage = new UeditorImage();ueditorImage.setMtime(LocalDateTime.now().toInstant(ZoneOffset.of("+8")).toEpochMilli());ueditorImage.setUrl(ueditor.getUrl());ueditorOnlineImage.getList().add(ueditorImage);imageMap.put(id,ueditorOnlineImage);}/*** @Description: 富文本编辑器服务端* @param action* @param callback 回调参数* @param upfile* @return: java.lang.Object* @Author: lxt* @Date: 2021/7/22 23:51*/@RequestMapping(value="/server")@ResponseBodypublic Object server(String action, String callback, MultipartFile upfile){Object result = null;switch (action){case Ueditor.ACTION_CONFIG:result = callback+"("+Ueditor.UEDITOR_CONFIG+")";break;case Ueditor.ACTION_UPLOADIMAGE:Ueditor ueditor = uploadFile(upfile);// 存储图片add(ueditor,userName);result = ueditor;break;case Ueditor.ACTION_UPLOADVIDEO:result = uploadFile(upfile);break;case Ueditor.ACTION_LISTIMAGE:result = callback+"("+ JSONObject.toJSONString(imageMap.get(userName))+")";break;default:}return result;}private Ueditor uploadFile(MultipartFile upfile){Ueditor ueditor = new Ueditor();ueditor.setState(Ueditor.ACTION_SUCCESS);try{//上传文件String filePath = server+FileUtil.INSTANCE.uploadFile(upfile);ueditor.setUrl(filePath);ueditor.setTitle(upfile.getName());ueditor.setOriginal(upfile.getOriginalFilename());}catch (Exception e){ueditor.setState(Ueditor.ACTION_FAIL);log.error(e.getMessage(),e);}return ueditor;}
}

效果展示

初始化界面

图片上传

多图上传

多图上传-在线管理

视频上传

源码

传送门：Github地址

Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例（附带完整源码）相关推荐

百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址说明: 支持 vue-cli 2.x 支持 ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
html页面引入富文本编辑器,Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
百度富文本编辑器ueditor插入html代码
记录工作中遇到的问题需求: 文本编辑器左侧展示模板,点击左侧模板将模板展示到富文本编辑器内. 代码: // 点击模板时添加到编辑器内 $(".templates-con ul li&qu ...

Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例（附带完整源码）

前端

安装vue-ueditor-wrap

引入并注册VueUeditorWrap组件,配置组件属性

页面引用，注意:config

引入百度ueditor

前端效果演示

后端核心代码

效果展示

初始化界面

图片上传

多图上传

多图上传-在线管理

视频上传

源码

Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例（附带完整源码）相关推荐

最新文章

热门文章