|
@@ -0,0 +1,122 @@
|
|
|
+<template>
|
|
|
+ <quill-editor
|
|
|
+ class="ql-editor"
|
|
|
+ v-model="content"
|
|
|
+ ref="myQuillEditor"
|
|
|
+ :options="editorOption"
|
|
|
+ @blur="onEditorBlur($event)"
|
|
|
+ @focus="onEditorFocus($event)"
|
|
|
+ @change="onEditorChange($event)">
|
|
|
+ </quill-editor>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
+// 引入样式
|
|
|
+import 'quill/dist/quill.core.css'
|
|
|
+import 'quill/dist/quill.snow.css'
|
|
|
+import 'quill/dist/quill.bubble.css'
|
|
|
+
|
|
|
+import { quillEditor } from 'vue-quill-editor'
|
|
|
+import VueViews from '@/benyun/compVue/VueViews'
|
|
|
+@Component({components:{quillEditor}})
|
|
|
+export default class DistributionDevel extends VueViews {
|
|
|
+ content:any= `` //双向数据绑定数据
|
|
|
+ // 富文本编辑器配置
|
|
|
+ editorOption:any= { // 设置所有的选项
|
|
|
+ theme: "snow", // or 'bubble'
|
|
|
+ placeholder: "您想说点什么?",
|
|
|
+ modules: {
|
|
|
+ toolbar: {
|
|
|
+ container: [
|
|
|
+ ["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"], // 清除文本格式
|
|
|
+ ["link"] // 链接、图片、视频
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // editorOption:any= {
|
|
|
+ // modules: {
|
|
|
+ // toolbar: {
|
|
|
+ // container: [
|
|
|
+ // ['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'], //清除字体样式
|
|
|
+ // ], // 工具栏
|
|
|
+ // },
|
|
|
+ // }, //编辑器配置项
|
|
|
+ // }
|
|
|
+ // 失去焦点事件
|
|
|
+ onEditorBlur(quill:any) {
|
|
|
+ // console.log('editor blur!', quill)
|
|
|
+ }
|
|
|
+ // 获得焦点事件
|
|
|
+ onEditorFocus(quill:any) {
|
|
|
+ // console.log('editor focus!', quill)
|
|
|
+ }
|
|
|
+ // 准备富文本编辑器
|
|
|
+ onEditorReady(quill:any) {
|
|
|
+ // console.log('editor ready!', quill)
|
|
|
+ }
|
|
|
+ // 内容改变事件
|
|
|
+ onEditorChange({ quill, html, text }:any) {
|
|
|
+ this.content = html;
|
|
|
+ this.$emit('onChange',this.content);
|
|
|
+ }
|
|
|
+ setValue(n:any){
|
|
|
+ this.content = n
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.ql-editor{
|
|
|
+ padding: 0 !important;
|
|
|
+ min-height: 220px;
|
|
|
+ min-height: 230px;
|
|
|
+ .ql-toolbar.ql-snow{
|
|
|
+ padding-top: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 给文本内容加高度,滚动条
|
|
|
+.quill-editor .ql-container {
|
|
|
+ min-height: 220px;
|
|
|
+ }
|
|
|
+ .ql-container {
|
|
|
+ min-height: 230px;
|
|
|
+ }
|
|
|
+ /*加上height和滚动属性就可以,滚动条样式是系统默认样式,可能不同*/
|
|
|
+ .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
|
|
+ border-color: #ccc;
|
|
|
+ height: 125px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ /*加上height和滚动属性就可以,滚动条样式是系统默认样式,可能不同*/
|
|
|
+ .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
|
|
|
+ border-color: #ccc;
|
|
|
+ height: 125px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+</style>
|