如何使用TinyMCE在右侧的同一页面中显示内容？

Question

我已经下载了TinyMCE，并将其解压缩到项目目录中。
html部分。

<div id="main">
<div id="container_left">
        <textarea id="mytextarea"></textarea>
        <input id="submit" type="button" value="submit">            
</div>
<div id="show_right"></div>
</div>

css部分。

body{
    width:1000px;
    height:800px;
    border:1px solid  black;
}
#container_left{
    width:40%;
    height:80%;
    border:1px solid red;
    float:left;
}
#mytextarea{
    width:100%;
    height:600px;
    border:1px solid red;
}
#show_right{
    width:40%;
    height:600px;
    border:1px solid red;
    float:right;
}

左侧是文本区域，您可以在其中输入一些文本并使用tinymce对其进行修改；我想在单击“提交”按钮后在右侧显示内容。

js部分。

<script src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: '#mytextarea',
    });
</script>
</script>
<script>
function showAtRight()
{
    var content = document.getElementById("mytextarea").value;
    var target = document.getElementById("show_right");
    target.innerHTML = content;
}

ob = document.getElementById("mytextarea");
ob.addEventListener("click",showAtRight);
</script>

为什么在左侧it is a test上输入container_left并按下按钮submit后，在我的右侧部分中左侧的内容无法显示？

Answer 1

一旦TinyMCE出现在页面上，则底层textarea在页面上将不再可见-您正在输入iFrame。定位原始textarea并不能满足您的需求，因为其中的内容不存在。您可以使用TinyMCE的API获取内容并更新div。这是一个示例：

http://fiddle.tinymce.com/Gegaab/7