DgRichEditor 富文本编辑器

集成了tinymce富文本编辑器的组件

基础使用

:::demo

<template>
  <dg-rich-editor ref="editor" v-model="content" />
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
}
</script>

:::

显示输入字数

:::demo 设置showWordCount属性为true即可

<template>
  <dg-rich-editor ref="editor" v-model="content" show-word-count />
</template>

:::

限制最大输入字符

::: demo 设置maxLimit属性即可

<template>
  <dg-rich-editor ref="editor" v-model="content" :max-limit="1000" />
</template>

:::

模式

::: 目前可配置三种模式， easy、normal、custom，默认normal。 easy简单模式只使用字体颜色、斜体、加粗等简单操作。

<template>
  <dg-rich-editor ref="editor" v-model="content" mode="easy" />
</template>

:::

设置回显

::: 由于编辑器需异步加载资源，回显需要等待数据完成后调用组件的setContent方法设置。

<template>
  <dg-rich-editor ref="editor" v-model="content" />
</template>
<script>
import { fetchDetail } from 'api'
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    async getDetail() {
      const data = await fetchDetail()
      this.$refs.editor.setContent(data)
    }
  }
}
</script>

:::

注意

由于编辑器需异步加载ui,语言等资源, 而这些资源放置在项目上面，如果部署应用时的设置了基本URL，则需要传入baseUrl进来以正确加载资源。 参考快速上手。

Attributes

参数	类型	说明	可选值	默认值
modelValue	string	内容	—
showWordCount	boolean	是否显示输入字数	true、false	false
maxLimit	number	最大输入字数		99999
mode	string	模式	'easy'、'normal'、'custom'	'normal'
whitelist	string[]	白名单，调用uploadAllImages方法时哪些域名的图片不需要下载上传到七牛	-	undefined
isSupportSvg	boolean	是否允许插入svg，注意插入非信任的svg可能存在xss安全问题	true、 false	false
config	object	tinymce配置对象	—	{}
disabled	boolean	是否禁用	true、false	false

方法

方法	说明	参数
setContent	设置编辑器的内容	content
uploadAllImages	异步方法，上传内容中的图片到七牛，并替换为七牛上的图片，使用场景为内容在小程序中显示。 在请求后端接口保存内容前调用即可。	-