vue3ts 富文本使用详解

目录

步骤 1：创建项目和安装依赖

步骤 2：创建富文本编辑组件

步骤 3：在页面中使用富文本编辑组件

步骤 4：运行项目

步骤 1：创建项目和安装依赖

首先，确保你已经创建了一个Vue 3项目，并安装了所需的依赖。你可以使用Vue CLI来创建项目，然后在项目目录下执行以下命令来安装Quill富文本编辑器：

npm install vue@next @vue/compiler-sfc quill

步骤 2：创建富文本编辑组件

在项目中创建一个组件，例如RichTextEditor.vue，用于处理富文本编辑功能。

<template>
  <div class="rich-text-editor">
    <div ref="editor" class="editor"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.core.css'; // 导入Quill的CSS样式

const editorRef = ref<HTMLElement | null>(null);

onMounted(() => {
  const quill = new Quill(editorRef.value as HTMLElement, {
    theme: 'snow', // 使用snow主题
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['link'],
      ],
    },
  });

  // 监听内容变化
  quill.on('text-change', () => {
    const content = quill.root.innerHTML;
    console.log('Rich text content:', content);
  });
});
</script>

<style scoped>
.editor {
  height: 300px;
}
</style>

步骤 3：在页面中使用富文本编辑组件

在需要使用富文本编辑功能的页面中，引入并使用刚刚创建的富文本编辑组件。

<template>
  <div class="page">
    <h1>Vue 3 富文本编辑器</h1>
    <rich-text-editor></rich-text-editor>
  </div>
</template>

<script setup lang="ts">
import RichTextEditor from '@/components/RichTextEditor.vue'; // 导入富文本编辑组件
</script>

<style>
.page {
  padding: 20px;
}
</style>

步骤 4：运行项目

最后，运行项目以查看富文本编辑器是否正常工作。

npm run serve

补充说明：

以上示例演示了一个简单的富文本编辑器的实现，你可以根据项目的需求进行样式和功能的调整。在实际项目中，你可能需要更多的配置和处理来满足复杂的需求，比如上传图片、保存内容等。同时，你也可以考虑使用其他富文本编辑器库，例如tinymce等，根据具体需求进行选择。