Q-Editor 富文本

基础用法

<template>
  <Q-Editor v-model="text"></Q-Editor>
</template>
<script>
  export default {
    data() {
      return {
        text: ''
      }
    },
    watch: {
      text: {
        handler(newValue, oldValue) {
          console.log('text changed from', oldValue, 'to', newValue);
        },
        deep: true,
        immediate: true
      },
    },
  }
</script>

Expand Copy Copy

进阶用法

<template>
  <el-input v-model="text"/>
  <Q-Editor v-model="text"  ref='editor'  :simple="false" placeholder="请输入内容" :config="{height:700}"></Q-Editor>
</template>
<script>
  export default {
    data() {
      return {
        text: '123'
      }
    },
    watch: {
      text: {
        handler(newValue, oldValue) {
          console.log('text==>', newValue)
          //this.$refs.editor&&this.$refs.editor.setValue(newValue)
        },
        deep: true,
        immediate: true
      },
    },
  }
</script>
<style>
  .tox .tox-promotion-link {
    display: none;
  }
</style>

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
v-model	数据	String	—	—
id	ID	String	—	—
simple	是否简单	Boolean	—	true
placeholder	占位	String	—	请输入...
config	配置	Object	—	—

注意

let conf = {
    selector: `#${this.tinymceId}`,
    language: 'zh_CN',
    menubar: 'file edit insert view format table',
    advcode_inline: true,
    plugins: [
        "aidialog",
        "ai",
        "advlist",
        "anchor",
        "advtablerownumbering",
        "autolink",
        "autosave",
        "advcode",
        "code",
        "codesample",
        "directionality",
        "emoticons",
        "fontsize",
        "fullscreen",
        "hr",
        "image",
        "imagetools",
        "insertdatetime",
        "link",
        "lists",
        "media",
        "nonbreaking",
        "noneditable",
        "pagebreak",
        "paste",
        "preview",
        "print",
        "save",
        "searchreplace",
        "spellchecker",
        "tabfocus",
        "table",
        "template",
        "textpattern",
        "visualblocks",
        "visualchars",
        "wordcount",
        "formatpainter"
    ],
    toolbar: this.simple ?
        [
            'undo redo | bold italic underline strikethrough | styles| fontSize | fontselect | fontfamily | forecolor backcolor  | alignleft aligncenter alignright | outdent indent   | link image fullscreen'
        ]
        : [
            'undo redo | bold italic underline strikethrough | styles| fontSize | fontselect | fontfamily | forecolor backcolor | fontsizeinput | alignleft aligncenter alignright | outdent indent | bullist numlist lineheight | subscript superscript hr | link image code preview fullscreen | aidialog aishortcuts formatpainter'
        ],
    font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
    height: 300,
    branding: false,
    object_resizing: false,
    end_container_on_empty_block: true,
    powerpaste_word_import: 'clean',
    code_dialog_height: 450,
    code_dialog_width: 1000,
    advlist_bullet_styles: 'square',
    advlist_number_styles: 'default',
    default_link_target: '_blank',
    link_title: false,
    nonbreaking_force_tab: true,
    paste_data_images: true,
    ...this.config
}