awesome-quill v0.0.2

Awesome-Quill

这是一个基于Quill富文本编辑器封装的Vue富文本编辑器。

操作

awesome-quill除了拥有富文本编辑器本身的能力，也可以进行图片上传、发布文本的操作：

传入options

你可以对富文本本身进行自定义化，譬如富文本编辑器的高度、限制字数、限制上传的图片、以及quill本身的Options配置，他们支持完备的类型推导

<AwesomeQuill
  :options="options"
/>

<script setup lang="ts">
import {editorOptions} from 'awesome-quill'
const options: editorOptions = {
  height: '100vh',
  limit: {
    limitText: 500,
    limitImg: 6
  },
  quillOptions: {
    ...
  }
}
</script>

获取富文本中的文本

<AwesomeQuill
  v-model:content="content"
/>

<script setup lang="ts">
import {ref} from 'vue'
const content = ref('')
</script>

图片上传

如果你不想自定义一个点击上传的操作，那完全可以使用awesome-quill自带的上传功能！ 而你只需要这么操作即可：

<AwesomeQuill
  :upload="customUploadFunc"
/>
<script setup lang="ts">
const customUploadFunc = () => {
  ...
}
</script>

发布出去！

awesome-quill允许你传入一个发布方法，然后就会自动帮你做剩下的事情！

<AwesomeQuill
  :submitClick="customSubmitFunc"
/>

<script setup lang="ts">
const customSubmitFunc = () => {
  ...
}
</script>

完全自定义

如果你不想使用awesome-quill本身的任何自带样式及操作，那么你可以不传入upload和submitClick，并这么做！

<AwesomeQuill v-model:content="content">
<template #footer>
  <div @click="upload"></div>
  <div @click="submit(content)"></div>
</template>
</AwesomeQuill>

<script setup lang="ts">
import { ref } from 'vue'
const content = ref('')
const upload = () => {
  ...
}
const submit = (val: string) => {
  ...
}
</script>