使用 TinyMCE 和 Vue.js 实现评论

使用 TinyMCE 和 Vue.js 实现评论

使用 Vue.js 构建协作式内容管理系统？在发布前，评论功能对于团队反馈至关重要。让我们探讨如何快速将 TinyMCE 与你的 Vue.js 应用集成。

在 Vue 中设置

ini 复制代码

<Editor
 :init="{
     plugins: 'tinycomments ...',
     toolbar: 'addcomment showcomments ...'
 }"
>

这些设置了插件以及工具栏按钮，用于管理评论。

配置评论存储

TinyMCE 提供了两种评论存储模式：

回调模式（默认） ：将评论存储在你的数据库中
嵌入模式：将评论存储在内部

在本教程中，我们将使用嵌入模式。

ini 复制代码

<Editor
 :init="{
     ...
     tinycomments_mode: 'embedded'
 }"
>

嵌入模式特别有用，因为它：

将评论直接存储在你的内容中
将评论编码为 HTML的注释，防止它们在页面上显示
可以在提供给最终用户之前删除
通过将评论与其关联的内容保持在一起，简化了存储过程

配置评论者信息

接下来，我们可以为编辑器提供一些配置选项，以识别评论者的身份。

ini 复制代码

<Editor
 :init="{
     ...
     tinycomments_author: 'username',
     tinycomments_author_name: 'Display Name',
     tinycomments_author_avatar: 'https://your-avatar-url.com/image.jpg'
 }"
>

当然，这些值可以是动态的。

xml 复制代码

<script setup>
// 这是伪代码
// 根据你的应用中设置的身份验证系统获取用户详细信息
const { user } = useAuth()
</script>
<Editor
 :init="{
     ...
     tinycomments_author: user.id,
     tinycomments_author_name: user.name,
     tinycomments_author_avatar: user.avatar
 }"
>

管理评论权限

在用户信息到位后，你可以获得一些内置的权限控制。例如，默认情况下，用户只能删除和编辑自己的评论。

不过，你可以通过各种回调函数进一步自定义这些权限。例如，这里展示了如何根据超级管理员角色自定义删除和编辑。

ini 复制代码

// （再次根据你的身份验证解决方案进行调整）
tinycomments_can_delete: async (req, done) => {
    const canDelete =
      req.author === user.username ||
      user.role === 'superadmin'
    done(canDelete)
  },
  tinycomments_can_edit: async (req, done) => {
    const canEdit =
      req.author === user.username ||
      user.role === 'superadmin'
    done(canEdit)
  }

评论线程解决

除了创建、编辑、删除和回复评论外，你还可以让对话结束时消失。

通过启用线程解决，调用 tinycomments_can_resolve 函数实现。

ini 复制代码

tinycomments_can_resolve: (req, done, fail) => {
    done({
        // user.id 这里取决于你的身份验证设置
        canResolve: req.author === user.id
    });
},

将评论存储到数据库

由于我们使用的是 嵌入 模式，将评论与内容一起存储非常简单。所有内容都通过 v-model 指令同步。

ini 复制代码

<Editor v-model="content" ... />

因此，通过自定义保存按钮，你可以进行存储。

xml 复制代码

<script setup>
const content = ref();
function handleSave(){
  fetch('https://myapi.com/...', {
    method: 'POST',
    body: content.value
  })
}
</script>
<template>
    <Editor v-model="content" ... />
    <button @click="handleSave">保存</button>
</template>

准备将评论功能集成到富文本编辑器中？

通过将 TinyMCE 用于文档。你可以快速轻松地创建一个安全的内容创作环境。最重要的是，该系统支持：

用户特定的评论归属
颗粒度的权限控制
评论编辑、删除和回复
线程解决
工具栏自定义
编辑器自动调整大小
AI 集成
从 Word 文档导入内容
自动保存草稿

原文：vueschool.io/articles/vu...