ckeditor update textarea from javascript

Question

I have used CKEditor a year now and everything has worked as it should.
Now I need to change the text in the textarea using javascript.
I have created an example that illustrates my problem.

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

When I click the button, the value of the button changes, the same with the first textarea (id=noteditor).
But textarea (id=editor) is not affected.
Why?
In debugger, when the line "CKEDITOR.replace('editor1');" in function othertext is executed I get <exception>:TypeError.
What am I doing wrong?

I didn't see any DOM element with name or id "editor1" in your code — ArtOsi
I have corrected the code in the original post. The result is the same, but the error message is another "The editor instance "editor" is already attached to the provided element.". This message does not make sense to me too. — Ebbe
You already have CKEDITOR.replace('editor'); at the bottom of the page, and when calling function othertext() onclick you have another CKEDITOR.replace('editor'); but there is already an instance of CKEDITOR on that element. — ArtOsi

Ebbe Ebbe · Accepted Answer · 2017-04-10T19:38:47

I found a solution to my problem! By chance I found the answer to my question here: http://sdk.ckeditor.com/samples/api.html under "Using CKEditor API". I have rewritten my first code here below:

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

When clicking on the button, the content of the editor-area is replaced by the html from the textarea "HTMLArea".

ckeditor update textarea from javascript

1 Answers