在Vue组件中显示CKeditor内容？

Posted 2023-02-16

【中文标题】在Vue组件中显示CKeditor内容？

【英文标题】：Display CKeditor content in vue component?

【发布时间】：2022-01-18 19:23:23

【问题描述】：

我在开发博客时遇到了一个问题。这个博客有两个方面。用于博客管理的管理员端，例如创建、编辑博客……等 在管理方面，我集成了 CKEditor 并将由 CKeditor 编辑的博客内容保存到我的数据库（mysql）中。结果，该内容包含完整的 html 标签和由 CKEditor 自动生成的奇怪字符，如下所示：

例如：</p> <p>Cục Quản lý Khám chữa bệnh ghi nhận đến 17h chiều 14/12, thành phố có 119 ca phải thở oxy, trong đó 6 ca thở máy.</p> <p>

所以现在我使用 Vuejs 来开发用户端。我在 Vue 组件中使用 axios 并从后端调用 api 来获取博客的内容并希望在 Vue 组件中呈现它。 但是渲染后，所有博客的内容都包含html标签。有什么方法可以将 CKEditor 内容转换为 Vue 组件中的纯文本。作为预期的结果，我只想显示纯文本（不是带有完整 html 标签的文本......）

如果有人有任何想法，如果你能建议我，我真的很感激。谢谢。

从 Vue 组件调用 Api：

     <script>
    export default 
      data() 
        return 
          blogs: [],
        ;
      ,
      async mounted() 
        try 
          const url = "api/blog/latest";
          const result = await this.getLatestBlogs(url);
          /* console.log(result); */
          this.blogs = JSON.parse(result.data);
          /* console.log(this.blogs); */
         catch (error) 
          console.log(error);
        
      ,
    ;
    </script>

*在 vue 组件中渲染内容，但我得到的只是 CKEditor 内容，其中包含许多 html 标签作为纯文本

     <p> blogs[0].content </p>

【参考方案1】：

尝试将您的模板更改为：

<p v-html="blogs[0].content"></p>

这与您所要求的相反，但我认为这可能是您想要的——它将保留 HTML，但将其呈现为 HTML（您现在正在获得编码的 HTML）。见https://vuejs.org/v2/api/#v-html

此外，我会为此使用 div 而不是段落：

<div v-html="blogs[0].content"></div>