javascript - TinyMCE 限制scrollerActived 上的文本

Question

我的 Rails 应用程序中有一个文本区域，用于从数据库中的用户收集内容。 Rails 应用程序进一步将该文本提供给 XML 驱动的 Flex 应用程序。

Flex 应用程序有许多固定大小的容器，这些容器将文本包装在内部(来自 Rails 应用程序即时创建的 XML)，但如果文本超过容器的高度，则会 chop 文本。问题是；无法以 XML 形式呈现大文本，因此它会在编译后的 Flex 应用程序中自动调整。事实是；基于 Web 的 Rails 应用程序和前端 Flex 应用程序在了解其内部事件方面完全脱节。 (就像在这种情况下一样；rails 应用程序不知道 Flex 内部容器的溢出事件，并且依赖字体大小和字符/行数在这种情况下不起作用!)

因此，我编写了一个 JS 函数来观察和挽救文本区域的溢出情况，并同时设置其属性(即；行高、字体大小、字体系列、宽度、高度...yada yada)匹配弯曲控制。 Rails 中的复杂形式巧妙地让 JS 函数观察到此类文本区域控件的动态数量。

以下是处理溢出事件的原型(prototype)代码以及相应的清理救援代码:

var timeout;
document.observe('dom:loaded', attach_obr);

function attach_obr() {
    $$('.active_text').each (function(text_element){
        text_element.observe('keyup', function(e){
            check_limits(text_element.id);
        });
        text_element.observe('change', function(e){
            check_limits(text_element.id);
        });
    });
}

function check_limits(eyeD) {
    if($(eyeD).scrollHeight > $(eyeD).offsetHeight){

        // overflow occured, now the rescue code here
        timeout = window.setTimeout(function() {
            $("error_notice").hide();
        }, 4000);
        $("error_notice").show().update('There is no space left in this box, please use a new box to continue adding content');

        // truncate text till the scrollbar disappears
        while($(eyeD).scrollHeight > $(eyeD).offsetHeight){
            $(eyeD).value = $(eyeD).value.slice(0, -1);
        }
    }
    else {
        if($("error_notice").innerHTML!=""){
            $("error_notice").hide().update("");
            clearTime(timeout);
        }
    }
}

[注意:它有一个小缺陷，即在最后一行中 chop 的字符比预期的要多。用户可以重新输入这些字母，直到该行的末尾。我想这是因为由于滚动条的出现而导致文本区域的宽度变化在某种程度上影响了滚动高度或偏移高度，并且应该有更多的东西循环条件($(eyeD).scrollHeight > $(eyeD).offsetHeight)]

while 循环使速度变慢了一些，但至少它达到了目的。所见即所得。 (我很想听听观众的任何建议来改进那些不优雅的代码:O)

就丰富/格式化文本而言，所见即所得尚未实现。

合并富文本:

在下一阶段，我计划在我的应用程序中部署tinyMCE，而不是期望用户在该区域内放置标签。现在，为了使上述函数与tinyMCE一起工作，我有以下代码:

tinyMCE.init({
    theme_advanced_buttons1 : "bold, italic, underline, strikethrough, separator, justifyleft, justifycenter, justifyright, justifyfull, separator, forecolor, backcolor",
    theme:"advanced",
    mode:"textareas",
    plugins : "safari",
    width: '360px',
    height: '198px',
    setup : function(ed) {
        ed.onChange.add(function(ed, i) {
            check_limits(ed.id);
        });
    }

});

事件的绑定(bind)和触发工作正常。不幸的是，控制文本溢出的目的并没有发挥作用。原因是；

a) ed.id 是我的文本区域的ID，而不是tinyMCE创建的交互式面板。因此，对于隐藏的文本区域控件，诸如scrollHeight 和offsetHeight 之类的属性不会发生更改。

b) 在这种情况下，textarea 的值还包含 HTML 代码而不是实际文本。因此，告诉没有标记的实际文本是什么是非常含蓄的(在我们的例子中， chop 溢出文本时需要标记)。

我的问题:

1. 有没有办法获取tinyMCE创建的控件的scrollHeight和offsetHeight？

2. 有没有办法获取tinyMCE控件内部内容的纯文本版本(无标记)？(因此，当我在 check_limits 函数中 chop 文本时，它不会影响/破坏tinyMCE为格式化文本创建的标记/DOM。换句话说，我将模拟在tinyMCE控件上按退格键的用户操作while 循环。)

3. 使用或不使用tinyMCE 来完成整个练习的优雅方式？

非常感谢任何建议!

Answer 1

首先你需要知道tinymce创建了一个contenteditable iframe来让用户编辑html内容；该 iframe 中的内容会在保存时写回文本区域。文本区域在 rtinymce 初始化过程中被隐藏。编辑器 id 等于文本区域 id。

这里有一些建议:

<强>1。相关代码

var frameid = editor.id+'_ifr';
var currentiframe = document.getElementById(frameid);
var offsetHeight = currentiframe .contentDocument.body.offsetHeight;
var scrollHeight = currentfr.Document.body.scrollHeight

<强>2。代码(使用 jQuery)

var plain_text = $(editor.getBody()).text();

3. 在“没有tinymce”情况下处理while循环的唯一更有效的方法是切掉更多的字符并遵循对数方法。您切掉字符串的较大部分，然后以半部分的速度获得最终值。示例:您分割了 20 个字符，但它很合适。然后从原始字符串中切掉 10 个字符。如果它不适合你尝试 15 个字符等等...这比 while 方法更有效，但开发起来更复杂。

编辑:

从插入符号位置获取行号似乎几乎是不可能的。这里的问题是您不知道文本换行符在哪里。虽然很容易找出光标所在的段落(tinymce 使用段落来包裹文本节点)。

有一种方法可以根据字符限制tinymce中的插入(即限制可以设置为100个字符)，但我想这不适用于您的用例，除非您使用等宽字体。

另一种方法可能是设置tinymce css，将编辑器窗口设置为与弹性框完全相同的宽度(将宽度设置为iframes body元素应该足够了)。在这种情况下，使用scrollHeigth方法会更容易 - 您只需要找出插入文本后高度是否发生变化，然后您可以将高度除以lineheigth以获取行号。我建议你编写一个自己的插件来实现这一点。这并不难。这是a link to a tutorial为此。