我如何阅读一个连续的文本区域's已编辑

How can I read a tinymce textarea that's edited?

本文关键字:区域 文本 编辑 连续 何阅读 一个      更新时间:2023-09-26

当我单击"编辑下面的HTML,然后单击显示"按钮时,我的输入文本可以正常工作,但当我编辑它们时,我输入的文本区域将无法工作。他们会将它的旧值发送到iframe,但不会发送新值。编辑同义词文本区域时,如何发送新值?这是jsfiddle:http://jsfiddle.net/Ms3NG/1/和下面的代码:

<script type="text/javascript">
function init(buttonid, name, iframeid) {
    document.getElementById(buttonid).addEventListener('click',function() {
//        this.style.backgroundColor = '#cc0000';
      gJSL_displayInput(name, iframeid)
    },false);
    gJSL_displayInput(name, iframeid);
}
window.onload = function() {
init('thisButton','test','iframetest');
init('thisButtona','testa','iframetesta');
init('thisButtonb','testb','iframetestb');
}
    function gJSL_displayInput(nameInput, idOutput) {
        var loc = "::JSLearning::gJSL_displayInput()";
        try {
            var ifrm = document.getElementById(idOutput);
            var cnt = (ifrm.contentWindow || ifrm.contentDocument);
            var doc;
            doc = cnt.document;
            doc.open();
            var inputs = document.getElementsByName(nameInput);
            for(var i = 0; i < inputs.length; i++) {
                doc.write(inputs[i].value + "<br />");
            }
            doc.close();
        } catch (e) {
            exceptionAlert(loc, e);
        }
    }
</script>
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
        tinymce.init({selector:'textarea'});
</script>
<div class="scrollbar">
<input id="test1" name="test" value="ajkla;ldkfj">
<input id="test2" name="test" value="bla2">
<input id="test3" name="test" value="bla3">
<input id="test4" name="test" value="bla4">
<input id="test5" name="test" value="bla5">
<br><br>
<textarea class="ckeditor" id="test6" name="test"></textarea>
<br><br>
<input id="test7" name="test" value="bla7">
<br><br>
<textarea id="test8" name="test">HELLO WORLD</textarea>
<br><br>
<textarea id="test9" name="test">HI EVERYBODY</textarea>
<br><br>
<input id="thisButton" type="button" name="Display" value="Edit HTML Below then Click to Display"/>
</div>

<div class="scrollbar"><iframe id="iframetest" src="" style="background: White;"></iframe></div>

您可以使用以下代码:

content8 = tinyMCE.get('test8').getContent();
doc.write(content8);
content9 = tinyMCE.get('test9').getContent();
doc.write(content9);

以从tinyMCE更新的值中获取值。

查看我为您构建的JSFiddle。

上次我使用tinyMCE时,它没有自动更新文本区域功能。。因此,在提交表单之前,请使用.getContent()更新您的文本区域。。这是链接http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

所以,你的代码看起来像函数gJSL_displayInput(nameInput,idOutput){

    var loc = "::JSLearning::gJSL_displayInput()";
    try {
        var ifrm = document.getElementById(idOutput);
        var cnt = (ifrm.contentWindow || ifrm.contentDocument);
        var doc;
        doc = cnt.document;
        doc.open();
        var inputs = document.getElementsByName(nameInput);
        for(var i = 0; i < inputs.length; i++) {
            if(inputs[i].tagName == 'TEXTAREA')
              doc.write(tinyMCE.get(inputs[i].id).getContent() + "<br />");
            else
              doc.write(inputs[i].value + "<br />");
        }
        doc.close();
    } catch (e) {
        exceptionAlert(loc, e);
    }
}