在Vue组件中显示CKeditor内容？答案

【问题标题】：Display CKeditor content in vue component?在Vue组件中显示CKeditor内容？
【发布时间】：2022-01-18 19:23:23
【问题描述】：

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

例如：</p> <p>Cục Quản l&yacute; Kh&aacute;m chữa bệnh ghi nhận đến 17h chiều 14/12, th&agrave;nh phố c&oacute; 119 ca phải thở oxy, trong đ&oacute; 6 ca thở m&aacute;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>

【问题讨论】：

标签： javascript vuejs2 ckeditor

【解决方案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>

【讨论】：