amis使用富文本编辑器

根据提供的引用内容，我们可以看到两个关于富文本编辑器的引用，其中一个是关于quill-editor的，另一个是关于am-editor的。下面分别介绍如何在amis中使用这两个富文本编辑器。

1. 在amis中使用quill-editor

可以通过在amis中使用自定义组件来使用quill-editor。首先需要安装quill和quill-editor：

npm install quill quill-editor --save

然后在自定义组件中引入quill-editor：

import QuillEditor from 'quill-editor'

export default {
  name: 'QuillEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    QuillEditor
  },
  data () {
    return {
      editor: null
    }
  },
  mounted () {
    this.editor = new Quill(this.$refs.quillEditor, this.options)
    this.editor.on('text-change', () => {
      this.$emit('input', this.editor.root.innerHTML)
    })
  },
  beforeDestroy () {
    this.editor.off('text-change')
    this.editor = null
  }
}

然后在amis中使用自定义组件：

{
  "type": "form",
  "title": "使用quill-editor",
  "controls": [
    {
      "type": "quill-editor",
      "name": "content",
      "label": "内容",
      "options": {
        "modules": {
          "toolbar": [
            ["bold", "italic", "underline", "strike"],
            ["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] }],
            [{ "color": [] }, { "background": [] }],
            [{ "font": [] }],
            [{ "align": [] }],
            ["clean"]
          ]
        }
      }
    }
  ]
}

2. 在amis中使用am-editor

可以通过在amis中使用自定义组件来使用am-editor。首先需要安装am-editor：

npm install am-editor --save

然后在自定义组件中引入am-editor：

import AMEditor from 'am-editor'

export default {
  name: 'AMEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    AMEditor
  },
  data () {
    return {
      editor: null
    }
  },
  mounted () {
    this.editor = new AMEditor(this.$refs.amEditor, this.options)
    this.editor.on('text-change', () => {
      this.$emit('input', this.editor.root.innerHTML)
    })
  },
  beforeDestroy () {
    this.editor.off('text-change')
    this.editor = null
  }
}

然后在amis中使用自定义组件：

{
  "type": "form",
  "title": "使用am-editor",
  "controls": [
    {
      "type": "am-editor",
      "name": "content",
      "label": "内容",
      "options": {
        "plugins": [
          "heading",
          "bold",
          "italic",
          "underline",
          "strikethrough",
          "quote",
          "list",
          "link",
          "image",
          "code",
          "table",
          "hr",
          "clear"
        ]
      }
    }
  ]
}