Vue集成百度的Ueditor 前端+后台

1. vue安装命令**

npm i vue-ueditor-wrap

2. 下载插件**

Ueditor官网地址为：Ueditor

3. 插件位置**

下载好之后，将Jsp版本解压，解压后文件夹改名为UEditor
将文件夹中的 jsp目录删掉，将UEditor文件夹拷贝到Vue的 public 目录下，结构如下：

4. vue页面使用（myConfig可以不设置toolbars 显示全部功能）

<template><div><vue-ueditor-wrap v-model="funcDesc" :config="myConfig" @ready="onEditorReady" /></div>
</template><script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {components: { VueUeditorWrap },data() {return {funcDesc：“123”,myConfig: {// 如果需要上传功能,找后端小伙伴要服务器接口地址//serverUrl: "//ueditor.szcloudplus.com/cos",//headers: { Authorization: 'Bearer ' + getToken() },serverUrl: process.env.VUE_APP_BASE_API + '/ueditor/controller',// 你的UEditor资源存放的路径,相对于打包后的index.htmlUEDITOR_HOME_URL: '/UEditor/',// 编辑器不自动被内容撑高autoHeightEnabled: false,// 工具栏是否可以浮动autoFloatEnabled: false,// 初始容器高度initialFrameHeight: 500,// 初始容器宽度initialFrameWidth: '100%',// 关闭自动保存enableAutoSave: true,zIndex: 2300,toolbars: [['fontfamily', //字体'fontsize', //字号'forecolor', //字体颜色'bold', //加粗'backcolor', //背景色'paragraph', //段落格式'customstyle', //自定义标题'inserttitle', //插入标题'simpleupload', //单图上传'attachment', //附件'justifyleft', //居左对齐'justifycenter', //居中对齐'justifyright', //居右对齐'justifyjustify', //两端对齐'indent', //首行缩进'lineheight', //行间距'italic', //斜体'underline', //下划线'strikethrough', //删除线'fontborder', //字符边框'formatmatch', //格式刷'blockquote', //引用'pasteplain', //纯文本粘贴模式'selectall', //全选'preview', //预览'horizontal', //分隔线'removeformat', //清除格式'unlink', //取消链接'insertrow', //前插入行'insertcol', //前插入列'mergeright', //右合并单元格'mergedown', //下合并单元格'splittocells', //完全拆分单元格'deletecaption', //删除表格标题'mergecells', //合并多个单元格'deletetable', //删除表格'edittable', //表格属性'edittd', //单元格属性'link', //超链接'emotion', //表情'spechars', //特殊字符'insertvideo', //视频'insertorderedlist', //有序列表'insertunorderedlist', //无序列表'fullscreen', //全屏'rowspacingtop', //段前距'rowspacingbottom', //段后距'imagenone', //默认'imageleft', //左浮动'imageright', //右浮动'imagecenter', //居中'edittip ', //编辑提示'autotypeset', //自动排版'touppercase', //字母大写'tolowercase', //字母小写'background', //背景'inserttable', //插入表格]],},}}methods: {onEditorReady(editor) {console.log(editor)},}</script>

java后台代码

package com.ruoyi.common.fileUpload;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.ruoyi.common.utils.file.FileUploadUtils;
import com.ruoyi.framework.config.RuoYiConfig;
import com.ruoyi.framework.config.ServerConfig;
import com.ruoyi.framework.web.controller.BaseController;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ClassPathResource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;/*** @Author 小灰灰* @Description Ueditor 请求处理 ,注意是否请求拦截* @Date  2022/7/18 12:13**/@SuppressWarnings("serial")
@Controller
@RequestMapping("/ueditor")
public class UeditorController extends BaseController {private final String METHOD_HEAD = "ueditor";private final String IMGE_PATH = "/ueditor/images/";private final String VIDEO_PATH = "/ueditor/videos/";private final String FILE_PATH = "/ueditor/files/";@Autowiredprivate ServerConfig serverConfig;/*** ueditor*/@ResponseBody@RequestMapping(value = "/controller")public Object ueditor(HttpServletRequest request, @RequestParam(value = "action", required = true) String action,MultipartFile upfile) throws Exception{List<Object> param = new ArrayList<Object>(){{add(action);add(upfile);}};Method method = this.getClass().getMethod(METHOD_HEAD + action, List.class, String.class);return method.invoke(this.getClass().newInstance(), param, serverConfig.getUrl());}/*** 读取配置文件*/public JSONObject ueditorconfig(List<Object> param, String fileSuffixUrl) throws Exception{ClassPathResource classPathResource = new ClassPathResource("ueditor-config.json");String jsonString = new BufferedReader(new InputStreamReader(classPathResource.getInputStream())).lines().parallel().collect(Collectors.joining(System.lineSeparator()));JSONObject json = JSON.parseObject(jsonString, JSONObject.class);return json;}/*** 上传图片*/public JSONObject ueditoruploadimage(List<Object> param, String fileSuffixUrl) throws Exception{JSONObject json = new JSONObject();json.put("state", "SUCCESS");json.put("url", ueditorcore(param, IMGE_PATH, false, fileSuffixUrl));return json;}/*** 上传视频*/public JSONObject ueditoruploadvideo(List<Object> param, String fileSuffixUrl) throws Exception{JSONObject json = new JSONObject();json.put("state", "SUCCESS");json.put("url", ueditorcore(param, VIDEO_PATH, false, fileSuffixUrl));return json;}/*** 上传附件*/public JSONObject ueditoruploadfile(List<Object> param, String fileSuffixUrl) throws Exception{JSONObject json = new JSONObject();json.put("state", "SUCCESS");json.put("url", ueditorcore(param, FILE_PATH, true, fileSuffixUrl));return json;}public String ueditorcore(List<Object> param, String path, boolean isFileName, String fileSuffixUrl)throws Exception{MultipartFile upfile = (MultipartFile) param.get(1);// 上传文件路径String filePath = RuoYiConfig.getUploadPath();String fileName = FileUploadUtils.upload(filePath, upfile);String url = fileSuffixUrl + fileName;return url;}
}

Vue集成百度的Ueditor 前端+后台相关推荐

Vue集成百度的Ueditor的前后端实现
找了很多写过的文章,也具体试验过都写的不太完整,这款编辑器借用Vue提供的语法糖实现了数据的双向绑定,不用你自己去getContent或setContent. 对比其他的富文本编辑器,Ueditor的 ...
springboot 集成百度编辑器ueditor
最简单的方式集成百度编辑器 1.下载百度编辑器源码 2. springboot静态资源配置在resources下面.将ueditor的静态资源放入项目中如: 我的资源路径为:/resources/js ...
vue集成百度地图(含搜索框获取经纬度)
vue-baidu-map文档地址 https://dafrok.github.io/vue-baidu-map/#/zh/index 第一步:vue下载百度地图插件 npm install vue- ...
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
使用百度编辑器--ueditor，后台接收提交编辑的内容，HTML不见了，赋值不了，赋值之后，html暴露出来了？？...
1.提交编辑好的内容, 后台post 接收发现 html 不见了,这个时候也许就是转义的问题, 既可以试试 $content = htmlspecialchars(stripslashes(input ...
vue 调用百度的UEditor富文本编辑器，本地运行没问题，打包后工具栏显示出错
首先说下ueditor插件存放位置问题出现的原因 udditor.config.js中基础路径配制错误修改如下将基本路径,从static为首的绝对路径修改为相对路径,即修改如下 window.U ...
前端Vue项目如何集成百度地图实现地图选址功能
文章目录前言一.实现效果图二.准备工作 2.1.注册百度地图开发者账号 2.2.创建应用三.实现步骤 1. 引用百度地图API文件 2. 新增地图选址组件 3. 使用组件总结参考文章前言 ...
百度编辑器如何在html引入,网页制作中如何集成百度Ueditor网页编辑器
开发项目必不可少用到在线网页编辑器,常用的网页编辑器有: eWebEditor 网页编辑器.Fckeditor 网页编辑器.KindEditor HTML在线编辑器.百度Ueditor编辑器-- 百度 ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...

Vue集成百度的Ueditor 前端+后台

Vue集成百度的Ueditor 前端+后台相关推荐

最新文章

热门文章