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

我的页面上有几个文本区域，为了节省空间，当用户单击文本区域时，我想在模式对话框中打开文本编辑器。到目前为止我所做的：

已导入以下库和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>

然后尝试运行它：

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调用后初始化编辑器，但没有成功。我是否需要一个特殊的事件监听器，还是无法将这两个元素组合在一起

---

注意：很抱歉没有JSFIDLE，但protoplasm库包含许多子目录，因此我无法将其导入其中。

看起来您试图通过插入元素来创建元素，并在同一行中保留对插入元素的引用。这可能会导致计时错误。更为冗长，但更可靠的方法是使用element.new在幕后创建元素，然后插入它，稍后再使用它执行任何您喜欢的操作。我已经建立了一个类似于您在这里提出的编辑器，它确实有效。还有一个提示：看看你的外循环是否真的捕获了任何元素。添加console.logel作为代码段的第三行，看看您是否真的得到了什么。谢谢您的提示！但是，我对Prototype.js的使用感到非常沮丧，因此我转而使用jQuery和Tiny MCE，因为我更了解这门语言；不，我尝试运行类似的东西：并使用jQuery的$.noConflict；希望它能起作用：D

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