vue-ueditor-wrap的安装、封装、使用

最新推荐文章于 2024-05-16 15:39:50 发布
最新推荐文章于 2024-05-16 15:39:50 发布
阅读量3.2k 收藏 4
点赞数
分类专栏： java 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lf_78910jqk/article/details/127870831
版权

文章目录

安装 vue ueditor

命令

npm install vue-ueditor-wrap

下载已处理的 UEditor

本文以jsp版本为例

将下载的压缩包解压后重命名为 UEditor ，放入 vue 项目的 public 文件夹中，如下图所示：
在这里插入图片描述
将 jsp/config.json 中的内容放入 ueditor.config.js ，放在 toolbars 之后即可：

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

修改配置中的上传文件的名称以及 action

此处上传文件名称即为 发起请求是传文件参的参数名称， 一定要与上传接口对应上！

action 即 url 后缀的 /?action=uploadimage 此样式

同时也要注意配置文件中的访问路径前缀

上传接口注意事项

UEditor 要求上传接口返回的参数中包含 state , url , title , original

  • 当返回的 state 为 SUCCESS 时，即为上传成功，表示上传的状态

  • url 表示该文件真实的 url 地址

  • title 代表该文件在标签中的 title 字段

  • original 代表该文件在标签中的 alt 字段

Controller 例子：

其中包含了自己项目中的内容，这仅仅是一个展示返回字段的例子

@PostMapping("/uploadTest")  
public String uploadFileTest(MultipartFile file) throws Exception {  
    try {  
        // 上传文件路径  
        String filePath = NiuaConfig.getUploadPath();  
        // 上传并返回新文件名称  
        String fileName = FileUploadUtils.upload(filePath, file);  
        String url = serverConfig.getUrl() + fileName;  
        redisTemplate.opsForValue().set("uploadUrl", url);  
        ObjectMapper mp = new ObjectMapper();  
        UEResJson neo = new UEResJson();  
        neo.setState("SUCCESS");  
        neo.setUrl(url); // url  
        neo.setTitle(fileName); // title  
        neo.setOriginal(fileName); // alt  
  
        String str = mp.writeValueAsString(neo);  
  
        return str;  
    } catch (Exception e) {  
        return "";  
    }  
}

该实体类中，除此之外，也可选 type , size 字段

import lombok.Data;  
  
import java.io.Serializable;  
  
@Data  
public class UEResJson implements Serializable {  
  
    private String state;  
  
    private String url;  
  
    private String title;  
  
    private String original;  
  
}

封装 UE 子组件

在 components 文件夹中新建 UEditor 文件夹，并在其中创建 UE.vue 文件
在这里插入图片描述
UE.vue 内容如下：

注意 config 中的 UEDITOR_HOME_URL 以及 serverUrl

UEDITOR_HOME_URL 即下载的配置文件的路径

serverUrl 即上传模块的通用接口

<template>  
    <div>  
        <VueUeditorWrap  v-model="content" :config="config"></VueUeditorWrap>  
        <el-button typeof="primary" @click="showContent()">Get UE Content</el-button>  
    </div>  
</template>  
  
<script>  
  
import VueUeditorWrap from 'vue-ueditor-wrap'  
import {getToken} from "@/utils/auth";  
export default {  
    name: "UE",  
    components: {  
        VueUeditorWrap,  
    },  
    data() {  
        return {  
        }  
    },  
    methods: {  
        showContent() {  
            alert(this.content);  
        },  
    },  
    props: {  
        content: {  
            type: String,  
            default: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定!+!$#</h2>'  
        },  
        config: {  
            type: Object,  
            default: () => ({  
                UEDITOR_HOME_URL: "/UEditor/",  
                serverUrl: "/v1/admin/common/uploadTest",  
                headers: {  
                    Authorization: "Bearer " + getToken(),  
                },  
                // 编辑器不自动被内容撑高  
                autoHeightEnabled: false,  
                // 初始容器高度  
                initialFrameHeight: 500,  
                // 初始容器宽度  
                initialFrameWidth: '100%',  
                lang:'zh-cn'  
            })  
        },  
    }  
}  
  
</script>  
  
<style scoped>  
  
</style>

在父组件中使用 UE 子组件

直接使用

<template>
	<div>
		<UE></UE>
	</div>
</template>

<script>
import UE from "@/components/UEditor/UE"
export default {  
    components: {  
        UE  
    },
}
</script>
  
<style>  
</style>

修改子组件中的默认内容

<template>
	<div>
		<UE :content="myContent" :config="myConfig"></UE>
	</div>
</template>

<script>
import UE from "@/components/UEditor/UE"
export default {  
    components: {  
        UE  
    },
    data() {
	    return {
		    myContent: 'init content',
		    myConfig: {  
	            type: Object,  
	            default: () => ({  
	                UEDITOR_HOME_URL: "/UEditor/",  
	                serverUrl: "/v1/admin/common/uploadTest",  
	                headers: {  
	                    Authorization: "Bearer " + getToken(),  
	                },  
	                // 编辑器不自动被内容撑高  
	                autoHeightEnabled: false,  
	                // 初始容器高度  
	                initialFrameHeight: 500,  
	                // 初始容器宽度  
	                initialFrameWidth: '100%',  
	                lang:'zh-cn'  
	            })  
	        }, 
	    }
    }
}
</script>
  
<style>  
</style>

可能遇到的问题

视频问题

上传视频成功后，视频的样式显示为以下时，为正常状态，可在预览模式下播放该视频。
在这里插入图片描述
如果要在编辑时使该视频可播放，进行如下操作：

注意：此操作会导致视频不可修改大小，可能出现无法选中视频、无法删除视频、视频之后的内容无法编辑等情况；请谨慎使用！

以下操作均可只修改 ueditor.all.js 之后 使用 uglifyjs 工具 将其压缩为 ueditor.all.min.js
后进行替换，此时不必修改 ueditor.all.min.js，推荐使用该方法

uglifyjs 安装及使用

npm install uglify-js

uglifyjs ueditor.all.js -m -o ueditor.all.min.js

  • ueditor.all.min.js
  1. 搜索 ueditor.all.min.js ，查询 UE.htmlparser , this.filterInputRule , toHtml 这些内容紧邻的三行， (查询以下内容即可)
a = UE.htmlparses(a);
this.filterInputRule(a);
a = a.toHtml();
  1. 搜索 edui-upload-video video-js vjs-default-skin 内容，找到类似以下内容的一行：
for (var k, m = c.length; a < m; a++) 
	k = c [a], 
l = "upload" == h ? "edui-upload-video video-js vjs-default-skin" : "edui-faked-video", 
g.push (d (k.url, k.width || 420, k.height || 280, "tmpVedio" + a, null, l, "image"));

将最后的 image 改为 video 即可

  • ueditor.all.js
  1. 搜索 var root = UE.htmlparser(html) ，注释以下三行内容
//var root = UE.htmlparser(html);
//me.filterInputRule(root);
//html = root.toHtml();

搜索 html.push (creatInsertStr (vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));
将最后的 image 改为 video 即可

  1. 搜索 creatInsertStr

找到 var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'image':'video');

将最后的 image 改为 video 即可

header 问题

如果在上传过程中需要传 header，则进行以下操作：

点击上传的 header 已经在修改后的版本内置了，只需修改拖拽上传的即可，这里仅展示修改 ueditor.all.js

修改后记得压缩为 ueditor.all.min.js

  1. 在 ueditor.all.js 中搜索 UE.plugin.register('autopuload', function (){ }在此函数中，找到以下内容
var xhr = new XMLHttpRequest(),  
    fd = new FormData(),  
    params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',  
    url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);  

fd.append(fieldName, file, file.name || ('blob.' + file.type.substr('image/'.length)));  
fd.append('type', 'ajax');  
xhr.open("post", url, true);  
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

在此之后插入

// <++>  
if(me.options.headers && Object.prototype.toString.apply(me.options.headers) === "[object Object]"){  
    for(var key in me.options.headers){  
        xhr.setRequestHeader(key, me.options.headers[key])  
    }  
}  
// <++>

得到

var xhr = new XMLHttpRequest(),  
    fd = new FormData(),  
    params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',  
    url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);  
  
fd.append(fieldName, file, file.name || ('blob.' + file.type.substr('image/'.length)));  
fd.append('type', 'ajax');  
xhr.open("post", url, true);  
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");  
// <++>  
if(me.options.headers && Object.prototype.toString.apply(me.options.headers) === "[object Object]"){  
    for(var key in me.options.headers){  
        xhr.setRequestHeader(key, me.options.headers[key])  
    }  
}  
// <++>  
xhr.addEventListener('load', function (e) {

在 ueditor.all.js 中搜索 UE.ajax = function() { 在此函数中，找到以下内容

var method = ajaxOpts.method.toUpperCase();  
var str = url + (url.indexOf("?")==-1?"?":"&") + (method=="POST"?"":submitStr+ "&noCache=" + +new Date);  
xhr.open(method, str, ajaxOpts.async);  
xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
        if (!timeIsOut && xhr.status == 200) {  
            ajaxOpts.onsuccess(xhr);  
        } else {  
            ajaxOpts.onerror(xhr);  
        }  
    }  
};

在此之后插入

// <++>  
xhr.setRequestHeader("Authorization", localStorage.getItem('Token'));  
// <++>

得到

var method = ajaxOpts.method.toUpperCase();  
var str = url + (url.indexOf("?")==-1?"?":"&") + (method=="POST"?"":submitStr+ "&noCache=" + +new Date);  
xhr.open(method, str, ajaxOpts.async);  
xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
        if (!timeIsOut && xhr.status == 200) {  
            ajaxOpts.onsuccess(xhr);  
        } else {  
            ajaxOpts.onerror(xhr);  
        }  
    }  
};  
// <++>  
xhr.setRequestHeader("Authorization", localStorage.getItem('Token'));  
// <++>  
if (method == "POST") {  
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
    xhr.send(submitStr);  
} else {  
    xhr.send(null);  
}
挨打且不服66
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-ueditor-wrap安装、封装及使用
baizeyv的博客
07-22 2616
vue-ueditor-wrap安装 并将其封装为自己的vue components 以及对封装后的组件的使用 ueditor中上传功能的调试及问题解决
使用vue-ueditor-wrap组件时导入的百度ueditor资源包
05-22
使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用...
2024年前端最新通过cdn和vue，前端开发培训零基础
yjqdn82212的博客
05-07 170
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
探索Vueditor：一款强大的Vue.js富文本编辑器
gitblog_00032的博客
04-14 455
探索Vueditor：一款强大的Vue.js富文本编辑器 项目地址:https://gitcode.com/hifarer/vueditor Vueditor 是一个基于Vue.js框架构建的现代化、轻量级且高度可定制的富文本编辑器。它旨在提供给开发者简单易用的接口，以快速集成到他们的Vue项目中，为用户提供流畅的编辑体验。 技术分析 Vue.js 驱动：Vueditor充分利用了Vue的响应...
Vue集成UEditor（vue-ueditor-wrap）_ueditor vue-uwditor-wrap(1)
最新发布
2401_84620100的博客
05-16 454
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react和Vue的原理，区别，亮点，作用。
Vue3富文本组件UEditor ，vue-ueditor-wrap@3.x
天马3798
02-05 1459
3.使用 v-model 绑定属性。2.0版本跟3.0版本不兼容。2.全局引入 ，注册组件。
vue-ueditor-wrap UEditor资源包
03-14
帮助想要使用vue-ueditor-wrap的伙伴们更便捷的获取到这个资源运行项目
vue项目中使用vue-ueditor-wrap
weixin_38822843的博客
03-28 1万+
vue项目中使用vue-ueditor-wrap
vue中富文本编辑器 vue-ueditor-wrap 的使用
茉莉蜜茶~~~
12-17 6213
最近的vue项目中用到了编辑器，刚开始使用的wangeditor，但后来由于满足不了更多的需求，现换成了百度的UEditor，踩了很多坑，现在记录一下 1.下载UEditor相关静态文件 链接：https://pan.baidu.com/s/15bUMrmCBt8I69P4lzNZtIA 提取码：5ybv 2.修改UEditor目录 并引入项目 顺利解压完之后，将文件直接放到到项目的public文件中。 下载完之后，还会有ueditor.all.js和ueditor.parse.js方便查看源代码（我这.
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常用的文本编辑器vue-ueditor-wrap使用总结
热门推荐
qq_40180411的博客
08-30 4万+
项目地址：https://github.com/HaoChuan9421/vue-ueditor-wrap/blob/master/public/UEditor/ueditor.config.js 一、安装依赖： 首先在前端项目Terminal中执行以下命令： 如果你没安装yarn就用npm（第一条命令），安装过yarn就用(第二条命令)：简单测试安装yarn与否，可以在Terminal输入...
vue-ueditor-wrap的ueditor
01-12
富文本文本编辑器vue-ueditor-wrap需要下载ueditor，并将其复制到public目录下
vue-ueditor-wrap：:person_biking:Vue+:high-speed_train:UEditor+ v-模型双向绑定:rocket:https：haochuan9421.github.iovue-ueditor-wrap-demo
02-06
Vue-Ueditor-Wrap Vue + UEditor + v-model双向绑定。UEditor仍然是内部使用频率较高的富文本编辑器，而Vue又具有广泛的使用，将结合，是很多Vue开发者的切实需求。自己在写公司项目时封装了这个组件，它省去了初始...
vue-ueditor-wrap-demo:基于vue-cli的演示，用于vue-ueditor-wrap
05-01
Vue-Ueditor-Wrap-Demo 基于vue-cli的演示，用于 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build ...
vue-quill-editor和vue-ueditor-wrap富文本编辑器应用
qq_44930306的博客
03-22 1510
vue2项目中的两个编辑器应用
vue-ueditor-wrap 使用总结
Ccfitch的博客
07-26 7365
关于vue-ueditor-wrap的使用，网上有大量的介绍，这里也会简单阐述一下。此次发稿，主要是因为项目中遇到一个问题，就是如何在vue-ueditor-wrap内容光标位置插入文本内容，网上查了很多资料，没有找到完全正确的。网上有些关于ueditor光标位置插入文本的方法，但是并不适用于vue-ueditor-wrap，其实原理是一样的，不过获取实例需要做一下改变。 1. 安装 npm i vue-ueditor-wrap # 或者 yarn add vue-ueditor-wrap 2.
vue-ueditor-wrap富文本编辑器。
CCKing7的博客
04-20 1009
2.下载最新编译的UEditor,并放到public目录下。1.上传文件地址serverUrl需配置，不然会报错。3.引入并注册VueUeditorWrap组件。
vue-ueditor-wrap 是什么？怎么使用？
轻风细雨_林木木
01-18 1373
是什么一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。UEditor 并不支持通过 npm 的方式来安装，也只是一个 Vue 组件，组件本身并不是 UEditor 的 Vue 版。
vue常用的文本编辑器vue-ueditor-wrap
daming2019的博客
10-28 3152
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分
vue3 怎么封装vue-ueditor-wrap
11-16
为了封装vue-ueditor-wrap，可以按照以下步骤进行操作： 1.安装vue-ueditor-wrap和ueditor ```shell npm install vue-ueditor-wrap ueditor --save ``` 2.在main.js中引入ueditor ```javascript import Vue from 'vue' import App from './App.vue' import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' Vue.component('u-editor', UEditor) new Vue({ el: '#app', render: h => h(App) }) ``` 3.在组件中使用vue-ueditor-wrap ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4.封装vue-ueditor-wrap为一个独立的组件 ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' export default { name: 'VueUeditorWrap', components: { UEditor }, props: { value: { type: String, default: '' } }, data() { return { content: this.value } }, watch: { value(val) { this.content = val }, content(val) { this.$emit('input', val) } } } </script> ``` 5.在其他组件中使用封装好的vue-ueditor-wrap组件 ```vue <template> <div> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from './VueUeditorWrap.vue' export default { components: { VueUeditorWrap }, data() { return { content: '' } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值