服务器之家

服务器之家 > 正文

vue集成一个支持图片缩放拖拽的富文本编辑器

时间:2022-01-11 16:12     来源/作者:下落香樟树

需求:

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

效果图:

vue集成一个支持图片缩放拖拽的富文本编辑器

代码案例及相关配置如下:

安装插件

?
1
2
3
npm i wangeditor --save
// or
yarn add wangeditor

编辑器配置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
    <div class="w_editor">
        <!-- 富文本编辑器 -->
        <div id="w_view"></div>
    </div>
</template>
 
<script>
// 引入富文本
import WE from "wangeditor";
// 引入elementUI Message模块(用于提示信息)
import { Message } from "element-ui";
 
export default {
    name: "WEditor",
    props: {
        // 默认值
        defaultText: { type: String, default: "" },
        // 富文本更新的值
        richText: { type: String, default: "" }
    },
    data() {
        return {
            // 编辑器实例
            editor: null,
            // 富文本菜单选项配置
            menuItem: [
                "head",
                "bold",
                "fontSize",
                "fontName",
                "italic",
                "underline",
                "indent",
                "lineHeight",
                "foreColor",
                "backColor",
                "link",
                "list",
                "justify",
                "image",
                "video"
            ]
        };
    },
    watch: {
        // 监听默认值
        defaultText(nv, ov) {
            if (nv != "") {
                this.editor.txt.html(nv);
                this.$emit("update:rich-text", nv);
            }
        }
    },
    mounted() {
        this.initEditor();
    },
    methods: {
        // 初始化编辑器
        initEditor() {
            // 获取编辑器dom节点
            const editor = new WE("#w_view");
            // 配置编辑器
            editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
            editor.config.onchangeTimeout = 400; /* 配置触发 onchange 的时间频率,默认为 200ms */
            editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
            // editor.config.showFullScreen = false; /* 配置全屏功能按钮是否展示 */
            editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
            // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
            editor.config.customAlert = err => {
                Message.error(err);
            };
            // 监控变化,同步更新数据
            editor.config.onchange = newHtml => {
                // 异步更新组件富文本值的变化
                this.$emit("update:rich-text", newHtml);
            };
            // 自定义上传图片
            editor.config.customUploadImg = (resultFiles, insertImgFn) => {
                /**
                 * resultFiles:图片上传文件流
                 * insertImgFn:插入图片到富文本
                 * 返回结果为生成的图片URL地址
                 * */
                // 此方法为自己封赚改写的阿里云图片OSS直传插件。
                this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {
                    !!url && insertImgFn(url); /* oss图片上传,将图片插入到编辑器中 */
                });
            };
            // 创建编辑器
            editor.create();
            this.editor = editor;
        }
    },
    beforeDestroy() {
        // 销毁编辑器
        this.editor.destroy();
        this.editor = null;
    }
};
</script>

注: 具体参数配置请参考编辑器文档使用说明

组件中使用抽离的编辑器:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
    <div class="editor">
        <el-card shadow="never">
            <div slot="header" class="clearfix">
                <span>富文本编辑器</span>
            </div>
            <div class="card_center">
                <WEditor :defaultText="defaultText" :richText.sync="richText" />
            </div>
        </el-card>
    </div>
</template>
 
<script>
// 引入封装好的编辑器
import WEditor from "@/components/WEditor";
 
export default {
    name: "Editor",
    components: { WEditor },
    data() {
        return {
            // 默认值
            defaultText: "",
            // 富文本更新的值
            richText: ""
        };
    },
    created() {
        // 等待组件加载完毕赋值
        this.$nextTick(() => {
            this.defaultText = `<p style="text-align: center; "><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" style="text-align: center; max-width: 100%;"></p>`;
        });
    }
};
</script>

以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容,更多关于vue 富文本编辑器的资料请关注服务器之家其它相关文章!

原文链接:https://juejin.cn/post/6922365402106462216

相关文章

热门资讯

蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部