Question

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

我已经成功调整了编辑区域的大小，并关闭了编辑器和滚动条的大小调整（无论如何都在Firefox中），但它仍然会让用户继续键入框的边缘。有没有办法禁止这个？

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

感谢您的考虑，我一直在努力解决这个问题！

Answer 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';
}

Answer 2

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

这是一个关于如何编写an own plugin的教程，这并不困难。
您必须检查每个用户操作（keyup，paste，aso。）的编辑器内容密度。为此使用预定义的tinymce事件处理程序。如果670px的尺寸小于实际尺寸，您将使用以下行自动to undo最后一次用户操作tinymce.get('my_editor_id').undoManager.undo();

Answer 3

我基于撤销（THX）将我的解决方案建立在Thariama的想法上。

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中测试。

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

3 个答案: