vue3 使用tinymce 显示段落

要在 Vue3 中使用 TinyMCE 显示段落，你可以按照以下步骤进行：

1. 首先，你需要在你的 Vue3 项目中安装 TinyMCE。

npm install tinymce --save

2. 接着，你可以在你的组件中使用 TinyMCE 的 `init` 方法来初始化编辑器，并将 `content` 属性设置为你想要显示的段落。

<template>
  <div>
    <textarea ref="editor" :value="content"></textarea>
  </div>
</template>

<script>
import tinymce from 'tinymce';

export default {
  data() {
    return {
      content: '<p>这是一个段落</p>',
    };
  },
  mounted() {
    tinymce.init({
      selector: this.$refs.editor,
      plugins: 'advlist autolink lists link image charmap print preview anchor',
      toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      height: 300,
      content_css: '//www.tiny.cloud/css/codepen.min.css',
      content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }',
      init_instance_callback: (editor) => {
        editor.setContent(this.content);
        editor.setMode('readonly');
      },
    });
  },
};
</script>

在上面的代码中，我们通过在 `mounted` 钩子函数中调用 `tinymce.init` 方法来初始化 TinyMCE 编辑器，并将 `content` 属性设置为一个包含段落的 HTML 字符串。在 `init_instance_callback` 回调函数中，我们使用 `editor.setContent` 方法将编辑器的内容设置为 `content` 属性，然后使用 `editor.setMode` 方法将编辑器设置为只读模式，以便用户无法编辑内容。

这样，当你的组件渲染时，它将显示一个包含指定段落的 TinyMCE 编辑器，但用户无法编辑它。