本文主要介绍将vue集成到一个支持图片缩放和拖动的富文本编辑器中，帮助大家更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
需求：
根据业务需求，你需要能够上传图片，上传的图片在移动终端上可以占据全屏宽度，所以你需要能够等比例缩放上传的图片，你还需要能够拖动、缩放和改变图片的大小。尝试了几个第三方的富文本编辑器，很难找到一个完全符合你要求的。经过多次尝试，最终选择了wangEditor富文本编辑器。一开始用的是vue2Editor的富文本编辑器。vue2Editor本身不支持图片拖动，但是提供了一种可配置的图片拖动方法，需要借助Quill.js来实现图片拖动。虽然满足了业务需求，但是在移动端的显示效果不是很理想。这一次，编辑器主要需要在移动终端上显示上传的富文本。为了达到预期的效果，它需要能够修改图像的百分比。当img标签的width属性设置为100%时，可以满足需求。最近wangEditor的一个新版本(4版)可以满足需求，最后被选中进行实用开发。
效果图：
代码和相关配置如下：
安装插件
npm i编辑器-保存
//或者
纱线添加王编辑器
编辑器配置
模板
‘ w_editor ‘
！-富文本编辑器-
div id=’w_view’/div
/div
/模板
脚本
//引入富文本
从“wangeditor”导入WE；
//引入elementUI消息模块(用于提示信息)
从“element-ui”导入{ Message }；
导出默认值{
名称：’ WEditor ‘，
道具：{
//默认值
defaultText: { type: String，默认值：’ ‘ }，
//富文本更新的值
richText: { type: String，默认值：’ ‘ }
},
data() {
返回{
//编辑器实例
编辑：null，
//富文本菜单选项配置
菜单项：[
‘头部’，
粗体’，
字体大小’，
字体名称’，
斜体’，
下划线’，
缩进’，
‘行高’，
前景色’，
背景色’，
链接’，
列表’，
对齐’，
图像’，
‘视频’
]
};
},
观察：{
//监听默认值
defaultText(nv，ov) {
如果(nv！=”) {
this . editor . txt . html(NV)；
这个。$emit(‘update:rich-text ‘，NV)；
}
}
},
已安装(){
this . init editor()；
},
方法：{
//初始化编辑器
initEditor() {
//获取编辑器dom节点
const editor=new WE(‘ # w _ view ‘)；
//配置编辑器
editor . config . showlinkimg=false；/*隐藏插入网络图片的功能*/
editor . config . onchange time out=400；/*配置触发onchange的时间和频率，默认为200 ms */
editor . config . uploadimgmaxlength=1；/*限制您一次可以发送的最大图片数量*/
//editor . config . show full screen=false；/*配置是否显示全屏功能按钮*/
editor.config.menus=[.this . menuitem]；/*自定义系统菜单*/
//editor . config . upload img maxsize=5 * 1024 * 1024/*限制图片大小*/；
editor . config . custom alert=err={
Message.error(错误)；
};
//同步监控更改和更新数据。
editor . config . onchange=new html={
//异步更新组件的富文本值的更改
这个。$emit(‘update:rich-text ‘，new html)；
};
//自定义上传图片
editor . config . customuploadimg=(result files，insertImgFn)={
/**
*结果文件：图像上传文件流
* insertImgFn:在rtf中插入图片。
*生成图片的URL地址作为结果返回。
* */
//这个方法让重写后的阿里云图片OSS直传插件为自己所用。
这个。$oss(结果文件[0]，结果文件[0][‘name’])。然后(url={
！URL insertImgFn(URL)；/* oss图像上传，将图像插入编辑器*/
});
};
//创建编辑器
editor . create()；
this.editor=editor
}
},
销毁前(){
//销毁编辑器
this . editor . destroy()；
this.editor=null
}
};
/脚本
注意：具体参数配置请参考编辑器文档的用户说明。
在组件中使用分离的编辑器：
模板
div class=’编辑器’
埃尔-卡影子=’永远不会’
div slot=’ header ‘ class=’ clear fix ‘
Span富文本编辑器/span
/div
div class=” card _ center ”
we ditor:default text=’ default text ‘:rich text . sync=’ rich text ‘/
/div
/电子名片
/div
/模板
脚本
//引入封装的编辑器
从“@/components/WEditor”导入we ditor；
导出默认值{
姓名：’编辑’，
组件：{ WEditor }，
data() {
返回{
//默认值
默认文本： ”，
//富文本更新的值
richText:“”
};
},
已创建(){
//等待组件加载并赋值。
这个。$nextTick(()={
this . default text=` p style=’ text-align:center；’img src=https://a5 img . PNC dn . cn/2021/0310/1615366398251 . png width=’ 30% ‘ style=’ text-align:center；最大宽度：100%；’/p `；
});
}
};
/脚本
这就是vue集成支持图像缩放和拖动的富文本编辑器的细节。更多关于vue的富文本编辑器的信息，请关注脚本之家的其他相关文章！
来源：剧本之家
链接：https://www.jb51.net/article/205012.htm
