Vue3 使用 cketior5 在页面保存的时候 获取的 cketior插件双向绑定的值 里面只有文字没有带html 标签结构

在Vue3中使用CKEditor 5时，你可能会遇到保存时获取到的值仅包含纯文本而没有HTML标签的情况。这是因为CKEditor默认在插入文本时会格式化为纯文本，以防止跨站脚本攻击（XSS）。这是为了浏览器的安全考虑，但如果你想保存完整的HTML结构，你需要调整一些设置：

1. **开启`contenteditable`模式**：在Vue组件中启用`CKEditor5`时，确保配置项`config.contentsEditable`设置为`true`，让元素变得可编辑，并保持原始HTML结构。

import { createEditor } from '@ckeditor/ckeditor5-build-classic';

const editor = await createEditor({
  container: document.querySelector('#editor'),
  config: {
    contentsEditable: true,
    ...otherConfigOptions
  }
});

2. **禁用HTML Sanitizer**：移除或配置`htmlSanitizer`以避免自动清除HTML。这要在构建CKEditor实例时进行：

config: {
  htmlSanitizer: null // 或者配置一个允许特定HTML标签的策略
}

3. **手动处理**：在`@change`事件监听器中，你可以选择在数据更新时将编辑器的HTML内容完整地保存下来：

<template>
  <div id="editor" v-model="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: ''
    };
  },
  watch: {
    htmlContent(newContent) {
      this.$emit('update:htmlContent', newContent);
    }
  },
  mounted() {
    this.editor.on('change', (event) => {
      this.htmlContent = event.data['text'];
    });
  },
  components: {
    CKEditor: () =>
      import('@ckeditor/ckeditor5-react').then((module) => module.CKEditor)
  }
};
</script>

现在保存时你应该能看到完整的HTML结构了，不过请注意，这样做可能增加安全性风险，除非你在后端进行充分的安全处理。