CODEWITHSUNDEEP
javascriptjqueryhtmlckeditor
clement rakesh n
clement rakesh n

Reputation: 73

Convert CKEDITOR to TextArea

I have a text area and a button. On click of that button I'm converting textarea to ckeditor. My additional requirement is that , on click of other button the ckeditor must be converted back to textarea. My code:

<textarea name="editor"></textarea>
<input type="button" value="click" onclick="CreateEditor('editor')" />

<script type="text/javascript">
    function CreateEditor(name) {

        var editor = CKEDITOR.instances[name];
        if (editor) { editor.destroy(true); }

        CKEDITOR.replace(name, {
            toolbarStartupExpanded: false,
            autoGrow_onStartup: true
        });

        if (CKEDITOR.env.webkit) {
            CKEDITOR.on("instanceReady", function (e) {
                document.getElementsByClassName("cke_wysiwyg_frame cke_reset")[0].contentDocument.body.parentNode.contentEditable = "true";
                if (typeof FocusedElement !== 'undefined') {
                    FocusedElement = e.editor.name;
                }
            });
        }
    }

</script>

How can i achieve this?

Upvotes: 0

Views: 1786

Answers (3)

AlfonsoML
AlfonsoML

Reputation: 12690

You have that in your own code:

    function DestroyEditor(name) {

      var editor = CKEDITOR.instances[name];
      if (editor) { editor.destroy(true); }

    }

Upvotes: 1

Wiktor Walc
Wiktor Walc

Reputation: 5550

In case of a more common use case - the requirement to get the HTML code back from CKEditor (not the text), use editor.getData(). See the documentation for more details.

Upvotes: 0

Rama Kathare
Rama Kathare

Reputation: 930

The following line of code should give you the plane text from the CKEditor

var text = CKEDITOR.instances.editor.document.getBody().getText();

Now, you have to remove CKEDitor for that here is the line of code

CKEDITOR.instances.editor.element.remove()

Now, you can add the <textarea name="editor"></textarea> to your dom again assign text to it like

$("textarea[name=editor]").value = text;

Upvotes: 0

Related Questions