quill-editor富文本简单基础怎么实现？

让我们先来看效果好吗？

样式得话也就这样了
先来看代码复现！！
html部分

<quill-editor
       ref="myTextEditor"
       v-model="answer"
       :options="editorOption"
       style="height: 250px"
></quill-editor>

解释：v-model双向绑定得值 ref大家都熟悉吧 options改变默认工具 就是最上面得那一行 style就是他的样式啦
先来看看options

editorOption: {
                modules: {
                    toolbar: {
                        container: [
                            ["bold", "italic", "underline", "strike"], // toggled buttons
                            // ["blockquote", "code-block"],
                            ["clean"],
                            [{ color: [] }, { background: [] }],
                            [{ list: "ordered" }, { list: "bullet" }],
                            [{ header: [1, 2, 3, 4, 5, 6, false] }],
                            [{ size: ["small", false, "lagrge", "huge"] }],
                            [{ align: [] }],
                            ["image", "link", "video",'upload'],
                            // ["upload"],
                            ],
                    },
                },
                theme: "snow",
 },

就是说这个是格式 也是说看个人爱好 我具体得都在那个图片上
官网地址
大家可以看这个地址去进行下载 下载完成之后按我得步骤来 必须要先引入哦
接下来再给大家解决个问题 可能出来都是英文得
如果想要中文提示该怎么办呢？？

这些放到data数据里面

            // toolbar工具栏中文提示数组
            toolbarTips: [
                { Choice: ".ql-bold", title: "加粗" },
                { Choice: ".ql-italic", title: "倾斜" },
                { Choice: ".ql-underline", title: "下划线" },
                { Choice: ".ql-header", title: "段落格式" },
                { Choice: ".ql-strike", title: "删除线" },
                { Choice: ".ql-blockquote", title: "块引用" },
                { Choice: "ql-upload", title: "上传文件" },
                { Choice: ".ql-size", title: "字体大小" },
                { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
                { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
                { Choice: '.ql-header[value="1"]', title: "h1" },
                { Choice: '.ql-header[value="2"]', title: "h2" },
                { Choice: ".ql-align", title: "对齐方式" },
                { Choice: ".ql-color", title: "字体颜色" },
                { Choice: ".ql-background", title: "背景颜色" },
                { Choice: ".ql-image", title: "图像" },
                { Choice: ".ql-video", title: "视频" },
                { Choice: ".ql-link", title: "添加链接" },
                { Choice: ".ql-formula", title: "插入公式" },
                { Choice: ".ql-clean", title: "清除格式" },
                { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
                { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
                { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
                {
                Choice: '.ql-header .ql-picker-item[data-value="1"]',
                title: "标题一",
                },
                {
                Choice: '.ql-header .ql-picker-item[data-value="2"]',
                title: "标题二",
                },
                {
                Choice: '.ql-header .ql-picker-item[data-value="3"]',
                title: "标题三",
                },
                {
                Choice: '.ql-header .ql-picker-item[data-value="4"]',
                title: "标题四",
                },
                {
                Choice: '.ql-header .ql-picker-item[data-value="5"]',
                title: "标题五",
                },
                {
                Choice: '.ql-header .ql-picker-item[data-value="6"]',
                title: "标题六",
                },
                { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
                {
                Choice: '.ql-size .ql-picker-item[data-value="small"]',
                title: "小号",
                },
                {
                Choice: '.ql-size .ql-picker-item[data-value="large"]',
                title: "大号",
                },
                {
                Choice: '.ql-size .ql-picker-item[data-value="huge"]',
                title: "超大号",
                },
                { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
                { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
                {
                Choice: '.ql-align .ql-picker-item[data-value="center"]',
                title: "居中对齐",
                },
                {
                Choice: '.ql-align .ql-picker-item[data-value="right"]',
                title: "居右对齐",
                },
                {
                Choice: '.ql-align .ql-picker-item[data-value="justify"]',
                title: "两端对齐",
                },
            ],

方法

        // 当鼠标移到富文本的toolbar工具栏的时候出现中文提示
        kosptes() {
            for(let item of this.toolbarTips) {
                let tip = document.querySelector(".quill-editor " + item.Choice);
                if (!tip) continue;
                tip.setAttribute("title", item.title);
            }
        },

最后是我在mounted里面调用了这个方法 会有this指向问题哦 一定要注意

    mounted() {
        this.kosptes();
        vm = this;
    },

忘了一个最重要得点 就是css样式

// 自己添加上传文件的样式
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px" !important;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
}

放到样式里面

最后有人可能还会问ref是做什么的 也没有用到过呀
下一篇我就会写道用ref自定义视频上传 文件上传 链接上传以及外部视频上传