Question

我的页面上有几个textareas并且为了节省一些空间我想在用户点击textarea时在模式对话框中打开文本编辑器。到目前为止我做了什么：

导入以下库（和css）：

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
<script type="text/javascript" src="protoplasm.js"></script>

初始化原生质编辑器和模态对话框：

Protoplasm.use('dialog');
Protoplasm.use('rte').transform('textarea.overlay_textarea');

然后尝试运行它：

document.observe("dom:loaded", function () {
    $$("textarea:not(.overlay_textarea)").each(function (el) {
        el.observe('click', respondToClick);
        function respondToClick(event) {
            var element = Event.element(event);
            //var text = element.value;
            var text = $F(element);
            console.log(text);
            var content = '<textarea class="overlay_textarea">' + text + '</textarea>';
            console.log(content);

            function showDialog() {
                var d = new Dialog.HTML(content);
                d.show();
            }
            showDialog();                        
        }
    });
});

HTML就是：

<textarea id="h1_de_1" class="cright_txtarea" >tfzduto</textarea>

这将打开一个新的textarea对话框，其中包含单击的textarea中的文本。但编辑不会打开。我也尝试在showDialog-call之后初始化编辑器，但这不起作用。我是否需要特殊的事件监听器，或者是否无法将这两个元素组合在一起？

P.S。：很抱歉没有jsfiddle，但protoplasm库包含很多子目录，所以我无法在那里导入它。

如何在Prototype.js中组合对话框窗口和富文本编辑器？

0 个答案: