Adding HTML Editor to Your Site

Adding HTML Editor to Your Site

1 Comment , Edit

What is HTML Editor?

HTML Editor is a web form similar to word processor (Ex. Microsoft word or Google Docs) that allow users to enter and format text. When from is Submitted the editor converts formatted text into HTML.

HTML Editor Example (CKEditor)
HTML Editor Example (CKEditor with Office 2013 Skin)

Here we'll see two popular HTML Editors:
  • CKEditor
  • TinyMCE
Both Editors will allow you to do some of most common formatting
  • Bold, Italic, and Underlining
  • Cut, Copy and Paste
  • Undo and Redo
  • Insert/Edit Image
  • Change Font Color and Background Color
  • Insert/Remove Bullet List and Numbered List
  • Align Left, Center, Align Right, Justify
  • Insert/Edit Link
  • Add Heading (H1, H2, H3 ...)
  • Increase and Decrease Indent


Installing the Editors

Both the editors are very easy to install and configure
  • Download the JavaScript Code
  • Create a Web form with textarea element
  • Replace the textarea with HTML editor using javascript

Installing CKEditor

  1. Go to the download page of the CKEditor
  2. Select the package and check the button if you want further customize the editorCKEditor download page
  3. Click on the download button, then extract the .zip or .tar to a ckeditor folder
  4. Move the ckeditor folder into your website folder, for example SoneValley is your website folder
  5. Create a html file MyEditor.html in SoneValley folder
  6. Copy the following code and Paste into MyEditor.html file
MyEditor.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor\ckeditor.js"></script>
    </head>
    <body>
     <form>
         <textarea name="editor1" id="editor1" rows="10" cols="80">
             https://sonevalley.blogspot.in
         </textarea>
         <script>
             // Replace the <textarea id="editor1"> with a CKEditor
             // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
         </script>
        </form>
    </body>
</html>

This is how CKEditor Full Package looks
CKEditor HTML Editor
CKEditor HTML Editor



Installing TinyMCE

  1. Go to the download page of the TinyMCE
  2. Download TinyMCE Dev Package, then extract the .zip or .tar to a tinymce folder
  3. Move the tinymce folder into your website folder, for example SoneValley is your website folder
  4. Create a html file MyEditor.html in SoneValley folder
  5. Copy the following code and Paste into MyEditor.html file
MyEditor.html 
<!DOCTYPE html>
<html>
    <head>
    <script src="tinymce\js\tinymce\tinymce.js"></script>
        <script type="text/javascript">
            tinymce.init({
             selector: '#mytextarea',
             toolbar: 'undo redo styleselect bold italic forecolor backcolor alignleft aligncenter alignright bullist numlist outdent indent link image charmap',
             plugins : 'advlist textcolor link image charmap autoresize',
             autoresize_max_height: 600,
             mode : "exact",
             elements : "mytextarea"
            });
        </script>
        </head>
        <body>
        <h1>TinyMCE HTML Editor</h1>
        <form method="GET" action="converted.html">
            <textarea id="mytextarea"  rows="10" cols="80">
                https://sonevalley.blogspot.in
            </textarea>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>


Adding Plugins
You can always add/remove plugins to TinyMCE editor, for example adding Full Screen plugin
tinymce.init({
  selector: '#mytextarea',  // change this value according to your HTML
  menubar: false
});
for more plugins information check out Add Plugins to TinyMCE

If you want to remove Menu bar or Status bar do the following
tinymce.init({
  selector: '#mytextarea',
  menubar: false,
  statusbar: false
});


This is how TinyMCE looks
TinyMCE HTML Editor
TinyMCE HTML Editor


References

CKEditor Documentation
TinyMCE Documentation
SHARE
    Blogger Comment
    Facebook Comment

1 comments:

Subscribe to: Post Comments ( Atom )