本文主要介绍vue集成了一个支持图像缩放和拖动的富文本编辑器，帮助大家更好的理解和使用vue框架。有兴趣的朋友可以理解。

要求：

根据业务需求，需要能够上传图片，上传的图片可以在移动终端占据全屏宽度，所以需要能够按比例缩放上传的图片，还需要能够拖动、缩放和改变图片的大小。尝试多个第三方富文本编辑器，很难找到一个完全符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor的富文本编辑器。最初使用vue2Editor富文本编辑器。vue2Editor本身不支持图像拖动，但是提供了一种可配置的图像拖动方法，所以需要使用Quill.js来实现图像拖动。虽然满足了业务需求，但是在移动终端上的显示效果并不理想。编辑器主要需要在移动终端上显示上传的富文本。为了达到理想的效果，需要能够修改图片的百分比。当img标签的宽度属性设置为100%时，可以满足要求。wangEditor新发布的版本(第四版v4)能够满足需求，最终选择了它进行实际开发。

效果图：

代码案例和相关配置如下：

安装插件

npm i wangeditor -保存

//或者

纱线添加编辑器

编辑器配置

模板

div class='w_editor '

！-富文本编辑器-

div id='w_view'/div

/div

/模板

剧本

//介绍富文本

从“wangeditor”导入WE；

//介绍elementUI消息模块(用于提示信息)

从“元素-用户界面”导入{消息}；

导出默认值{

名称： 'WEditor '，

props: {

//默认值

default text : { type : String，default: '' }，

//富文本更新值

richText: { type: String，default: '' }

},

data() {

返回{

//编辑器实例

editor: null，

//富文本菜单选项配置

menuItem: [

头部'，

粗体'，

fontSize '，

' fontName '，

斜体'，

下划线'，

缩进'，

线条高度'，

'前景'，

背景色'，

链接'，

列表'，

'调整'，

图像'，

视频'

]

};

},

watch: {

//听默认值

defaultText(nv，ov) {

if (nv！='') {

this . editor . txt . html(NV)；

这个。$emit('update:rich-text '，NV)；

}

}

},

已安装(){

this . init editor()；

},

methods: {

//初始化编辑器