Vusui-editor 富文本编辑器

快速开始

本节将介绍如何在项目中使用 vusui-editor。

全局使用

// main.ts
import { createApp } from 'vue';
import { VusuiEditor } from '@vusui/editor';
import '@vusui/editor/lib/style.css';

const app = createApp({});
app.use(VusuiEditor);

局部使用

<script>
import { VusuiEditor } from '@vusui/editor';
import '@vusui/editor/lib/style.css';

export default {
  components: {
    VusuiEditor
  }
};
</script>

模板中使用

<template>
  <vusui-editor :options="editor.options" v-model:content="editor.content" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const editor = reactive({
    // 内容
    content: '',
    // quill 配置参数
    options: {
      ...
    }
});
</script>

CDN 引入使用

CDN 引入方法请查看 【安装】 说明

<html>
  <head>
    <!-- 在此处引入 vue3 和 vusui-editor -->
  </head>
  <body>
    <div id="app">
      <vusui-editor v-model:content="content"></vusui-editor>
    </div>
    <script>
      const App = {
        data() {
          return {
            content: 'Hello Vusui'
          };
        }
      };
      // 引入vusui-editor实例
      const { VusuiEditor } = Vusui;
      const app = Vue.createApp(App);
      app.use(VusuiEditor);
      app.mount('#app');
    </script>
  </body>
</html>