1

我正在为我自己的内容管理系统 (CMS) 开发一个纯 JavaScript 所见即所得编辑器。我需要做的是将 IFRAME 中的源代码与 TEXTAREA 元素的内容同步，这样我就可以切换源代码视图和来回编辑富文本。我有一些代码，它同步数据，但是我只能更改富文本编辑器 (IFRAME) 中的内容，而不是源编辑器 (TEXTAREA)。这样做的目的是通过 POST 表单将数据提交到服务器，因为我不知道我还能怎么做。我也不想使用 jQuery。我不是“JavaScript 专家”。无论如何，这是我的代码部分：

<iframe id="editor" frameborder="0"></iframe>
<textarea id="html" onchange="document.getElementById('editor').contentWindow.document.body.innerHTML=this.value;"></textarea>
<script>
var e = document.getElementById("editor").contentWindow;
e.document.designMode = "on";
e.document.open();
e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>");
e.document.close();

function def() {
   document.getElementById("fontName").selectedIndex = 0;
   document.getElementById("fontSize").selectedIndex = 1;
   document.getElementById("foreColor").selectedIndex = 0;
}

function edit(x, y) {
   e.document.execCommand(x, false, y);
   e.focus();
}

setInterval(function() {
    document.getElementById("html").value = e.document.body.innerHTML;
}, 200);
</script>
4

2 回答 2

2

想通了，希望这对其他人有帮助；）

<iframe id="editor" frameborder="0">test</iframe>
<textarea id="html" onfocus="editor.rte();" onblur="editor.source();"></textarea>
<script>
<!--
//<![CDATA[
var editor = function() {
    var e = document.getElementById("editor").contentWindow;
    e.document.designMode = "on";
    e.document.open();
    e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>");
    e.document.close();
    var a, b;
    return {
        run:function(c, s) {
            e.document.execCommand(c, false, s);
        },
        source:function() {
            clearInterval(b);
            a = setInterval(function(){document.getElementById("html").value = e.document.body.innerHTML;}, 200);
        },
        rte:function() {
            clearInterval(a);
            b = setInterval(function(){e.document.body.innerHTML = document.getElementById("html").value;}, 200);
        }
    };
}();
editor.source();
//]]>
-->
</script>
于 2012-10-11T01:08:19.957 回答
0

@独奏

该代码不好，请尝试在 textarea 中键入 <input>。你不能在上面输入，因为间隔。所以，我的提示是，只运行代码然后用户完成输入。喜欢..

var timer = null;
$('textarea').keydown(function(){
   clearTimeout(timer); 
   timer = setTimeout(doStuff, 300)
});

function doStuff() {
   e.document.body.innerHTML = document.getElementById("html").value;
}

对不起，我的英语不好

于 2013-12-28T03:56:25.957 回答