首页 > 其他分享 >常用的Vue富文本编辑器:

常用的Vue富文本编辑器:

时间:2023-03-15 19:00:09浏览次数:48  
标签:picker 文本编辑 Vue 常用 value content data ql before

 

  1. Quill:Quill是一个现代化、可定制的富文本编辑器,提供了许多有用的功能,如文本样式、列表、媒体插入等。在Vue中可以使用vue-quill-editor来集成Quill。

  2. CKEditor 5:CKEditor 5是一个强大、可定制的富文本编辑器,提供了许多有用的功能,如表格、链接、图片、视频等。在Vue中可以使用@ckeditor/ckeditor5-vue来集成CKEditor 5。

  3. Editor.js:Editor.js是一个易于使用、可扩展的富文本编辑器,提供了许多有用的功能,如标题、段落、列表、表格等。在Vue中可以使用vue-editor-js来集成Editor.js。

  4. Medium Editor:Medium Editor是一个简单、易于使用的富文本编辑器,提供了许多有用的功能,如文本样式、图片插入等。在Vue中可以使用vue2-medium-editor来集成Medium Editor。

  5. Tinymce:Tinymce是一个可定制的富文本编辑器,提供了许多有用的功能,如文本样式、媒体插入等。在Vue中可以使用vue-tinymce-editor来集成Tinymce。

 

以上这些Vue富文本编辑器都可以提供丰富的功能和扩展性,帮助Vue开发人员更快速、更高效地实现富文本编辑,但具体选择哪个富文本编辑器,需要根据个人需求、项目需求和体验来决定。

 

vue-quill-editor

vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,配置,遇到的主要问题有以下几个:

  1. 字体大小无法设置
  2. 工具栏样式错位
  3. 图片上传报错
  4. 编辑器高度无法设置
  5. 等等...

效果

 

 

代码

<template>
  <div class="vue-quill-editor">
   <quill-editor
    ref="mwQuillEditor"
    v-model="html"
    :options="editorOption"
  />
  </div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import SelectImages from '@/components/SelectImages/index'
// 设置字体大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)
// 设置字体样式
const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
const fonts = [
    'SimSun',
    'SimHei',
    'Microsoft-YaHei',
    'KaiTi',
    'FangSong'
]
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)
// 工具栏
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    [{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ font: fonts }], // 字体种类-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
    ['clean'], // 清除文本格式-----['clean']
    ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
    name: 'VueQuillEditor',
    components: {
        quillEditor
    },
    props: {
        value: {
            type: [Number, Object, Array, String],
            default: ''
        }
    },
    data () {
        return {
            html: this.value,
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: this.handleImgUpload
                        }
                    }
                }
            },
            isShow: false
        }
    },
    watch: {
        html: {
            handler (newValue) {
                this.$emit('input', newValue)
            },
            deep: true
        },
        value: {
            handler (newValue, oldValue) {
                if (newValue !== oldValue) this.html = newValue
            },
            deep: true
        }
    },
    mounted () {
        this.initMounted()
    },
    methods: {
        initMounted () {
            setTimeout(() => {
                this.isShow = true
            }, 100)
        },
        handleImgUpload () {
            const { quill } = this.$refs.mwQuillEditor
            SelectImages({
                visible: true,
                multi: true,
                showButton: true,
                maxMulti: 18,
                success: (data, filPath) => {
                    for (const item of data) {
                        const length = quill.getSelection(true).index
                        // 获取光标所在位置
                        // 插入图片,res为服务器返回的图片链接地址
                        quill.insertEmbed(length, 'image', filPath + item)
                        // 调整光标到最后
                        quill.setSelection(length + 1)
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss">
.vue-quill-editor {
  .quill-editor{
    line-height: normal;
    .ql-container.ql-snow{
        line-height: normal !important;
        height: 550px !important;
        font-size:14px;
    }
    .ql-snow {
        .ql-tooltip[data-mode=link]::before {
            content: "请输入链接地址:";
        }
        .ql-tooltip.ql-editing a.ql-action::after {
            border-right: 0px;
            content: '保存';
            padding-right: 0px;
        }
        .ql-tooltip[data-mode=video]::before {
            content: "请输入视频地址:";
        }
        .ql-picker.ql-size {
            .ql-picker-label[data-value="12px"]::before,
            .ql-picker-item[data-value="12px"]::before {
                content: '12px';
            }
            .ql-picker-label[data-value="14px"]::before,
            .ql-picker-item[data-value="14px"]::before {
                content: '14px';
            }
            .ql-picker-label[data-value="16px"]::before,
            .ql-picker-item[data-value="16px"]::before {
                content: '16px';
            }
            .ql-picker-label[data-value="18px"]::before,
            .ql-picker-item[data-value="18px"]::before {
                content: '18px';
            }
            .ql-picker-label[data-value="20px"]::before,
            .ql-picker-item[data-value="20px"]::before {
                content: '20px';
            }
            .ql-picker-label[data-value="24px"]::before,
            .ql-picker-item[data-value="24px"]::before {
                content: '24px';
            }
            .ql-picker-label[data-value="28px"]::before,
            .ql-picker-item[data-value="28px"]::before {
                content: '28px';
            }
            .ql-picker-label[data-value="32px"]::before,
            .ql-picker-item[data-value="32px"]::before {
                content: '32px';
            }
            .ql-picker-label[data-value="36px"]::before,
            .ql-picker-item[data-value="36px"]::before {
                content: '36px';
            }
        }
        .ql-picker.ql-header {
            .ql-picker-label::before,
            .ql-picker-item::before {
                content: '文本';
            }
            .ql-picker-label[data-value="1"]::before,
            .ql-picker-item[data-value="1"]::before {
                content: '标题1';
            }
            .ql-picker-label[data-value="2"]::before,
            .ql-picker-item[data-value="2"]::before {
                content: '标题2';
            }
            .ql-picker-label[data-value="3"]::before,
            .ql-picker-item[data-value="3"]::before {
                content: '标题3';
            }
            .ql-picker-label[data-value="4"]::before,
            .ql-picker-item[data-value="4"]::before {
                content: '标题4';
            }
            .ql-picker-label[data-value="5"]::before,
            .ql-picker-item[data-value="5"]::before {
                content: '标题5';
            }
            .ql-picker-label[data-value="6"]::before,
            .ql-picker-item[data-value="6"]::before {
                content: '标题6';
            }
        }
        .ql-picker.ql-font{
            .ql-picker-label[data-value="SimSun"]::before,
            .ql-picker-item[data-value="SimSun"]::before {
                content: "宋体";
                font-family: "SimSun" !important;
            }
            .ql-picker-label[data-value="SimHei"]::before,
            .ql-picker-item[data-value="SimHei"]::before {
                content: "黑体";
                font-family: "SimHei";
            }
            .ql-picker-label[data-value="Microsoft-YaHei"]::before,
            .ql-picker-item[data-value="Microsoft-YaHei"]::before {
                content: "微软雅黑";
                font-family: "Microsoft YaHei";
            }
            .ql-picker-label[data-value="KaiTi"]::before,
            .ql-picker-item[data-value="KaiTi"]::before {
                content: "楷体";
                font-family: "KaiTi" !important;
            }
            .ql-picker-label[data-value="FangSong"]::before,
            .ql-picker-item[data-value="FangSong"]::before {
                content: "仿宋";
                font-family: "FangSong";
            }
        }
    }
    .ql-align-center{
      text-align: center;
    }
    .ql-align-right{
      text-align: right;
    }
    .ql-align-left{
      text-align: left;
    }
  }
  }
</style>

 

标签:picker,文本编辑,Vue,常用,value,content,data,ql,before
From: https://www.cnblogs.com/miangao/p/17219637.html

相关文章

  • docker redis常用命令
    一、dockerredis服务部署1.下载官方redis镜像dockerpullredis2.运行镜像,返回容器id。此时redis服务已经开启dockerrun-d-p6379:6379redis3.进入容器(客户端......
  • Vue.js 数据绑定
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>数据绑定</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/vue.js"......
  • Vue.js 模板语法
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>模板语法</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/vue.js"......
  • QT5笔记: 16. 时间和定时器的常用功能
    例子#ifndefWIDGET_H#defineWIDGET_H#include<QTime>#include<QTimer>#include<QWidget>QT_BEGIN_NAMESPACEnamespaceUi{classWidget;}QT_END_NAM......
  • vue + djangorestframework實現文件下載功能
    1.安裝模塊及配置及配置先安裝django-cors-headers包pip3installdjangorestframeworkdjango-cors-headers 在setting文件中註冊appINSTALLED_APPS=['djang......
  • vue入门篇之Vue.js 组件
    Vue.js组件是该框架最强大的功能之一,能够扩展HTML元素并封装可重用的代码。通过组件系统,我们可以使用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以......
  • C++ 常用语法
    1.定义一个字符串常量staticconststd::stringversion("0.0.1");staticconststd::stringname("Car-"+version);2.定义size大小staticconstexpruint64_tsh......
  • windows常用快捷键
    windows常用快捷键复制ctrl+c粘贴ctrl+v全选ctrl+a剪切ctrl+r撤销ctrl+z保存ctrl+s关闭窗口ctrl+F4永久删除shift+delete运行win+r我的电脑win+e任务......
  • vuex的应用
    需求:系统顶部添加项目下拉框,顶部下拉框选项改变时其他模块下拉框同时改变。1.开始进入系统的时候获取项目列表页面调用接口//获取项目列表store.dispatch("getProj......
  • 初始Vue
    Vue简介介绍与描述Vue是一套用来动态构建用户界面的渐进式JavaScript框架-构建用户界面:把数据通过某种办法变成用户界面-渐进式:Vue可以自底向上逐层地应用,简单应用只......