vue中使用富文本插件:vue-quill-editor

1. 首先就是引入我们的富文本组件了

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
// 富文本图片放大缩小;`在这里插入代码片`
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

2. data实例中得挂载这些数据作为富文本需要使用哪些工具的参数

  editorOption: {
                placeholder: '请输入正文',
                modules: {

                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike', 'image', 'link'],
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 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] }],
                        [{ 'font': [] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                    ],
                    
					//以下就是富文本插入图片后,使用者可将图片放大缩小且对齐文本方式
                    imageResize: {
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white',

                        },
                        modules: ['Resize', 'DisplaySize', 'Toolbar']
                    }

                }
            },

3.组件注册挂载

    components: {
        quillEditor,
    },

4.组件放入template

   <quill-editor v-model="issueData.content" :options="editorOption"></quill-editor>
  • v-model是你输入之后的数据
  • options是使用富文本需要使用哪些工具,参考上面data的实例参数

你可以修改你喜欢的样式,包括修改其中英文字母,到原样式文件夹修改

.detail /deep/ .ql-toolbar.ql-snow {
  border: 1px solid #ecf1f8;
  border-bottom-width: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.detail /deep/ .ql-toolbar.ql-snow .ql-formats {
  margin-right: 0;
}

.detail /deep/ .ql-container.ql-snow {
  border: 1px solid #ecf1f8;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  height: 220px;
}

富文中不能放大缩小图片,还得在Vue.config.js文件中配置

//引入webpack
const webpack = require('webpack')
//导出使用插件
module.exports = {
		chainWebpack: config => {
		// 富文本图片缩小放大 插件
		config.plugin('provide').use(webpack.ProvidePlugin, [{
			  'window.Quill': 'quill'
		}])
},

以下就是富文本最终的效果,可以插入图片且放大缩小

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值