相关文章推荐
英勇无比的大脸猫  ·  vscode 里 Import ...·  2 月前    · 
威武的豌豆  ·  Python小练习:从多文件夹提取指定列并整 ...·  2 月前    · 
痴情的草稿本  ·  Matlab设置legend图例文字颜色与图 ...·  9 月前    · 
奔跑的骆驼  ·  java integer long ...·  1 年前    · 
俊秀的椅子  ·  @AllArgsConstructor在En ...·  2 年前    · 
光明磊落的铁板烧  ·  C++开发Excel的com加载项(一) ...·  2 年前    · 
Code  ›  quill-editor:Vue轻量级富文本编辑器-Vue-Quill-Editor-阿里云开发者社区
vue 轻量级 云计算 str函数
https://developer.aliyun.com/article/846252
文质彬彬的香槟
2 年前
产品 解决方案 文档与社区 免费试用 定价 云市场 合作伙伴 支持与服务 了解阿里云
备案 控制台 登录/注册
开发者社区
首页
探索云世界
新手上云 云上应用构建 云上数据管理 云上探索人工智能
云计算 弹性计算 无影 存储 网络 倚天
云原生 容器 serverless 中间件 微服务 可观测 消息队列
数据库 关系型数据库 NoSQL数据库 数据仓库 数据管理工具 PolarDB开源 向量数据库

热门

Modelscope模型即服务 弹性计算 云原生 数据库 物联网 云效DevOps 龙蜥操作系统 平头哥 钉钉开放平台
大数据 大数据计算 实时数仓Hologres 实时计算Flink E-MapReduce DataWorks Elasticsearch 机器学习平台PAI 智能搜索推荐
人工智能 机器学习平台PAI 视觉智能开放平台 智能语音交互 自然语言处理 多模态模型 pythonsdk 通用模型
开发与运维 云效DevOps 钉钉宜搭 支持服务 镜像站 码上公益
问产品
动手实践
考认证
TIANCHI大赛
活动广场
任务中心 飞天Club技术沙龙 训练营 话题 开发者评测 乘风者计划 阿里云MVP 直播
下载
镜像站 技术资料 插件
本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

先看效果图:画面太美哈哈哈

image.png


1、下载 Vue -Quill-Editor

npm install vue-quill-editor --save

2、下载quill(Vue-Quill-Editor需要依赖)

npm install quill --save

3、代码

<template>
    <div class="edit_container">





    
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    components: {
        quillEditor
    data() {
        return {
            content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
            editorOption: {}
    methods: {
        onEditorReady(editor) { // 准备编辑器
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
</script>




    

OK,搞定,简洁的富文本编辑器就展现在你眼前了,另外附上API。 Vue-Quill-Editor .

4、自定义 toolbar 菜单

editorOption: {
              placeholder: "请在这里输入",
              modules:{
                toolbar:[
                          ['bold', 'italic', 'underline', 'strike'],    //加粗,斜体,下划线,删除线
                          ['blockquote', 'code-block'],     //引用,代码块
                          [{ 'header': 1 }, { 'header': 2 }],        // 标题,键值对的形式;1、2表示字体大小
                          [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                          [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                          [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                          [{ 'direction': 'rtl' }],             // 文本方向
                          [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                          [{ 'color': [] }, { 'background': [] }],     // 字体颜色,字体背景颜色
                          [{ 'font': [] }],     //字体
                          [{ 'align': [] }],    //对齐方式
                          ['clean'],    //清除字体样式
                          ['image','video']    //上传图片、上传视频

5、存储及将数据库中的数据反显为HTML字符串

后台接收到数据后会将字符中的标签进行转码,所以我们要先进行一个解码的操作让他变成标签形式的字符串:

例如后台接收的数据如下:"<h1>title<" ,对应解码后就是 <h1>title</h1> 。

//把实体格式字符串转义成HTML格式的字符串
escapeStringHTML(str) {
    str = str.replace(/&lt;/g,'<');
    str = str.replace(/&gt;/g,'>');





    
    return str;
}

然后将返回值赋值给对应的参数:

<div v-html="str" class="ql-editor">
    {{str}}
</div>

上面的str就是转码函数返回的值,我们要先在data中定义,所以我现在将新增跟展示放在一起,代码如下:

<template>
    <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <div v-html="str" class="ql-editor">
            {{str}}
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    components: {
        quillEditor
    data() {
        return {
            content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
            str: '',
            editorOption: {}
    methods: {
        onEditorReady(editor) { // 准备编辑器
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
    mounted() {
        let content = '';  // 请求后台返回的内容字符串
        this.str = this.escapeStringHTML(content);
</script>

最后提醒大家一句,插件只兼容IE10以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。

 
推荐文章
英勇无比的大脸猫  ·  vscode 里 Import “numpy“ count not be resolved_import numpy could not be resolved
2 月前
威武的豌豆  ·  Python小练习:从多文件夹提取指定列并整合 - 凯鲁嘎吉
2 月前
痴情的草稿本  ·  Matlab设置legend图例文字颜色与图例颜色一致_matlab 改变legend颜色-CSDN博客
9 月前
奔跑的骆驼  ·  java integer long 转换_long(Long)与int(Integer)之间的转换-腾讯云开发者社区-腾讯云
1 年前
俊秀的椅子  ·  @AllArgsConstructor在Enum上不生成构造函数-腾讯云开发者社区-腾讯云
2 年前
光明磊落的铁板烧  ·  C++开发Excel的com加载项(一) - 月巴虫丘虫引 - 博客园
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号