jQuery 文本编辑器在响应式页面中呈现不一致答案

【问题标题】：jQuery Text Editor doesn't render consistently in responsive pagejQuery 文本编辑器在响应式页面中呈现不一致
【发布时间】：2019-08-21 17:24:34
【问题描述】：

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

即使我在页面首先设置为“小”或“中”的情况下呈现页面，它们也不会呈现。我试过用一个类调用 $().jqte() ，使用单独的不同元素，并使用 $("textarea").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 在所有页面大小上一致呈现？

【问题讨论】：

我在使用其他 jquery 富文本编辑器时遇到了同样的问题。

标签： jqte w3-css

【解决方案1】：

事实证明，我有一个循环错误，导致我有重复的文本区域。我还应该提到我必须单独实例化每个 jqte。使用该类实例化多个文本区域不起作用。

【讨论】：