嵌入式模式

以嵌入式模式添加Comments插件

要在嵌入式模式下将Comments插件添加到TinyMCE，请配置以下选项：

const userDb = {
  'author': {
    id: 'author',
    name: 'Name of the commenter',
    avatar: 'https://example.com/avatar/john.png'
  },
};

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  user_id: 'author',
  fetch_users: (userIds) => {
    return Promise.all(
      userIds.map(
        (userId) => new Promise(
          (resolve) => resolve(userDb[userId] || { id: userId })
        )
      )
    )
  },
  tinycomments_mode: 'embedded'
});

这是嵌入式模式下Comments插件的最低推荐配置。如果未配置user_id或tinycomments_author选项，所有用户将被分配名称"ANON"。

交互式示例

HTML

<textarea id="comments-embedded" style="width: 100%; height: 500px;">
  <h2>欢迎使用Tiny Comments！</h2>
  <p>请试用我们新的Tiny Comments premium插件的这个演示。</p>
  <ol>
    <li>高亮您想要评论的内容。</li>
    <li>点击工具栏中的添加评论图标。</li>
    <li>在评论侧边栏底部的文本字段中输入您的评论。</li>
    <li>点击评论。</li>
  </ol>
  <p>您的评论将<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">然后</span>附加到文本上，<span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">完全就像这样！</span></p>
  <p>如果您想在自己的环境中试用Tiny Comments，Tiny Comments是您可以通过注册Tiny账户免费试用14天的premium插件之一。也请务必查看我们的文档。</p>
  <p>如果您准备购买，可以单独购买Tiny Comments或作为Tiny Pro订阅的一部分。如果您是当前的云用户，Tiny Comments已添加到您的密钥中；如果您是自托管用户，Tiny Comments现在可以在最新版本的下载中获得，您可以在“我的账户”中访问。</p>
  <h2>一个简单的表格供您使用</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>产品</th>
        <th>值</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="https://www.tiny.cloud/">Tiny Cloud</a></td>
        <td>将强大的富文本编辑功能集成到您的应用程序中最简单、最可靠的方法。</td>
      </tr>
      <tr>
        <td><a href="https://www.tiny.cloud/drive/">Tiny Drive</a></td>
        <td>用于云中TinyMCE的图像和文件管理。</td>
      </tr>
    </tbody>
  </table>
  <p>感谢您支持TinyMCE！我们希望它帮助您的用户创建优质内容。</p>
  <!--tinycomments|2.1|data:application/json;base64,eyJtY2UtY29udmVyc2F0aW9uXzE5Njc5NjAwMjIxNjIxMzk5NzAzOTE1Ijp7InVpZCI6Im1jZS1jb252ZXJzYXRpb25fMTk2Nzk2MDAyMjE2MjEzOTk3MDM5MTUiLCJjb21tZW50cyI6W3sidWlkIjoibWNlLWNvbnZlcnNhdGlvbl8xOTY3OTYwMDIyMTYyMTM5OTcwMzkxNSIsImF1dGhvciI6Im1pYS1hbmRlcnNzb24iLCJhdXRob3JOYW1lIjoiTWlhIEFuZGVyc3NvbiIsImF1dGhvckF2YXRhciI6Imh0dHBzOi8vc25lYWstcHJldmlldy50aW55LmNsb3VkL2RlbW91c2VyZGlyZWN0b3J5L2ltYWdlcy9lbXBsb3llZV9taWEtYW5kZXJzc29uXzEyOF9lNmY5NDI0Yi5qcGciLCJjb250ZW50IjoiUGxlYXNlIHJldmlzZSB0aGlzIHNlbnRlbmNlLCBleGNsYW1hdGlvbiBwb2ludHMgYXJlIHVucHJvZmVzc2lvbmFsISIsImNyZWF0ZWRBdCI6IjIwMjEtMDUtMTlUMDQ6NDg6MjMuOTE0WiIsIm1vZGlmaWVkQXQiOiIyMDIxLTA1LTE5VDA0OjQ4OjIzLjkxNFoifV19fQ==-->
</textarea>

JS

const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';

const user_id = 'james-wilson';

const tinycomments_can_resolve = (req, done, _fail) => {
  const allowed = req.comments.length > 0 && req.comments[0].author === author;
  done({ canResolve: allowed });
};

tinymce.init({
  selector: 'textarea#comments-embedded',
  plugins: [ 'tinycomments', 'help', 'code', 'quickbars', 'link', 'lists', 'image' ],
  toolbar: 'addcomment showcomments code | bold italic underline',
  menubar: 'file edit view insert format tools tc',
  menu: {
    tc: {
      title: 'Comments',
      items: 'addcomment showcomments deleteallconversations'
    }
  },
  quickbars_selection_toolbar: 'alignleft aligncenter alignright | addcomment showcomments',
  quickbars_image_toolbar: 'alignleft aligncenter alignright | rotateleft rotateright | imageoptions',

  tinycomments_mode: 'embedded',
  sidebar_show: 'showcomments',
  tinycomments_can_resolve,
  
  user_id,
  fetch_users: (userIds) => Promise.all(userIds
    .map((userId) =>
      fetch(`${API_URL}/${userId}`)
        .then((response) => response.json())
        .catch(() => ({ id: userId }))))
});

选项

user_id

此选项设置编辑器中当前用户的唯一标识符。它在UserLookup API中使用。

类型：String

默认值：'Anonymous'

示例：使用 user_id 选项

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  user_id: 'james-wilson' // 用一个唯一的字符串替换此值，以识别用户
});

fetch_users

一个必需的回调函数，用于获取用户数据。该函数被调用时会传入一个用户 ID 数组，并应返回一个解析为用户对象数组的 Promise。UserLookup API 会使用此回调函数。如果返回的数组不包含所有请求的用户 ID，那么对于缺失的用户，其对应的 Promise 会以“User {id} not found”错误被拒绝。

类型：Function

参数：- ids (Array<string>)：要获取的用户 ID 数组。

返回值：- Promise<Array<Object>>：一个解析为用户对象数组的 Promise。

示例：使用 fetch_users 选项

const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';

tinymce.init({
  selector: 'textarea',
  user_id: 'james-wilson',
  fetch_users: (userIds) => Promise.all(userIds
    .map((userId) =>
      fetch(`${API_URL}/${userId}`)
        .then((response) => response.json())
        .catch(() => ({ id: userId })))),
});

示例：返回带有验证的用户数组

const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';

tinymce.init({
  selector: 'textarea',
  user_id: 'james-wilson',
  fetch_users: async (userIds) => {
    const users = await Promise.all(userIds
        .map((userId) =>
        fetch(`${API_URL}/${userId}`)
            .then((response) => response.json())
            .catch(() => ({ id: userId }))));

    return userIds.map(
      (userId) =>
        users.find((user) => user.id === userId)
        || ({ id: userId }) // 即使服务器未返回该用户，也仍返回一个有效的用户对象
    );
  },
});

tinycomments_author

此选项在 TinyMCE 8 中已被弃用，并且可能会在未来的 TinyMCE 主要版本中被移除。请改用 user_id 和 fetch_users 的组合。 | 用户查找 API

此选项设置在创建或回复评论时要使用的作者 ID。

类型：String

默认值：'Anon'

示例：使用 tinycomments_author

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
});

tinycomments_author_avatar

此选项在 TinyMCE 8 中已被弃用，并且可能会在未来的 TinyMCE 主要版本中被移除。请改用 user_id 和 fetch_users 的组合。 | 用户查找 API

可选：此选项设置在创建或回复评论时要使用的作者头像的 URL。如果省略此选项，则会使用生成的头像。如果提供了头像，那么：

• 头像会被缩放为直径 36px 的圆形；并且

• 可以是任何能够被包裹在 <img> 元素中的文件类型。

当创建新评论时，头像会与嵌入的评论数据一起存储，之后无法通过更改此选项的值来更改头像。若要更改头像图像，应更新 URL 所指向的服务器上的图像。

类型：String

示例：使用 tinycomments_author_avatar

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
  tinycomments_author_avatar: 'https://example.com/image.ext'
});

tinycomments_author_name

此选项在 TinyMCE 8 中已被弃用，并且可能会在未来的 TinyMCE 主要版本中被移除。请改用 user_id 和 fetch_users 的组合。 | 用户查找 API

可选：此选项设置在创建或回复评论时要使用的作者显示名称。如果省略此选项，则会使用作者的 id。

类型：String

示例：使用 tinycomments_author_name

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
});

tinycomments_can_delete

可选：此选项设置作者对于删除评论对话的权限。如果未包含 tinycomments_can_delete 选项，则当前作者（user_id）无法删除其他作者创建的评论对话。

类型：Function

默认值：

(req, done, fail) => {
  const allowed = req.comments.length > 0 && req.comments[0].author === <Current_user_id>;
  done({
    canDelete: allowed
  });
}

以下示例扩展了默认行为，通过添加 || currentAuthor === '<Admin user>'，允许作者 <Admin user> 删除其他作者的评论对话。

示例：使用 tinycomments_can_delete

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  user_id: currentAuthor,
  tinycomments_can_delete: (req, done, fail) => {
    const allowed = req.comments.length > 0 && req.comments[0].author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_can_resolve

可选：此选项会在对话中第一条评论的下拉菜单中添加一个“Resolve Conversation”项目。此回调设置了解决评论对话的作者权限。

类型： Function

示例：使用 tinycomments_can_resolve

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  user_id: currentAuthor,
  tinycomments_can_resolve: (req, done, fail) => {
    const allowed = req.comments.length > 0 && req.comments[0].author === currentAuthor;
    done({
      canResolve: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_can_delete_comment

可选：此选项设置了删除评论的作者权限。如果未包含 tinycomments_can_delete_comment 选项，则当前作者（user_id）无法删除其他作者添加的评论。

类型： Function

默认值：

(req, done, fail) => {
  const allowed = req.comment.author === <Current_user_id>;
  done({
    canDelete: allowed
  });
}

以下示例扩展了默认行为，通过添加 || currentAuthor === '<Admin user>'，允许作者 <Admin user> 删除其他作者的评论。

示例：使用 tinycomments_can_delete_comment

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  user_id: currentAuthor,
  tinycomments_can_delete_comment: (req, done, fail) => {
    const allowed = req.comment.author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_can_edit_comment

可选：此选项设置了编辑评论的作者权限。如果未包含 tinycomments_can_edit_comment 选项，则当前作者（user_id）无法编辑其他作者添加的评论。

类型： Function

默认值：

(req, done, fail) => {
  const allowed = req.comment.author === <Current_user_id>;
  done({
    canEdit: allowed
  });
}

以下示例扩展了默认行为，通过添加 || currentAuthor === '<Admin user>'，允许作者 <Admin user> 编辑其他作者的评论。

示例：使用 tinycomments_can_edit_comment

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  user_id: currentAuthor,
  tinycomments_can_edit_comment: (req, done, fail) => {
    const allowed = req.comment.author === currentAuthor;
    done({
      canEdit: allowed || currentAuthor === '<Admin user>'
    });
  }
});

tinycomments_always_show_highlights

可选：Comments 插件提供了 tinycomments_always_show_highlights 选项，可在 Comments 侧边栏关闭时保持对已评论内容的高亮显示。默认情况下，TinyMCE 仅在侧边栏打开时高亮显示已评论的内容，并在侧边栏关闭时从编辑器内容中移除高亮显示。

当此选项设置为 true 时，无论侧边栏是打开还是关闭，TinyMCE 都会高亮显示已评论的内容，并且选择高亮显示的内容会重新打开已关闭的 Comments 侧边栏。

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 tinycomments_always_show_highlights

const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // 根据 html 修改此值
  plugins: 'tinycomments',
  toolbar: 'addcomment showcomments',
  tinycomments_mode: 'embedded',
  user_id: currentAuthor,
  tinycomments_always_show_highlights: true
});

在编辑器加载时显示侧边栏

可以使用 sidebar_show 选项在编辑器加载时显示评论侧边栏。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 html 修改此值
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  user_id: currentAuthor,
  tinycomments_can_resolve: canResolveCommentsCallback,
  sidebar_show: 'showcomments'
});

配置注释文本和块 CSS 属性

高亮样式现在是整体内容皮肤的一部分，通过自定义皮肤来更改。

TinyMCE 开源项目 oxide（默认皮肤）定义了用于更改注释颜色的变量。

有关使用此代码库构建皮肤的信息，请参阅 文档。

有关配置 TinyMCE 格式的更多信息，请参阅 formats 部分。