视图-TinyMCE 中文手册-果果开发

TinyMCE 允许开发者创建自定义视图并将其附加到主编辑器视图。此功能可创建可切换显示或隐藏的额外 UI 组件。当激活时，自定义视图将取代编辑器，为专门功能提供独立的视觉空间。

此功能仅在 TinyMCE 以 classic 模式运行时支持，inline 模式不支持。有关编辑模式差异的详细信息，请参阅 Classic 编辑模式。

编辑器视图 API

编辑器 UI 注册表中的 addView API 允许开发者注册新的视图容器。这些容器初始为隐藏状态（关闭），并附加在主视图旁边。自定义视图的可见性可通过 ToggleView 命令切换。自定义视图的状态可通过 queryCommandValue 方法查询。

以下是 addView 函数的语法：editor.ui.registry.addView(name: String, obj: View.ViewSpec)

参数

参数	类型	说明
`name`	`String`	`name` 参数是新视图的唯一标识符。
`obj`	`View.ViewSpec`	`obj` 参数是视图规范对象。

视图规范对象

属性	类型	说明
`buttons`	`Array`	`buttons` 属性指定要在视图右上角显示的按钮数组。
`keepToolbar`	`Boolean`	`keepToolbar` 属性指定在视图打开时是否保持编辑器菜单栏、工具栏和状态栏可见。设置为 `true` 时，视图填充工具栏下方空间，打开视图会关闭任何打开的侧边栏，且状态栏中的元素路径在视图关闭前禁用。工具栏按钮和菜单项不会禁用。默认值：`false`，此时视图取代整个编辑器。
`onShow`	`Function`	`onShow` 属性指定视图显示时调用的函数。该函数接收一个 API 对象。
`onHide`	`Function`	`onHide` 属性指定视图隐藏时调用的函数。该函数接收一个 API 对象。

切换自定义视图

要切换自定义视图，可使用 ToggleView 命令。用法示例：

// 假设 'myCustomView' 是自定义视图的名称
editor.execCommand('ToggleView', false, 'myCustomView');

查询自定义视图状态

要查询自定义视图的状态（当前可见或隐藏），可使用 queryCommandValue 方法：

// 假设 'myCustomView' 是自定义视图的名称
editor.queryCommandValue('ToggleView') == 'myCustomView';

选项

`view_show`

此选项允许在编辑器初始化时显示指定的视图。其行为类似于 sidebar_show，但适用于视图，且两者同时配置时，此选项优先。视图和侧边栏都可设置为初始化时显示，视图关闭后显示侧边栏。

值必须与注册视图的名称匹配。注册视图的 Premium 插件包括：

Suggested Edits (suggestededits)
Revision History (revision)
Enhanced Code Editor (code)

也可指定通过 addView 注册的自定义视图。

此功能仅在 TinyMCE 以 classic 模式运行时支持，inline 模式不支持。有关编辑模式差异的详细信息，请参阅 Classic 编辑模式。

类型：String

示例：在 Premium 插件中使用 `view_show`

tinymce.init({
  selector: 'textarea', // 根据您的 HTML 更改此值
  plugins: 'suggestededits',
  toolbar: 'suggestededits',
  view_show: 'suggestededits',
  // ... 其他 Suggested Edits 选项（suggestededits_model、user_id、fetch_users）
});

示例：在自定义视图中使用 `view_show`

tinymce.init({
  selector: 'textarea', // 根据你的HTML更改此值
  menubar: false,
  toolbar: 'view',
  view_show: 'view',
  setup: (editor) => {
    const toggleView = () => editor.execCommand('ToggleView', false, 'view');
    editor.ui.registry.addView('view', {
      onShow: (api) => {
        api.getContainer().innerHTML = '<p>你打开了视图！</p>';
      },
      onHide: (api) => {
        api.getContainer().innerHTML = '';
      },
      buttons: [{
        type: 'button',
        text: '关闭',
        onAction: toggleView
      }]
    });
    editor.ui.registry.addButton('view', {
      text: '打开视图',
      onAction: toggleView
    });
  }
});

交互示例

本示例展示如何使用 addView API 集成自定义视图。

HTML

<textarea id="custom-view">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">欢迎使用 TinyMCE 编辑器演示！</h2>
  <p>选择“显示代码视图”工具栏按钮以打开自定义视图。这将使你能够修改编辑器内容的源代码。</p>

  <h2>有问题或需要帮助？</h2>
  <ul>
    <li>我们的<a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a>是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？试试在 Stack Overflow 上使用<a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code>标签</a>。</li>
    <li>我们还提供企业级支持，作为<a href="https://www.tiny.cloud/pricing">TinyMCE 高级计划</a>的一部分。</li>
  </ul>

  <h2>发现了错误？</h2>
  <p>如果你认为自己发现了错误，请在<a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a>上创建一个 issue 向开发者报告。</p>

  <h2>最后……</h2>
  <p>感谢支持 TinyMCE！我们希望它能帮助你和你的用户创建出色的内容。<br/>
    TinyMCE 团队祝一切顺利。</p>
</textarea>

tinymce.init({
  selector: "textarea#custom-view",
  toolbar: "showCodeView",
  height: 600,
  setup: (ed) => {
    ed.ui.registry.addView('code', {
      buttons: [
        {
          type: 'button',
          text: '取消',
          buttonType: 'secondary',
          onAction: () => {
            ed.execCommand('ToggleView', false, 'code');
            console.log('close');
          }
        },
        {
          type: 'button',
          text: '保存代码',
          buttonType: 'primary',
          onAction: () => {
            const codeContent = document.querySelector('.my-textarea').value;
            ed.setContent(codeContent);
            ed.execCommand('ToggleView', false, 'code');
            console.log('save');
          }
        },
      ],
      onShow: (api) => {
        const editorContent = ed.getContent();
        const container = api.getContainer();
        container.innerHTML = `
          <div style="height: 100%">
            <textarea class="my-textarea" style="width: 100%; height: 100%; resize: none; padding: 0.5em"></textarea>
          </div>`;
        container.querySelector('.my-textarea').value = editorContent;
      },
      onHide: (api) => {
        console.log('Deactivate code', api.getContainer());
      }
    });

    ed.ui.registry.addButton('showCodeView', {
      icon: 'sourcecode',
      text: '显示代码视图',
      onAction: (_api) => {
        console.log('source code editor');
        ed.execCommand('ToggleView', false, 'code');
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

视图