Recently in their own projects need to use online editor, search on the internet, found CKEditor, of course, there are several online editors, do not know why the choice of CKEditor, originally intended to use FCKeditor, but see the Internet also need to import a few jar packs, Also to carry out a bunch of configuration, a bit of trouble, the original project will be used, but also so troublesome to configure.
So go to ckeditor website to download the latest version of Ckeditor,ckeditor is the next generation of FCKeditor version, so incidentally FCKeditor and CKEditor are downloaded to test which is better to use. After comparison or ckeditor the threshold is relatively low, two lines of code is done, but the configuration of the FCKeditor did not work, and then chose the CKEditor, perhaps we still use fckeditor more. But since the ckeditor threshold is low then natural choice ckeditor.
No more nonsense, the following is for the next ckeditor use it.
To use CKEditor, of course, the first is to http://ckeditor.com/(ckeditor website) Download CKEditor compression package, now the latest is Ckeditor_3.3.zip
After downloading, unzip the compressed package, and copy the CKEditor folder in the folder to the Webroot directory of your Web project.
Open the CKEditor directory and you can see the folder structure as follows
CKEditor
---_samples
---_source
---adapters
---images
---Lang
---plugins
---skins
---themes
....
---ckeditor.js
---config.js
...
From each folder and the name of each file we can easily see their role, _samples folder is the nature of the delegation for us to learn how to use the sample program.
To get one of the things we used to use, the first thing to look at is the example it gives, which allows us to have a holistic understanding of the program and quickly grasp the simple use of the method.
To refer to CKEditor in a JSP page is a very easy thing to do, as long as we have unpacked the CKEditor folder to the Webroot directory, just add the following code to the code of the JSP file ( For example, we want to use CKEditor in a form.
The following index.jsp (a test page built by the author) references CKEditor and tests
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%
String path = Request.getcontextpath ();
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<script type= "Text/javascript" src= "Ckeditor/ckeditor.js" ></script>
<body>
<%
String content=request.getparameter ("Editor1");
if (Content!=null&&!content.equals ("")) {
OUT.PRINTLN (content);
}
%>
<form name= "Testform" method= "post" action= "<%=path%>/index.jsp" >
<textarea cols= "id=" "Editor1" Name= "Editor1" rows= "ten" >
Add content here
</textarea>
<script type= "Text/javascript" >
Ckeditor.replace (' Editor1 ',
{
Skin: ' Kama ',
Language: ' ZH-CN '
});
</script>
<input type= "Submit" value= "submitted"/>
</form>
</body>
The more critical code has been marked in red and blue in the code, and to be able to use it in the page, you must first add the Ckeditor.js to the page in the CKEditor directory.
Form forms are also written as if we were not using ckeditor, just add a section of JavaScript code to the page with the blue
Marked out.
Ckeditor.replace (' Name property value of textarea or id attribute value ' to be replaced with CKEditor ', {CKEditor property to set: property value,......});
The blue code above shows that I set the editor skin style to Kama, and the CKEditor Skins folder defaults to office2003 and VI two skin styles.
Set the CKEditor language to ZH-CN (Simplified Chinese). Of course, you can also set more attributes depending on your individual needs. Here is not too much to introduce, we can through the sample
And compress the documents provided in the package to learn
To extract what we edited in the editor and display it on the page, as well as we extract the form data
<%
String content=request.getparameter ("Editor1");
if (Content!=null&&!content.equals ("")) {
OUT.PRINTLN (content);
}
%>
This code shows how to extract the contents of the editor. Here I submit the form to the page itself.
Through the above introduction, we should be able to see the use of ckeditor convenient and quick. You can refer to the online editor in your project without any change.
Of course, if you want to customize according to their needs to do some more in-depth study, but it is not difficult.
We can create a new Ckconfig.js file in the project specifically to customize their own ckeditor, the following posted a personal configuration
/* Copyright (c) 2003-2010, Cksource-frederico Knabben. All rights reserved. For licensing, license.html or Http://ckeditor.com/license */ckeditor.editorconfig = function (config) {//Define C Hanges to the default configuration here. For example:config.language = ' ZH-CN '; Configuration Language Config.uicolor = ' #BFEFFF '; Background color config.width = 700; Width config.height = 300; Highly config.skin= ' Kama '; toolbar Config.toolbar = [[' Source ', ' Bold ', ' Italic '], [' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '], [' Smiley '], [' Styles ', ' Font ', ' fontsize '], [' TextColor '], [' Undo ', ' Redo ']]; };
You can customize according to your own needs, the following posted a full toolbar configuration file, for everyone to refer to customizing their own toolbars
/* Copyright (c) 2003-2010, Cksource-frederico Knabben. All rights reserved. For licensing, license.html or http://ckeditor.com/license/ckeditor.editorconfig = function (config) {Config.lang Uage = ' ZH-CN '; Config.width = 900; Config.height = 300; Config.skin = ' kama '; Background color Config.uicolor = ' #BFEFFF '; Config.toolbar_full = [[' Source ', '-', ' Save ', ' newpage ', ' Preview ', '-', ' Templates '], [' Cut ', ' Copy ', ' Paste ', ' Pastetext ', ' Pastefromword ', '-', ' Print ', ' spellchecker ', ' Scayt ', [' Undo ', ' Redo ', '-', ' find ', ' Replace ', '-', ' SelectAll ', ' Removeformat '], [' Form ', ' Checkbox ', ' Radio ', ' TextField ', ' Textarea ', ' Select ', ' Button ', ' ImageButton ', ' HiddenField '], '/', [' Bold ', ' italic ', ' underline ', ' Strike ', '-', ' subscript ', ' superscript '], [' Numberedlist ', ' BulletedList ', '-', ' outdent ', ' Indent ', ' Blockquote ', [' justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '], [' Link ', ' Unlink ', ' Anchor '], [' Table ', ' horizontalrule ', ' smiley ', ' Specialchar ', ' pagebreak '], '/', [' Styles ', ' Format ', ' Font ', ' FontsizE '], [' TextColor ', ' bgcolor ']]; };
As long as your profile and ckeditor.js are introduced into the page at the same time, you can display your own defined CKEditor.
Everyone should now have a simple understanding of the ckeditor, hope that the need for friends will help.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
