0

我现在真的很迷茫。。

我有一个带有文本区域的小表单，并使用 TinyMCE 作为所见即所得的编辑器，以便于编写 html 代码。然后我将该代码提交到数据库中，其中有一个名为content. 该列内容的示例是：

<p style="text-align:center;>This is a simple <strong>test</strong></p>

现在，我在表格单元格中显示此内容的简短版本，并希望在用户单击表格时显示表格下方的完整内容。

因此，我<div id="contentToShow"></div>首先创建了一个 div。然后，我有一个表格单元格，设置为不显示，其中包含全部内容，我还有另一个表格单元格，其中包含“截断”数据：

<td style="display:none;" class="fullContent">{{@myVar.content}}</td>
<td class="clickToShowFullContent">{{substr(@myVar.content,0,50)}}[....]</td>

现在我编写了以下 jQuery 以尝试在 div 中显示结果：

$('.clickToShowFullContent').click(function(){
          var content = $(this).prev().html();
          var $jquery_content = $($.parseHTML(content));
          $('#contentToShow').html($jquery_content);
});

现在理论上，这绝对是有道理的。在带有 class 的表格单元格中fullContent，有完整的内容（作为字符串）。我阅读了html表格单元格并尝试将其分配给一个变量，并使用$.parseHTML(). 然后我尝试将内容设置为新创建的变量。

但是，最后，我只能看到 html 代码，而不是解析后的 H​​TML。

我究竟做错了什么？为什么它显示代码而不是解析的html？

编辑：这<td>就是插入内容后的外观

<td style="display:none;" class="fullContent">&lt;p&gt;test123&lt;strong&gt;tqetqetqetqetqetqetqqe&lt;/strong&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;strong&gt;wqeqweqweqweqweeqweqweqweqwe&lt;/strong&gt;&lt;/p&gt;
&lt;h1 style="text-align: center;"&gt;&lt;em&gt;&lt;strong&gt;asfafsafasfasf&lt;/strong&gt;&lt;/em&gt;&lt;/h1&gt;</td>

尝试在小提琴中重新创建它时，一切正常，您可以在此处查看

4

1 回答 1

0

好吧，我搞定了...

似乎问题出在表格单元上..

我现在将其更改为以下内容：

<td style="display:none;" class="fullContent"><input type="hidden" value="{{@myVar.content}}"/></td>

然后使用 javascript 访问它：

var content = $(this).prev().children().val();

然后是相同的转换方法，现在它可以工作了......不知道确切原因，但我让它工作了，猜猜，这是主要的:)

于 2020-04-08T11:27:59.797 回答