如何忽略tinymce中的html标签| Vuejs 和 Laravel

Posted 2023-02-23

【中文标题】如何忽略tinymce中的html标签| Vuejs 和 Laravel

【英文标题】：How to ignore html tags in tinymce | Vuejs and Laravel

【发布时间】：2018-11-29 21:44:45

【问题描述】：

我正在使用 laravel 和 vuejs 构建一个应用程序，但由于某种原因我无法正确使用 tinymce。

我可以随心所欲地查看编辑器，并在其中写下我想要的任何内容。但是当我尝试查看内容时，所有的 html 标签都显示为您在图像中看到的那样

我是按照github文档here安装的

npm install @tinymce/tinymce-vue

在我的 vue 模板中导入

import Editor from '@tinymce/tinymce-vue';

components: 
    'editor' : Editor

然后我绑定元素

<editor v-model="post.description"></editor>

所以不是显示“此文本将是bold”，而是应该显示“此文本将是bold”

【问题讨论】：

我不明白你的意图：你想从每一行中排除<p>标签吗？

是的。喜欢的文字应该显示为粗体而不是粗体

您是否尝试在编辑器上输入 HTML 标签而不是使用 GUI 格式？

举个例子：当我在 tinymce 编辑器上时，我输入一个段落和一个我选择加粗的单词。当我查看带有该段落的实际帖子时，我没有看到那个应该是粗体的单词，而是看到了实际的 html 标签。就像我发布的图片一样。因为我不需要用户看到任何 html 标签

@Niloct 永远不会。我刚刚发布了答案

【参考方案1】：

经过一番研究，我最终意识到我必须使用 v-html 才能读取 html 标签

所以不要像这样显示：

<td>post.description<td>

我现在正在做以下事情：

<td v-html="post.description"><td>

【参考方案2】：

我认为您正在以正确的方式使用 TinyMCE。它返回 HTML，而不是纯文本。当您从返回的 HTML 中删除标签时，您将丢失所有格式、图像和链接。但是，如果这是您要寻找的内容，只需深入研究 TinyMCE 文档 - 这是一个配置问题。