javascript - HTML、Javascript - 比 iFrame 更宽的拆分词而不是生成滚动条

标签 javascript html iframe designmode execcommand

我正在使用 ExecCommand 来制作一个非常基本的所见即所得编辑器,因为 future 的项目将需要我制作一个(因此请不要告诉我像 CKEditor 或tinyMCE 这样的东西)。正常使用时一切正常。但是,如果您输入的单词比 iFrame 宽,则该单词不会拆分。相反,滚动条只是添加到 iFrame 中。这是显示我的问题的视频:https://vimeo.com/42699618 所以我想知道防止这种情况最简单的方法是什么?

这是代码:

    <script language="JavaScript">
$(document).ready(function(e) { 
    textArea.document.designMode = 'On'; 

    $("#bold").click(makeBold);
    $("#italic").click(makeItalic);

    function makeBold() {
        textArea.document.execCommand('bold', true, null);
        $("#textArea").focus();
    }
    function makeItalic() {
        textArea.document.execCommand('italic', false, null);
        $("#textArea").focus();
    }
});
</script>
<body>

    <iframe id="textArea" style="width: 700px; height:400px;"></iframe>

最佳答案

本质上,您现有的系统会处理第一部分,将单词放在新行上。您选择了更简单的版本:)

渲染单词时,您需要根据单词的长度和字段的宽度将字符串拆分为多个字符串。

确保您只 Split View中的单词,而不是数据中的单词! 如果用户调整 View 大小,您就不会想再次尝试将数据重新组合在一起:p

步骤: 每次渲染时,都会检查每个单词是否超过 View 的宽度,如果超过,则将其拆分,按顺序渲染各个部分,然后继续。

关于javascript - HTML、Javascript - 比 iFrame 更宽的拆分词而不是生成滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10723265/

相关文章:

javascript - 从 javascript 访问 native C 函数

javascript - 将 JSON 复制为模板

Javascript,字符串插值函数名称

javascript - 如何将点击功能链接到 React 应用程序中的另一个组件?

ios - 如何允许 Cordova 6.1 应用程序从网站在 iOS 中嵌入 iframe?

javascript - 了解 Cloud Firestore 计费

javascript - 如何替换html5中的输出文本框?

reactjs - 在React应用程序中使用iframe标签与本地html文件

javascript - Jquery - 在主页正文点击时隐藏 iframe 内容

javascript - 如何验证表单中每组至少选中了 1 个复选框?