0

我正在使用 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 在所有页面大小上一致呈现？

4

1 回答 1

0

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

于 2019-08-21T20:25:27.263 回答