tinymce富文本编辑器vue如何只展示

TinyMCE是一个流行的富文本编辑器，用于网页上创建复杂的文本内容。在Vue.js应用中使用TinyMCE，如果你想只显示而不允许编辑，你可以通过禁用其交互组件来实现。以下是基本步骤：

1. 首先，在你的Vue项目中安装TinyMCE库，可以使用npm或者yarn：

   npm install @tinymce/tinymce-vue
   # 或者
   yarn add @tinymce/tinymce-vue

2. 在你的组件文件中，导入TinyMCE，并配置成只读模式：

   <script setup>
     import { createTinymce } from '@tinymce/tinymce-vue';

     const readonlyEditor = ref(null);
   
     // 初始化TinyMCE配置
     const config = {
       mode: 'readonly', // 设置为只读模式
       theme: 'modern',
       plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen'], // 选择需要的功能
       toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', // 只显示必要的按钮
       content_css: [
         'https://yourcdn.com/tinymce.css', // 如果有自定义样式
       ],
     };

     onMounted(() => {
       readonlyEditor.value = createTinymce({
         el: '#tinymce-read-only', // 你的元素ID，比如<div id="tinymce-read-only"></div>
         config,
       });
     });
   </script>

这里假设你有一个`<div>`标签用来容纳TinyMCE编辑器，例如`<div id="tinymce-read-only"></div>`。

3. 将HTML结构添加到模板中：

   <div id="tinymce-read-only" v-if="readonlyEditor.value">
     {{ readonlyEditor.value }}
   </div>

现在，你已经设置了一个只读的TinyMCE实例，用户只能查看编辑器的内容，无法进行编辑操作。