quill vue3 删除html

可以使用 DOMPurify 库来删除 HTML。首先安装 DOMPurify 库：

npm install dompurify

然后在 Vue3 中使用：

<template>
  <div>
    <div ref="content" v-html="html"></div>
    <button @click="removeHTML">Remove HTML</button>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      html: '<h1>Hello, World!</h1><p>This is some <strong>HTML</strong>.</p>'
    };
  },
  methods: {
    removeHTML() {
      const content = this.$refs.content;
      content.innerHTML = DOMPurify.sanitize(content.innerHTML, { ALLOWED_TAGS: [] });
    }
  }
};
</script>

在上面的代码中，我们在 `removeHTML` 方法中使用 DOMPurify 库，将 HTML 内容过滤并删除所有标签，只保留文本。

相关问题

vue-quill-editor加粗失效

如果你在使用 `vue-quill-editor` 编辑器时，发现加粗等功能失效，可能是因为缺少了 Quill 的样式文件。

解决方法是在你的 `index.html` 文件头部加入以下代码来引入 Quill 的样式文件：

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

如果你已经正确引入了 Quill 的样式文件，但是加粗等功能仍然失效，可能是因为你的配置项不正确。可以参考以下代码进行配置：

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、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'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        },
        // 其他配置项
      },
      content: ''
    }
  }
}

其中，`toolbar` 数组中包含了所有可用的工具栏功能，包括加粗、斜体、下划线、删除线等。确保你的配置项中包含了这些功能即可正常使用加粗等功能。

VUE3富文本

Vue 3 中使用富文本编辑器可以选择一些第三方库来实现，比如 Quill.js、TinyMCE、CKEditor 等。

下面以 Quill.js 为例，介绍在 Vue 3 中如何使用富文本编辑器。

1. 安装 Quill.js

npm install quill

2. 创建一个 Vue 组件

<template>
  <div>
    <div ref="editor" :id="id"></div>
  </div>
</template>

<script>
import Quill from 'quill';

export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.editor = new Quill(this.$refs.editor, {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、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'], //清除文本格式
            ['link', 'image', 'video'], //链接、图片、视频
          ],
        },
        placeholder: '请输入内容',
        theme: 'snow',
      });
      this.editor.on('text-change', () => {
        let html = this.editor.root.innerHTML;
        this.$emit('input', html);
      });
      this.editor.root.innerHTML = this.value;
    },
  },
};
</script>

3. 在父组件中使用

<template>
  <div>
    <rich-editor id="my-editor" v-model="content"></rich-editor>
  </div>
</template>

<script>
import RichEditor from './components/RichEditor.vue';

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

在上面的代码中，我们创建了一个名为 RichEditor 的组件，其中引入了 Quill.js，并在组件的 mounted 钩子函数中初始化了编辑器。同时，我们使用了一个 prop id 来传递编辑器的 ID 值，value 来接收父组件传入的富文本内容，并通过 v-model 实现了双向绑定。

在父组件中，我们通过引入 RichEditor 组件，并传递一个 id 和 v-model 来使用该富文本编辑器。

需要注意的是，由于 Quill.js 是基于 DOM 的，因此在 Vue 3 中需要使用 ref 来获取元素的引用。同时，在初始化编辑器后需要将编辑器的内容设置为父组件传入的值，否则父组件中的内容将无法显示在编辑器中。

以上就是在 Vue 3 中使用 Quill.js 实现富文本编辑器的步骤，希望能对你有所帮助。