vue整合ueditor

最新推荐文章于 2024-08-05 17:43:42 发布
最新推荐文章于 2024-08-05 17:43:42 发布
阅读量2k 收藏 14
点赞数 2
分类专栏： vue+element ui 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27928991/article/details/114697494
版权

一、前端代码

Ueditor官网地址为： http://ueditor.baidu.com/website/download.html#ueditor
下载好之后，将Jsp版本解压，解压后文件夹改名为ueditor,将文件夹中的jsp目录删掉，之后将整个ueditor文件夹拷贝到Vue的public目录下，项目结构如下：
在这里插入图片描述

vue中通过npm安装uediter组件

npm i vue-ueditor-wrap -S

将uediter简单封装成一个组件 elUeditor.vue，组件引入、参数配置直接看代码，代码如下：

<template>
    <div>
        <vue-ueditor-wrap :config="myConfig" v-model="content" @ready="ready"></vue-ueditor-wrap>
    </div>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap';
    import userInfoHelper from './token';

    export default {
        name: "elUeditor",
        components: {VueUeditorWrap},
        props: ['value'],
        data() {
            return {
                content: '',
                editor: null,
                myConfig: {
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 工具栏是否可以浮动
                    autoFloatEnabled: false,
                    // 关闭自动保存
                    enableAutoSave: true,
                    // 初始容器高度
                    initialFrameHeight: 900,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口
                    serverUrl: 'system/ueditor/upload?token=' + userInfoHelper.get().token,
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
                    UEDITOR_HOME_URL: '/ueditor/',
                    allowDivTransToP: false,
                    disabledTableInTable: false,
                    toolbars: [
                        [
                            'source', //源代码
                            'undo', //撤销
                            'redo', //重做
                            'formatmatch', //格式刷
                            'bold', //加粗
                            'italic', //斜体
                            'underline', //下划线
                            'strikethrough', //删除线
                            'superscript', //上标
                            'subscript', //下标
                            'justifyleft', //居左对齐
                            'justifyright', //居右对齐
                            'justifycenter', //居中对齐
                            'justifyjustify', //两端对齐
                            'rowspacingtop', //段前距
                            'rowspacingbottom', //段后距
                            'lineheight', //行间距
                            'anchor', //锚点
                            'indent', //首行缩进
                            // 'snapscreen', //截图
                            'fontborder', //字符边框
                            'blockquote', //引用
                            'pasteplain', //纯文本粘贴模式
                            'selectall', //全选
                            'horizontal', //分隔线
                            'removeformat', //清除格式
                            'time', //时间
                            'date', //日期
                            'insertcode', //代码语言
                            'inserttable', //插入表格
                            'insertrow', //前插入行
                            'insertcol', //前插入列
                            'mergeright', //右合并单元格
                            'mergedown', //下合并单元格
                            'deleterow', //删除行
                            'deletecol', //删除列
                            'splittorows', //拆分成行
                            'splittocols', //拆分成列
                            'splittocells', //完全拆分单元格
                            'edittable', //表格属性
                            'edittd', //单元格属性
                            'insertparagraphbeforetable', //"表格前插入行"
                            'deletecaption', //删除表格标题
                            'inserttitle', //插入标题
                            'mergecells', //合并多个单元格
                            'deletetable', //删除表格
                            'customstyle', //自定义标题
                            'fontfamily', //字体
                            'fontsize', //字号
                            'paragraph', //段落格式
                            'simpleupload', //单图上传
                            // 'insertvideo', //视频
                            // 'insertimage', //多图上传
                            'unlink', //取消链接
                            'link', //超链接
                            // 'emotion', //表情
                            'spechars', //特殊字符
                            'searchreplace', //查询替换
                            'map', //Baidu地图
                            'gmap', //Google地图
                            'forecolor', //字体颜色
                            'backcolor', //背景色
                            'insertorderedlist', //有序列表
                            'insertunorderedlist', //无序列表
                            'fullscreen', //全屏
                            'directionalityltr', //从左向右输入
                            'directionalityrtl', //从右向左输入
                            'pagebreak', //分页
                            'insertframe', //插入Iframe
                            'imagenone', //默认
                            'imageleft', //左浮动
                            'imageright', //右浮动
                            // 'attachment', //附件
                            'imagecenter', //居中
                            'wordimage', //图片转存
                            'edittip ', //编辑提示
                            'autotypeset', //自动排版
                            // 'webapp', //百度应用
                            'touppercase', //字母大写
                            'tolowercase', //字母小写
                            'background', //背景
                            'template', //模板
                            'scrawl', //涂鸦
                            'music', //音乐
                            'drafts', // 从草稿箱加载
                            // 'charts', // 图表
                            'cleardoc', //清空文档
                            'preview', //预览
                            'print', //打印
                            'help', //帮助
                        ]
                    ],
                }
            }
        },
        watch: {
            value(val) {
                this.content = val;
            },
            content(val) {
                let text = this.editor ? this.editor.getContentTxt() : "";
                this.$emit('change', val, text);
            }
        },
        mounted() {
            this.content = this.value;
        },
        methods: {
            ready(editorInstance) {
                this.editor = editorInstance;
            },
            insertDefineHtml(html) {
                this.editor.execCommand('inserthtml', html);
            }
        }
    }
</script>

其中 userInfoHelper 是我前端用于获取store中的token信息的，这里根据个人情况更改
组件使用方式：

<template>
    <div class="news">
        <el-ueditor :value="newsData.richText" @change="handleFormChangeContent" ref="uediter" 
        style="width: 676px;display: inline-block"></el-ueditor>
    </div>
</template>

<script>
    import elUeditor from './editor/elUeditor';
    export default {
        name: "News",
        components: {elUeditor},
        data() {
            return {
            }
        },
        methods: {
            handleFormChangeContent(val, text) {
                console.log("富文本:"+val);
                console.log("纯文本:"+text);
            }
        }
    }
</script>

可以通过insertDefineHtml()在光标处编辑插入内容

  this.$refs.uediter.insertDefineHtml('插入的内容....');

二、后端代码

如果编辑器有上传功能的话，还需要做后端配置（后端是java springboot+maven项目）。
在resource创建配置文件ueditorConfig.json，配置文件内容如下：

{
    "imageActionName": "uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imageCompressEnable": true,
    "imageCompressBorder": 1600,
    "imageInsertAlign": "none",
    "imageUrlPrefix": "",
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",


    "scrawlActionName": "uploadscrawl",
    "scrawlFieldName": "upfile",
    "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlMaxSize": 2048000,
    "scrawlUrlPrefix": "",
    "scrawlInsertAlign": "none",

    "snapscreenActionName": "uploadimage",
    "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "snapscreenUrlPrefix": "",
    "snapscreenInsertAlign": "none",

    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage",
    "catcherFieldName": "source",
    "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "catcherUrlPrefix": "",
    "catcherMaxSize": 2048000,
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],

    "videoActionName": "uploadvideo",
    "videoFieldName": "upfile",
    "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoUrlPrefix": "",
    "videoMaxSize": 102400000,
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],

    "fileActionName": "uploadfile",
    "fileFieldName": "upfile",
    "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "fileUrlPrefix": "",
    "fileMaxSize": 51200000,
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ],


    "imageManagerActionName": "listimage",
    "imageManagerListPath": "/ueditor/jsp/upload/image/",
    "imageManagerListSize": 20,
    "imageManagerUrlPrefix": "",
    "imageManagerInsertAlign": "none",
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],

    "fileManagerActionName": "listfile",
    "fileManagerListPath": "/ueditor/jsp/upload/file/",
    "fileManagerUrlPrefix": "",
    "fileManagerListSize": 20,
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ]
}

然后添加controller上传接口，代码如下：

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;

/**
 * Ueditor富文本上传
 */
@RestController
public class UeditorRest extends Logging {

    @Qualifier("domesticOSSService")
    @Autowired
    private OSSService domesticOssService;
    @Autowired
    private BaseConfig.AppConfig appConfig;
    private static final String CONFIG = "config";
    private static final String UEDITOR_IMG_UPLOAD = "uploadimage";
    private static final String UEDITOR_VIDEO_UPLOAD = "uploadvideo";
    private static final String UEDITOR_UPLOAD_URL = "url";
    private static final String URDITOR_UPLOAD_ORIGINAL_FILE_NAME = "original";
    private static final String ACTION = "action";
    private static final String STATE = "state";
    private static final String UEDITOR_CONFIG_FILE = "ueditorConfig.json";
    private static final String UPLOAD_SUCCESS = "SUCCESS";


    /**
     * 获取配置和单图上传
     */
    @RequestMapping(value = "/system/ueditor/upload")
    @LogRecord(businessType = "获取配置和单图上传")
    public void ueditorUploadConfig(@RequestParam(value = "upfile", required = false) MultipartFile file, HttpServletResponse response, HttpServletRequest request) {
        executeUeditor(request, response, file);
    }

    private void executeUeditor(HttpServletRequest request, HttpServletResponse response, MultipartFile file) {
        String action = request.getParameter(ACTION);
        String outStr = null;
        //此处在前端组件初始化的时候会通过上传接口获取配置信息，判断如果是获取配置信息，则返回配置信息
        if (StringUtils.equals(action, CONFIG)) {
            outStr = getUeditorConfig();
        }
        if (StringUtils.equals(action, UEDITOR_IMG_UPLOAD) || StringUtils.equals(action, UEDITOR_VIDEO_UPLOAD)) {
        //文件保存逻辑
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);
            String key = "com/news/" + file.getOriginalFilename() + System.currentTimeMillis() + "." + suffix;
            String bucketName = appConfig.getOssDomesticBucketName();
            boolean result = false;
            JSONObject json = new JSONObject();
            try {
                result = domesticOssService.uploadFile(bucketName, key, file.getBytes());
            } catch (IOException e) {
                json.put(STATE, "上传文件失败");
            }
            AssertUtil.isTrue(result, "上传文件失败");
            String url = domesticOssService.getUrl(bucketName, key);
            url = url.split("\\?")[0];
            //按要求格式返回
            json.put(STATE, UPLOAD_SUCCESS);
            json.put(UEDITOR_UPLOAD_URL, url);
            json.put(URDITOR_UPLOAD_ORIGINAL_FILE_NAME, file.getOriginalFilename());
            outStr = json.toString();
        }

        PrintWriter out;
        try {
            out = response.getWriter();
            if (StringUtils.isNotEmpty(outStr)) {
                out.print(outStr);
            }
        } catch (IOException e) {
            warn("UEditor接口调用发生异常");
        }
    }

    private String getUeditorConfig() {
        StringBuilder config = new StringBuilder();

        try {
            InputStream stream = getClass().getClassLoader().getResourceAsStream(UEDITOR_CONFIG_FILE);
            BufferedReader buff = new BufferedReader(new InputStreamReader(stream));
            String temp;
            while ((temp = buff.readLine()) != null) {
                config.append(temp);
            }
            //把配置文件中的注释去掉
            String configStr = config.toString().replaceAll("/\\*[\\s\\S]*?\\*/", "");
            return JSON.parseObject(configStr).toJSONString();
        } catch (Exception e) {
            warn("获取配置文件失败");
            return null;
        }
    }

}

其中初始化组件的配置请求信息：
在这里插入图片描述
最终效果图：
在这里插入图片描述

杨YY一样一样
关注
专栏目录
Vue集成UEditor（vue-ueditor-wrap）
Superman_peng的博客
09-12 3185
第一步：下载依赖 npm i vue-ueditor-wrap -S 第二步：下载ueditor并将其复制到public目录下 Ueditor下载 下载完成后会发现怎么需要根据官网的Readme.md文档，进行相应操作 执行完上述步骤后，项目下会产生一个dist文件 把utf8-php文件下的所有文件复制到自己的项目的publc目录下的ueditor目录下 第三步：引入到项目中 import VueUeditorWrap from 'vue-ueditor-wrap' 第四步：在模板中使用组件
vue获取编辑器纯文字_vue 整合 vue-ueditor-wrap 富文本编辑器
weixin_30569303的博客
12-31 969
vue整合百度的富文本编辑器材料：vue2.0vue-ueditor-wrap密码：ocd3把下载的压缩包解压 放到你的vue项目的static 里面 并且在里面创建文件夹UEditor在你需要富文本编辑器的页面引入VueUeditorWrap组件importVueUeditorWrapfrom'vue-ueditor-wrap'注册组件：components:{VueUeditorW...
vue ueditor
10-19
vue 文本编辑
Vue集成UEditor puls富文本编辑器
ew45218的博客
08-16 9934
Vue 集成 ueditor-puls 富文本编辑器。用的系统框架是ruoyi-vue若依前后端分离版本。
UEDITOR编辑器+粘贴WORD
最新发布
alisky119的博客
08-05 967
之前网上搜到的方案很少，现在由于HTML5的流行，chrome提供了相关的API，所以在网上也是能够搜到很多方案的，不过99%的方案实际上说的都是同一个方案，也就是借助于HTML5来实现，也就是借助于chrome的API来实现，这个方案的话也是能够满足一般的需求，但是兼容性方面有点问题，不能兼容IE浏览器，我们技术部在对这个方案进行测试的时候发现在有的用户电脑行，有的用户电脑不行，也没找到原因。web富文本编辑器这块他也不是很熟，之前也没怎么用过，然后又在网上找资料，帮他解决各种配置的问题。
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap）
snowball的博客
12-29 1万+
6.2.2.3、body上属性contentEditable显示为true，，设置为false即可禁止编辑。6.2.2.4、在ready方法调用（递归）方法，同时处理ueditor编辑器id后最不为0的情况。7.1、解决section标签没有style、class的问题，否则加了样式也不能生效。4.1、在开发的业务文件引入vue-ueditor-wrap、配置文件。vue项目：ueditor（vue-ueditor-wrap）3.3、vue项目 安装插件vue-ueditor-wrap。
Vue集成ueditor
l974028417的专栏
02-13 986
封装组件 <template> <div> <script id="editor" type="text/plain" style="height:300px;" /> </div> </template> <script> import '../../static/ueditor/ueditor.config.js' import '../../static/ueditor/ueditor.all.js'...
Vue中使用Ueditor
weixin_60148344的博客
04-27 1万+
vue中使用Ueditor编辑器
Spring+Vue整合UEditor富文本实现图片附件上传的方法
08-25
Spring+Vue整合UEditor富文本实现图片附件上传的方法 Spring+Vue整合UEditor富文本实现图片附件上传的方法是指将UEditor富文本编辑器集成到Spring和Vue项目中，以实现图片附件上传的功能。下面将详细介绍这个方法...
vueUeditor:vue 封装ueditor为组件
04-28
Vue Ueditor 是一个基于 Vue.js 框架的插件，用于将著名的富文本编辑器 UEditor 集成到 Vue 项目中。Vue.js 是一个轻量级、高效的前端框架，而 UEditor 是百度开发的一款功能强大的在线文本编辑器，提供了一套完整的...
ueditor 图片上传 java_Spring+Vue整合UEditor富文本实现图片附件上传的方法
05-26
在Vue组件中引入UEditor富文本编辑器，可以使用UEditor官网提供的Vue UEditor Wrapper组件。并在UEditor配置项中设置上传图片的相关参数，如下所示： ``` <vue-ueditor-wrap v-model="content" :config=...
vue2集成百度ueditor
08-12
vue2集成百度ueditor
详解vue.js+UEditor集成 [前后端分离项目]
10-19
本篇文章主要介绍了详解vue.js+UEditor集成 [前后端分离项目] ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中集成ueditor
qq_34412985的博客
09-10 134
npm install --save vue-ueditor-wrap
vue项目整合UEditor看这一篇就够了
热门推荐
峰晨的博客
08-01 1万+
前言 vue整合UEditor的需求，在整合过程中遇到不少问题，关于这方面在网上的资料也不少，但是没有一个能解决问题，在开发的过程中，几乎所有的问题能出现的都遇到了，比如图片上传提示没有后端服务配置，比如我加的控件就是显示不出来等， 这也是我写这篇博文的初衷，从项目环境到配置，到解决问题，先说思路，最后贴上关键代码，如果你也有这样的需求或者问题，请耐心看完，会给你更多的帮助。 项目环境 前后端分离 后端springboot 前端vue2.x + elementui， 请求代理 后端接口地址是127.0.0
vue3集成ueditor 并将内容同步展示到第三方 详细过程
m0_61133767的博客
02-23 1572
在新的ueditor.all.min.js（也就是重命名之前的ueditor.all.js，此时最原始的ueditor.all.min.js已被删除）这个文件，15279行（可能每个人由于ueditor下载的版本不一样，所以行数不一样，建议搜索domUtils.on(iframe, 'load', callback)，直接定位），把这三行注释掉。需求是点编辑，弹出一个窗口，窗口中是ueditor，在ueditor中编辑上图中的描述信息，然后存到数据库，接下来在unity程序中拉取描述信息并展示。
vue.js+UEditor集成 前后端分离
chubolei9992的博客
07-07 944
后端DEMO：https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO：https://github.com/coderliguoqing/ueditor-web 预览地址：https://coderliguoqing.githu...
vue项目添加百度富文本编辑器（ueditor）
sgjy_15522801752的博客
05-17 1886
只能解决两个弹层切换赋值的问题。并不能解决添加弹窗里面添加了内容，再次打开新增清空上次输入值的问题。导致这个问题出现是因为：vue为双向绑定的，一开始添加了watch监听默认的。第二步：把你的下载的富文本添加到项目中，然后在main.js中引用相关。第三步：把ueditor分装成组件便于以后使用。在关闭弹窗的时候把值清空一下。下面使用方式，我就不再写了，懒。下面说一下逻辑页面的实现。介绍一个写的比较详细的。
Spring+Vue整合UEditor：富文本图片附件上传的安全机制
"实现原理及安全机制-spring+vue整合ueditor富文本实现图片附件上传的方法" 本文主要讨论了如何在Spring和Vue.js框架下结合ueditor富文本编辑器实现图片和附件的上传功能，以及相关的安全机制。ueditor是一款常用的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值