vue 图片缩放,vue缩放拖拽插件
本文主要介绍将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
/模板
脚本
//引入封装好的编辑器
从" @/组件/编辑器"导入我们ditor
导出默认值{
姓名：编辑，
组件：{ WEditor }，
data() {
返回{
//默认值
默认文本： ,
//富文本更新的值
richText:" "
};
},
已创建(){
//等待组件加载完毕赋值
这个. nextTick(()={
这个。默认text= p style= text-align:center；img src= https://。中国OSS-。阿里云。com/picture/202010/20 _ 222430 _ 8011。png width= 30% style= text-align:center；最大宽度：100%;/p `；
});
}
};
/脚本
以上就是某视频剪辑软件集成一个支持图片缩放拖拽的富文本编辑器的详细内容，更多关于某视频剪辑软件富文本编辑器的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。