javascript - how to show multiple textarea in code editor (one of my attempt is to use CKEditor)

Question

I am using jquery and CKEditor on the project. I want users can write/edit their html codes in CKEditor. When I input multiple textarea tag in the editor, they look fine because they both stay inside of the textarea as follows,

Then I save it, and I confirmed it is saved correctly because I checked the source code in the file.

However, if I open the file in CKEditor again, it is not being shown properly as follows,

The following is the sample codes I used. It is not the completed codes though.

      <textarea id="eidtArea" name="editScriptContent"><!--Load the saved file here (I will skip this part here)--></textarea>
        <script type="text/javascript">
               CKEDITOR.replace( 'eidtArea');
        </script>   

My questions are :

• 1. Do I miss setting anything in this plugin or is there workaround I can do ?
  2. In fact, I do not really need to use this plugin. I can simply use textarea for users to edit codes. Basically the main reason I want to use this plugin is because I want users can create textarea tag in the editor. However, if I simply use textarea tag as the editor, they cannot add any other textarea tag inside this editor. If there is any workaround for this approach? If so, then I do really need to use CKEditor in this case.

Answer 1

You must encode HTML before printing it out in <textarea>. Otherwise your backend produces this:

<textarea id="editor">
    <p>Some text: <textarea>foo</textarea></p>
    <p>Some text: <textarea>bar</textarea></p>
</textarea>

Which will be parsed by browser as:

<textarea id="editor">
    <p>Some text: <textarea>foo
</textarea>
// And here the rest of the content of the editor,
// but outside the editor's textarea

Therefore, you need to at least replace all < characters with <. E.g. if you use PHP you should pass the content through the htmlspecialchars() function.