查找/替换 Texareas 内部所见即所得答案

【问题标题】：Find/Replace Inside Texareas WYSIWYG查找/替换 Texareas 内部所见即所得
【发布时间】：2013-01-15 01:30:11
【问题描述】：

我认为查找/替换文本的问题在于所见即所得的介入。不过，我敢肯定有人已经知道如何施展魔法了。

这是文本区域，没有附加编辑器：

<textarea id="template1" style="width:400px; height:200px;">
<div>Dear {{companyname}},</div>
<div>A new Support Case has been opened for you.</div>
<div>Support Case description:</div>
.........more html text follows
</textarea>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

   var str = $("#template1").val();
   var newstr = str.replace("{{companyname}}", "ACME Inc");
   $("#template1").val(newstr);

}); 
</script>

没有编辑器，我很高兴。一旦我应用我选择的编辑器 (TinyMCE)，replace() 方法就会被忽略。

有人知道为什么吗？

【问题讨论】：

只是一个想法，也许 TinyMCE 用它们各自的 ISO 代码替换了大括号，这值得研究。
tinyMCE 正在用 iframe 替换 textarea。我想他们提供了访问内容/设置一些回调的方法。但是您是否尝试在替换后实例化您的编辑器？
我所知道的每个所见即所得都将使用 textarea 的内容作为起点，但是一旦初始化，它们或多或少地忽略它并指向库创建/插入的可编辑区域。查看他们的 API，了解在给定实例中为搜索/替换而公开的任何方法。

标签： javascript jquery replace tinymce wysiwyg

【解决方案1】：

替换功能不起作用的原因有两个。

1. 以前的 textarea 的内容被替换了，但是您看不到结果，因为 tinymce 隐藏了 textarea 并使用 contenteditable iframe 来加载和设置以前的内容的样式。编辑器内容被写回文本区域 onSave 和 onSubmit

2. $(document).ready您页面的所有资源都已加载，但 tinymce 编辑器尚未准备好。

这将导致关于如何替换tinymce 编辑器中的代码的问题。 $(document).ready 在这里无济于事。您将需要使用 tinymce 配置参数onInit

// Adds an observer to the onInit event using tinyMCE.init

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed) {
          //console.debug('Editor is done: ' + ed.id);

          // replace the editor content
          var str = ed.getContent();
          var newstr = str.replace("{{companyname}}", "ACME Inc");
          ed.setContent(newstr);
      });
   }
});

【讨论】：

【解决方案2】：

如果您在您最喜欢的页面检查器（firebug、dev tools、dragonfly 等）中查看由 tinymce 生成的实际 Html，您会发现您实际上正在编辑启用 contentEditable 的 iframe。据我所知，它将使用 textarea/input 来设置初始内容，并在您将表单发布回服务器时执行其他某种巫术来将其设置回来。

如果您想手动操作，可以使用以下方法：

http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent

您可以通过这些进行文本处理。

【讨论】：