vue富文本编辑器的使用_elementui富文本

Jetbrains全系列IDE稳定放心使用

一、安装

npm install quill --save

二、注册

1.在.main.js中注册富文本编辑器

Vue.use(VueEditor)

三、使用

1.以下是写好的富文本编辑器，附带功能齐全，复制即用！！！（Quill官方中文文档）

2.新建一个Editor文件夹，文件夹下创建一个index.vue文件，将此复制到vue文件里

3.将Editor文件夹放入Vue项目的components组件包里方便其他页面直接引用富文本编辑器

<template>
  <div ref="editor" class="editor" :style="styles" />
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default { 
   
  name: 'Editor',
  props: { 
   
    /* 编辑器的内容 */
    value: { 
   
      type: String,
      default: ''
    },
    /* 高度 */
    height: { 
   
      type: Number,
      default: null
    },
    /* 最小高度 */
    minHeight: { 
   
      type: Number,
      default: null
    }
  },
  data() { 
   
    return { 
   
      Quill: null,
      currentValue: '',
      options: { 
   
        theme: 'snow',
        bounds: document.body,
        debug: 'warn',
        modules: { 
   
          // 工具栏配置
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用 代码块
            [{ 
    list: 'ordered' }, { 
    list: 'bullet' }], // 有序、无序列表
            [{ 
    indent: '-1' }, { 
    indent: '+1' }], // 缩进
            [{ 
    size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 
    header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ 
    color: [] }, { 
    background: [] }], // 字体颜色、字体背景颜色
            [{ 
    align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入内容',
        readOnly: false //只读模式 true
      }
    }
  },
  computed: { 
   
    styles() { 
   
      const style = { 
   }
      if (this.minHeight) { 
   
        style.minHeight = `${ 
     this.minHeight}px`
      }
      if (this.height) { 
   
        style.height = `${ 
     this.height}px`
      }
      return style
    }
  },
  watch: { 
   
    value: { 
   
      handler(val) { 
   
        if (val !== this.currentValue) { 
   
          this.currentValue = val === null ? '' : val
          if (this.Quill) { 
   
            this.Quill.pasteHTML(this.currentValue)
          }
        }
      },
      immediate: true
    }
  },
  mounted() { 
   
    this.init()
  },
  beforeDestroy() { 
   
    this.Quill = null
  },
  methods: { 
   
    init() { 
   
      const editor = this.$refs.editor
      this.Quill = new Quill(editor, this.options)
      this.Quill.pasteHTML(this.currentValue)
      this.Quill.on('text-change', (delta, oldDelta, source) => { 
   
        const html = this.$refs.editor.children[0].innerHTML
        const text = this.Quill.getText()
        const quill = this.Quill
        this.currentValue = html
        this.$emit('input', html)
        this.$emit('on-change', { 
    html, text, quill })
      })
      this.Quill.on('text-change', (delta, oldDelta, source) => { 
   
        this.$emit('on-text-change', delta, oldDelta, source)
      })
      this.Quill.on('selection-change', (range, oldRange, source) => { 
   
        this.$emit('on-selection-change', range, oldRange, source)
      })
      this.Quill.on('editor-change', (eventName, ...args) => { 
   
        this.$emit('on-editor-change', eventName, ...args)
      })
    }
  }
}
</script>

<style>
.editor, .ql-toolbar { 
   
  white-space: pre-wrap!important;
  line-height: normal !important;
}
.quill-img { 
   
  display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before { 
   
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { 
   
  border-right: 0;
  content: "保存";
  padding-right: 0;
}

.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";
}
.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";
}
.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";
}
.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";
}

.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: "等宽字体";
}
</style>

4.页面中的使用

<el-row>
  <el-col :span="24">
    <el-form-item label="发布内容" prop="content">
<!--富文本编辑器 此处必须设置富文本编辑器高度-->
      <editor v-model="form.content" :min-height="192" />
    </el-form-item>
  </el-col>
</el-row>

5.页面引入刚刚写好的富文本编辑器组件

import Editor from '@/public/components/Editor';
  //加载私有组件
  components: { 
   
    Editor
  },

6.效果：