tinyMCE - 我需要限制输入文本的宽度/高度答案

【问题标题】：tinyMCE - I need to limit width/height of text enteredtinyMCE - 我需要限制输入文本的宽度/高度
【发布时间】：2012-03-28 17:33:22
【问题描述】：

我有一个 tinyMCE 文本区域，我想在其中限制用户输入的大小（以像素为单位）。真的，我愿意。我知道这不是大多数人使用 tinyMCE 的方式，但我们允许客户为特定尺寸（407 像素 x 670 像素）的广告输入和格式化他们自己的广告文字。所以我想限制他们可以输入的特定大小。我不能限制字符的数量，因为这会因字体样式/大小而异。我实际上希望输入适合特定大小的框。

我已经成功地调整了编辑器区域的大小并关闭了编辑器和滚动条的大小调整（无论如何在 Firefox 中），但它仍然会让用户继续在框的边缘输入内容。有什么办法可以禁止吗？

http://www.retailpromoinc.com/RestaurantAdvertising.php

感谢您的考虑，我已经为此苦苦挣扎了好几个小时！

【问题讨论】：

标签： tinymce textarea

【解决方案1】：

这是一个复杂的问题，据我所知，TinyMCE Api 没有这样做的功能。您可以尝试配置由 TineMCE 创建的 iFrame。

作者：

function iFrameConfig() {
    var iFrame = document.getElementById('textareaid_ifr');
    iFrame.setAttribute('scrolling', 'no');
    iFrame.style.width = '300px';   
    iFrame.style.height = '600px';
}

【讨论】：

这不会像 user1279447 所希望的那样工作。可以输入文本，但不会在编辑器中显示。但是输入的内容在编辑器中！

【解决方案2】：

看起来你必须为此写an own plugin。我将向您展示为此所需的步骤。

这里有写an own plugin的教程，不难。
您必须检查每个用户操作（keyup、paste 等）的编辑器内容高度。为此，请使用预定义的 tinymce 事件处理程序。如果 670px 的大小小于实际大小，您将使用以下行 tinymce.get('my_editor_id').undoManager.undo(); 自动执行最后一个用户操作 tinymce.get('my_editor_id').undoManager.undo();

【讨论】：

【解决方案3】：

我的解决方案基于 Thariama 的 undo (THX) 想法。

setup : function(ed) {
    ed.wps = {}; // my namespace container
    ed.wps.limitMceContent = function(ed) {
        if ((ed.wps.$textcanvas.height() + ed.wps.textcanvasDummyHeight) > ed.wps.iframeHeight) {
            ed.undoManager.undo();
        }
    };


    ed.onKeyDown.add(ed.wps.limitMceContent);
    ed.onChange.add(ed.wps.limitMceContent); // change is fired after paste too

    ed.onInit.add(function(ed) {
        // cache selectors and dimensions into namespace container
        ed.wps.$iframe = $("textarea.tinymce").next().find("iframe");
        ed.wps.iframeHeight = ed.wps.$iframe.height();
        ed.wps.$textcanvas = $(ed.wps.$iframe[0].contentDocument.body);
        ed.wps.textcanvasDummyHeight = parseInt(ed.wps.$textcanvas.css("marginTop"), 10) + parseInt(ed.wps.$textcanvas.css("marginBottom"), 10);
    });
}

Working demo。适用于keyDown 和paste。仅在 FF 12 和 Chrome 中测试。

【讨论】：