JQuery

ckeditor file structure with jquery

CKEditor File Structure w/ jQuery

CKEditor is the most popular open source WYSIWYG editor for web development. What makes it so great in my opinion is that you do NOT have to use server side script to manage it. But if that’s your thing, don’t worry, it has those options too.

To start off let’s just make a quick file structure by creating in index.html, a js folder that will contain your ckeditor files and jquery library file.

The js/ckeditor folder contains the, latest at the time of this post, library downloaded from the ckeditor website.  I have removed all of the unnecessary files in implementing ckeditor with jquery.

1.    Download latest jquery library to your file structure.
2.    Download latest ckeditor library to your file structure.
3.    Remove all unneeded ckeditor files.

 

Now that you have your file structure set up, we can start looking into the html file. Here is what we will be doing:

1.    Include all the javascript libraries and adapter script.
2.    Create a textarea html element inside a form tag. (Creating it in a form tag allows the save button to submit the form when you click it.)
3.    Write the code to initiate the ckeditor.

As you can see below you add all the <script> tags to include the jquery library, ckeditor library, and the ckeditor adapter for jquery.

<!DOCTYPE HTML>
<html>
    <head>
 
        <title>CKEditor with jQuery</title>
        <!-- JQUERY LIBRARY -->
        <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
        <!-- CKEDITOR LIBRARY -->
        <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
        <!-- CKEDITOR JQUERY ADAPTOR -->
        <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
 
        <!-- CODE TO START YOUR EDITOR -->
        <script type="text/javascript">            
            // jquery document ready function
            $(function(){                    
                    // 1. change the textarea into an editor
                    $('#editor_area').ckeditor();                
            });    
        </script>
 
    </head>
    <body>
        <h1>CKEditor with jQuery</h1>
        <form id="editor_form" method="post" action="index.html">
            <textarea id="editor_area"></textarea>
        </form>
    </body>
</html>

 

 HERE IS WHAT YOU SHOULD HAVE WHEN YOU ARE DONE.

ckeditor created with jquery

The extra javascript at the top of the page is the code you use to initiate the ckeditor.  The syntax looks familiar for you jquery people out there.

So there you have it, quick and simple way to initiate the ckeditor via jquery.

What’s next? How about using it. Removing things from the toolbar, overriding the save button, and maybe even creating your own custom drop down or select.

NEXTLearn how to customize the ckeditor toolbar with jquery.

 

 

One Response to "Starting CKEditor with jQuery"

"SHARING IS CARING"
Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post