CKEditor 3.6 Getting Started-call CKEditor editor via JavaScript

It programmer development must-all kinds of resources download list, the most complete IT resources in history, personal collection summary.
There are a number of ways to integrate CKEditor into your page, which is the most common practice.

Developer ' s Guide : http://docs.cksource.com/CKEditor_3.x/Developers_Guide

----Integration : http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration

The first step: Loading into the CKEditor

Http://ckeditor.com/download downloads the latest version of CKEditor (3.6 I posted May 9) and copies the CKEditor folder to the root directory of the Web project after decompression. Insert the following code into the page

HTML code

 

 
Part II: Creating CKEditor instances


First, insert a <textarea> node in the page:

HTML code

<textarea id= "Editor1" name= "Editor1" ><p>initial value.</p></textarea>
 

 

 
If you want the editor to display data, such as from a database, when initialized, simply insert them into the <textarea> node, such as the contents of the <p> node above.


After the <textarea> is created, replace the original HTML node with the CKEditor API, as follows:

HTML code

<script type= "Text/javascript" >
	ckeditor.replace (' editor1 ');
</script>
 

 
Or in the window.onload:

HTML code

<script type= "Text/javascript" >
	window.onload = function ()
	{
		ckeditor.replace (' editor1 ');
</script>

 
Step Three: Change the config.js

Config.js is the CKEditor master configuration file, changing config.js to customize its own ckeditor style:

   JS Code 
 
 

   /* Copyright (c) 2003-2011, Cksource-frederico Knabben.  
    All rights reserved. For licensing, license.html or http://ckeditor.com/license/ckeditor.editorconfig = function (con FIG) {//Define changes to default configuration here.   
        For example://config.language = ' fr ';   
        Config.uicolor = ' #AADC6E '; Config.language = ' ZH-CN '; Configuration Language Config.uicolor = ' #FFF '; Background color config.width = ' auto '; Width config.height = ' 300px '; Height Config.skin = ' office2003 ';//interface v2,kama,office2003 Config.toolbar = ' mytoolbar ';//toolbar style (base ' Ba Sic ', Almighty ' full ', custom plugins/toolbar/plugin.js config.toolbarcancollapse = false;//toolbar can be shrunk CONFIG.R esize_enabled = false;//Cancel the "Drag to resize" feature Plugins/resize/plugin.js//custom toolbar config.to Olbar_mytoolbar = [[' Source ', '-', ' Save ', ' Preview ', ' Print '], [' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword ', '-', ' Scayt '], [' Undo ', ' Redo ', '-', ' find ' , ' Replace ', '-', ' selectall ', ' Removeformat '], [' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' smiley ', ' Specialchar   
            ', ' pagebreak '], '/', [' Styles ', ' Format '], [' Bold ', ' Italic ', ' Strike '],   
            [' Numberedlist ', ' bulletedlist ', '-', ' outdent ', ' Indent ', ' Blockquote '], [' Link ', ' Unlink ', ' Anchor '],   
    [' Maximize ', '-', ' about ']];   };
 



Step Fourth: Submit Editor Content


The CKEditor instance can be treated as a <textarea> process, and the contents of the CKEditor instance are submitted to the server when the form is submitted, and the content can be obtained by the name of <textarea>.


If you need to obtain the contents of the CKEditor instance on the client, you can process the form before submitting it by invoking the CKEditor API as follows:

HTML code

    <script type= "Text/javascript" >  
        var editor_data = CKEDITOR.instances.editor1.getData ();   
    </script>  
 


A complete example: HTML code

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  
The results appear as follows: