gpt4 book ai didi

javascript - 将 iFrame 源代码与 textarea 元素同步

转载 作者:行者123 更新时间:2023-11-30 18:17:52 25 4
gpt4 key购买 nike

我正在为我自己的内容管理系统 (CMS) 开发纯 JavaScript 所见即所得编辑器。我需要做的是将 IFRAME 中的源代码与 TEXTAREA 元素的内容同步,这样我就可以切换源代码 View 和富文本编辑来回切换。我有一些代码,它同步数据,但是我只能更改富文本编辑器 (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>

最佳答案

弄清楚了,希望这对其他人有帮助;)

<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>

关于javascript - 将 iFrame 源代码与 textarea 元素同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12828211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com