0

我正在尝试使用 YUI 3 富文本编辑器，遇到了一个我不明白的事件：

当我在可编辑区域内注入来自不同来源的 iframe 时，该 iframe 的内容可以像任何其他内容一样进行编辑。我可以将光标放入 iframe 区域，例如删除字符。

这仅在 Chrome 中发生，使用 Firefox 无法编辑 iframe。尽管内部 iframe 的 DOM 与 YUI 文本编辑器的页面来源不同，但它怎么可能被操纵？

这是示例编码：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    <script>
     YUI().use('editor-base', function(Y) {
       var editor = new Y.EditorBase({content: '<strong>This is <em>a test</em></strong><strong>This is <em>a test</em></strong> '});
       //Add the BiDi plugin
       editor.plug(Y.Plugin.EditorBidi);
       //Focusing the Editor when the frame is ready..
       editor.on('frame:ready', function() {this.focus();});
       //Rendering the Editor.
       editor.render('#editor');
     });
    </script>
    <script>
     function inject() {
       var ifr = $('<iframe/>', {
         style: 'display: block; width: 300px; heigth: 200px;',
         src: 'http://demo.yarkon.de',
         frameBorder: 0, 
         scrolling: 'no'
       });
       $('#editor').find('iframe').contents().find('body').append(ifr);
     }
    </script>
    </head>
  <body>
    <button onclick='inject()'>Inject</button>
    <div id="editor"></div>
  </body>
</html>

Google Chrome 20：iframe 是可编辑的

Firefox 13：iframe 不可编辑

4

1 回答 1

1

YUI 富文本编辑器为可编辑区域创建一个 iframe，并将文档的designMode设置为on。这意味着这个 iframe 及其所有后代都处于可编辑模式。如果您将另一个 iframe 注入到可编辑区域，它将继承此属性并且也是可编辑的，与其来源无关。

因此，YUI 文本编辑器以某种方式操纵注入 iframe 的 DOM 的假设是不正确的：不涉及 JavaScript，它纯粹是与任何其他可编辑字段（如 textarea 或具有 contenteditable 属性的元素）上的用户交互。

于 2012-07-19T08:40:53.533 回答