jQuery Text Editor在响应页面中呈现不一致

Question

我正在使用w3.css进行响应式页面设计。 每个大小（小，中，大）都有自己独特的（但几乎相同）代码，我将其称为“段”。 每个部分都有多个jQuery文本编辑器（JQTE）。 当我查看大页面时，所有JQTE都完全没有问题。 当我（使用浏览器开发人员工具）查看“中”或“小”页面时，即使我使用浏览器开发人员工具查看元素时，JQTE仍显示为标准textarea元素，所有JQTE均已成功呈现。

即使在我首先将页面设置为“小”或“中”的情况下渲染页面，它们也不会渲染。 我试过用带有单独的不同元素的类和$（“ textarea”）。jqte（）来调用$（）。jqte（），但JQTE仍然只能正确地为大页面呈现。

下面的代码使用ColdFusion中的循环渲染，因此＃id＃值将替换为实际的数值。

<!--LARGE-->
<div class="w3-hide-small w3-hide-medium lgdiv#id#" style="display:none">
    <textarea name="lgtext#id#" id="lgtext#id#" class="jqteeditor"></textarea>
</div>
<!--MEDIUM-->
<div class="w3-hide-small w3-hide-large mddiv#id#" style="display:none">
    <textarea name="mdtext#id#" id="mdtext#id#" class="jqteeditor"></textarea>
</div>
<!--SMALL-->
<div class="w3-hide-medium w3-hide-large smdiv#id#" style="display:none">
    <textarea name="smtext#id#" id="smtext#id#" class="jqteeditor"></textarea>
</div>

我用以下方法渲染JQTE：

$("textarea").jqte({
    'format': false,
    'fsize': false,
    'color': false,
    'b': true,
    'i': true,
    'u': true,
    'ul': false,
    'ol': false,
    'sub': false,
    'sup': false,
    'outdent': false,
    'indent': false,
    'right': false,
    'center': false,
    'left': false,
    'strike': false,
    'link': false,
    'remove': false,
    'unlink': false,
    'source': false,
    'rule': false
});

要么

$(".jqteeditor").jqte({
    'format': false,
    'fsize': false,
    'color': false,
    'b': true,
    'i': true,
    'u': true,
    'ul': false,
    'ol': false,
    'sub': false,
    'sup': false,
    'outdent': false,
    'indent': false,
    'right': false,
    'center': false,
    'left': false,
    'strike': false,
    'link': false,
    'remove': false,
    'unlink': false,
    'source': false,
    'rule': false
});

或分别针对每个元素：

$("#{elementid}").jqte({
    'format': false,
    'fsize': false,
    'color': false,
    'b': true,
    'i': true,
    'u': true,
    'ul': false,
    'ol': false,
    'sub': false,
    'sup': false,
    'outdent': false,
    'indent': false,
    'right': false,
    'center': false,
    'left': false,
    'strike': false,
    'link': false,
    'remove': false,
    'unlink': false,
    'source': false,
    'rule': false
});

其中{elementid}对应于sm，md和lg的每个id。

根据大小，我有一些按钮来显示包含JQTE的div：

<div class="w3-hide-small w3-hide-medium">
    <i class="far fa-comment"  onclick="ShowJQTE('lg',#id#)"></i>
</div>
<div class="w3-hide-small w3-hide-large">
    <i class="far fa-comment"  onclick="ShowJQTE('md',#id#)"></i>
</div>
<div class="w3-hide-large w3-hide-medium">
    <i class="far fa-comment"  onclick="ShowJQTE('sm',#id#)"></i>
</div>

ShowJQTE只是在切换相应div的显示。

如何使JQTE在所有页面尺寸上一致地呈现？

Answer 1

事实证明，我遇到了一个循环错误，导致我有重复的文本区域。 我还应该提到，我必须分别实例化每个jqte。 使用该类实例化多个文本区域无效。