ckeditor 从 javascript 更新 textarea答案

【问题标题】：ckeditor update textarea from javascriptckeditor 从 javascript 更新 textarea
【发布时间】：2017-03-23 14:19:36
【问题描述】：

我已经使用 CKEditor 一年了，一切正常。
现在我需要使用 javascript 更改 textarea 中的文本。
我创建了一个示例来说明我的问题。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CKEditor Sample</title>
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
      function othertext() {
        document.getElementById('button').value = 'xxx';
        document.getElementById('noteditor').innerHTML = '<h1>Hello other world!</h1><p>I&#39;m also an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>';
        document.getElementById('editor').innerHTML = '<h1>Hello other world!</h1><p>I&#39;m also an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>';
        CKEDITOR.replace('editor');    
      }  
    </script>
  </head>
  <body id="main">
    <input type="button" id="button" onclick="othertext();" value="NewText" />
    <br>
    <textarea id=noteditor>
      <h1>
        Hello world!
      </h1>
      <p>
        I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.
      </p>
    </textarea>
    <br>
    <textarea name=text id=editor>
      <h1>
        Hello world!
      </h1>
      <p>
        I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.
      </p>
    </textarea>
    <script type="text/javascript">   
      CKEDITOR.replace('editor');    
    </script>
  </body>
</html>

当我单击按钮时，按钮的值会发生变化，与第一个 textarea (id=noteditor) 相同。
但 textarea (id=editor) 不受影响。
为什么？
在调试器中，当行“CKEDITOR.replace('editor1');”在执行 othertext 函数时，我得到 :TypeError.
我做错了什么？

【问题讨论】：

我没有在您的代码中看到任何名称或 id 为“editor1”的 DOM 元素
不幸的是，'1' 潜入了代码:-(
我已经更正了原帖中的代码。结果是一样的，但错误消息是另一个“编辑器实例“编辑器”已附加到提供的元素。”。这条消息对我来说也没有意义。
您已经在页面底部有CKEDITOR.replace('editor'); ，当调用function othertext() onclick 时，您还有另一个CKEDITOR.replace('editor');，但该元素上已经有一个CKEDITOR 实例。
抱歉回复晚了。我病了:-(

标签： javascript html ckeditor textarea

【解决方案1】：

我找到了解决问题的方法！偶然我在这里找到了我的问题的答案：http://sdk.ckeditor.com/samples/api.html 在“使用 CKEditor API”下。我在下面重写了我的第一个代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CKEditor Sample</title>
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
      function SetContents() {
        // Get the editor instance that you want to interact with.
        var editor = CKEDITOR.instances.editor_Area1;
        var value = document.getElementById('HTMLArea' ).value;

        // Set editor content (replace current content).
        // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
        editor.setData( value );
      }
    </script>
  </head>
  <body id="main">
    <input type="button" id="button" onclick="SetContents();" value="Set text" />
    <br>
    <textarea id=HTMLArea>
      <h1>
        Hello other world!
      </h1>
      <p>
        I&#39;m an other instance of <a href="http://ckeditor.com">CKEditor</a>.
      </p>
    </textarea>
    <br>
    <textarea name=text id=editor_Area1>
      <h1>
        Hello world!
      </h1>
      <p>
        I&#39;m an instance of <a href="http://ckeditor.com">CKEditor</a>.
      </p>
    </textarea>
    <script type="text/javascript">   
      CKEDITOR.replace('editor_Area1');    
    </script>
  </body>
</html>

单击按钮时，编辑器区域的内容被文本区域“HTMLArea”中的 html 替换。

【讨论】：