CODEWITHSUNDEEP
phpjavascriptckeditor
pastx
pastx

Reputation: 113

How to use CKEditor as form input?

I am trying to make simple web editor using CKEditor but i cant find out how to make it work.

First i checked their samples site. Only thing they do to make CKEditor work is include .js file and add ckeditor class to form textarea element.

<script src="../ckeditor.js"></script>
.
.
.
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">

So i copy .js file and try it in my own folder and when i run php script whole textarea element is hidden and doesnt create CKEditor panel as it should like in this sample page. There might be some javascript configuration but i havent found any in source code of sample page.

Upvotes: 0

Views: 41425

Answers (4)

lynx_74
lynx_74

Reputation: 1761

<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<form method="post">
    <textarea name=msg id="editor">Text</textarea>
    <input type="submit">
</form>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => { console.log(editor); })
        .catch(error => { console.error(error); });
</script>

Upvotes: 0

Majid
Majid

Reputation: 14243

  1. Copy all of your ckeditor folder to server.

  2. Add it to html page ;like this:

    <script src="../script/ckeditor/ckeditor.js" type="text/javascript"></script>

  3. Assign CSS class of ckeditor to textarea; like class="ckeditor".

Upvotes: 6

Black Mamba
Black Mamba

Reputation: 15545

<script src="../ckeditor.js"></script>
      <form name="ckeditor">
         <textarea name="editor1" id="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor.
        </textarea>
        <script>
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace( 'editor1' );
        </script>
</form>

As given in the main website.

Upvotes: 1

meshkati
meshkati

Reputation: 2393

call CKEDITOR.replace( 'editor1' ); in your js files or simply in your html file like this:

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
<script>
  CKEDITOR.replace( 'editor1' );
</script>

Upvotes: 10

Related Questions