CKEditor, formerly known as FCKeditor, has been used for many years, the function of nature did not say. Recently upgraded to version 3.0, seems to rewrite the code, so the way to build a change, should be said to be simpler.
Related address:
Official website: http://ckeditor.com/
Download Address: Http://ckeditor.com/download
ckfinder:http://ckfinder.com/for upload (four languages, download as needed)
Deployment:
Download the CKEditor, unzip the site/ckeditor/below (of course, the name can be modified, just need to modify the corresponding config file to set the new path)
Call:
Called in the head of the page
<script type= "Text/javascript" src= "/ckeditor/ckeditor.js" ></script>
Then place the code where you want the editor:
Copy Code code as follows:
<textarea cols= "id=" "Text" name= "text" rows= "Ten" > here is the default value, the content of the modified text is placed here. HTML needs to be HTMLEncode encoded </textarea>
<script type= "Text/javascript" >
var editor = ckeditor.replace (' Text ');
</script>
OK, that's it, ckeditor.replace (' Text ') is the code that creates the editor, and the Ckeditor.replace () method can also set the style of the editor, set as follows
Copy Code code as follows:
var editor = ckeditor.replace (' Text ',
{
Language: ' ZH-CN ',//Simplified Chinese
Toolbar://Toolbar settings
[
[' Source '],
'/',
[' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword '],
[' Bold ', ' italic ', ' underline ', ' Strike ', '-', ' subscript ', ' superscript '],
[' TextColor ', ' bgcolor '],
]
});
Specific settings have a lot of specific can see his help:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
This setting can be set in/ckeditor/config.js, after which you modify the default default settings for the editor, and the above settings apply only to the current editor.
The specific setting method is as follows
Copy Code code as follows:
Ckeditor.editorconfig = function (config)
{
Define changes to the default configuration here. For example:
Config.language = ' ZH-CN '; Configure language
Config.uicolor = ' #FFF '; Background color
Config.width = 500; Width
Config.height = 400; Height
Config.skin= ' v2 '; Set the editor style, not too like the present appearance, or like the V2 version of the appearance, clean, refreshing.
Tool bar
Config.toolbar =
[
[' Source '],
'/',
[' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword '],
[' Bold ', ' italic ', ' underline ', ' Strike ', '-', ' subscript ', ' superscript '],
[' TextColor ', ' bgcolor '],
]
};
Data submission
We've basically set it up here. If invoked, the background can use request["text" to get the editor's text.
In FCKeditor (Ver 2.0), it provides a Web control that can be used directly, but does not appear to be available in 3.x, fortunately I use asp.net mvc so there is no problem for me.
It is mentioned above because the default asp.net is to prohibit uploading text with HTML tags, of course, by modifying the configuration of the page, but in FCKeditor (Ver 2.0) He htmlencode the content before submitting the data (& <> replaced with &<>), which is a great way to do this, so you don't need to modify the default settings for asp.net.
However, the default submission in CKEditor is to post the original data directly, and later through the old version of the code found that in fact CKEditor provides a way to HtmlEncode, it is CKEDITOR.tools.htmlEncode ( String), it is not possible to submit directly using the form table, so only JavaScript can be used for submission. My choice is to use jquery Ajax as a way to submit. The code is as follows:
Copy Code code as follows:
$ (function () {
$ ("#btSubmit"). Click (function () {//$ ("#btSubmit") Gets the Submit button, where the click event for the Submit button is bound
var oeditor = ckeditor.instances.text;//Get Editor Object
var text = Oeditor.getdata ();//Get Editor's data
Text = CKEDITOR.tools.htmlEncode (text);//HtmlEncode encoding
$.post ("PostURL", {Text:text},callback)//submit data, specific invocation methods and return types check the jquery Help
function callback (data) {}//callback functions
});
})
Submitting to the server in reverse code is OK.
Security
Although the above submission is good, bypassing the default security defenses of the system, it is easy to commit malicious code, so security verification is required on the server side.
Although CKEditor provides a way to set up the validation, but I did not succeed in the experiment (Ver2 Times did not succeed), do not know how he works, have time to study, the code is as follows:
Copy Code code as follows:
Add code to the ckeditor.editorconfig of the/ckeditor/config.js file
Config.protectedSource.push (/<\S*IFRAME[\S\S]*?>/GI); <iframe> tags.
Config.protectedSource.push (/<\S*FRAMESET[\S\S]*?>/GI); <frameset> tags.
Config.protectedSource.push (/<\S*FRAME[\S\S]*?>/GI); <frame> tags.
Config.protectedSource.push (/<\S*SCRIPT[\S\S]*?\/SCRIPT\S*>/GI); <SCRIPT> tags.
Config.protectedSource.push (/<%[\s\s]*?%>/g); ASP Style server side code
Config.protectedSource.push (/<\?[ \S\S]*?\?>/G); PHP Style server side code
Config.protectedSource.push (<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>) | ( <asp:[^\>]+\/>)/gi);
The server-side validation project, as mentioned above, is based on the label name to determine whether the commit is allowed.
File Upload
There has been a big change in the way files are uploaded in the new version. It uses ckfinder this plug-in to achieve, first or need to download a Ckfinder extract to the site/ckfinder/below
Path can also be modified, you need to invoke code,/ckfinder/config.ascx files,/ckfinder/ckfinder.js files
/ckfinder/config.ascx files need to be modified BaseURL = "/new folder name/userfiles/";
/ckfinder/ckfinder.js files need to be modified Ckfinder.default_basepath = '/new folder name/';
Call Mode:
Copy Code code as follows:
<textarea cols= "id=" "Text" name= "text" rows= "ten" ></textarea>
<script type= "Text/javascript" >
var editor = ckeditor.replace (' Text ');
Ckfinder.setupckeditor (editor, '/new folder name (or default)/');
</script>
Now in the open Editor's pictures, links, flash, the window is a more than one upload tab, you can choose to upload, but also provides browsing capabilities.
Because it involves the access to the folder, the function does not match my website requirements, so I did not use it to provide the default upload, to his modification.
How to upload the changes
My picture server is image.tiyu.cc and the website's server is http://www.jb51.net/, also do not need it to provide browsing function, and in addition to picture upload, not allowed to upload other files.
This requires three places to modify, 1. Modify the default upload 2. Cancel Browsing function 3. Cancel the file, Flash upload function.
CKEditor upload path set in/ckfinder/ckfinder.js, there is a setting is Ckfinder.setupckeditor, it has the following code below, you can set whether the need for pictures, files, flash browse path and upload path.
Copy Code code as follows:
To set the browse path for a file
EDITOROBJ.CONFIG.FILEBROWSERBROWSEURL = URL;
Set the browse path for a picture
EDITOROBJ.CONFIG.FILEBROWSERIMAGEBROWSEURL = URL + qs + ' type= ' + (ImageType | | ' Images ');
Set the Flash file browse path
EDITOROBJ.CONFIG.FILEBROWSERFLASHBROWSEURL = URL + qs + ' type= ' + (Flashtype | | ' Flash ');
Set File Upload file address
EditorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder. Connectorlanguage + "/connector."
+ Ckfinder. Connectorlanguage + "Command=quickupload&type=files";
Set picture file upload address
EditorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder. Connectorlanguage + "/connector."
+ Ckfinder. Connectorlanguage + "command=quickupload&type=" + (ImageType | | ' Images ');
Set the Flash file upload address
EditorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder. Connectorlanguage + "/connector."
+ Ckfinder. Connectorlanguage + "command=quickupload&type=" + (Flashtype | | ' Flash ');
According to the CKEditor is based on the upload path to control whether or not to display the corresponding upload tag, the browse button is also.
Depending on the requirements above, the settings are as follows:
Copy Code code as follows:
To set the browse path for a file
EDITOROBJ.CONFIG.FILEBROWSERBROWSEURL = "";
Set the browse path for a picture
EDITOROBJ.CONFIG.FILEBROWSERIMAGEBROWSEURL = "";
Set the Flash file browse path
EDITOROBJ.CONFIG.FILEBROWSERFLASHBROWSEURL = "";
Set File Upload file address
EDITOROBJ.CONFIG.FILEBROWSERUPLOADURL = "";
Set picture file upload address
EDITOROBJ.CONFIG.FILEBROWSERIMAGEUPLOADURL = "New Address";
Set the Flash file upload address
EDITOROBJ.CONFIG.FILEBROWSERFLASHUPLOADURL = "";
Set here to open the editor again in the corresponding window will be found in addition to the picture upload button outside the other browsing upload is hidden away.
Create a new upload file
The first step is to create a new upload receipt file, accept and save the uploaded file, and then feed the path to the editor.
The editor's reception is implemented in a single method, as follows:
CKEDITOR.tools.callFunction (Fnid, ' FileUrl ', ' message ');</script>
Where Fnid is the number of actual methods invoked, different browsers, CKEditor call different methods.
We only need to call the above method on it, the specific upload success, output on the page code
<script type= "Text/javascript" >window.parent.ckeditor.tools.callfunction (FnID, ' http://www.jb51.net/ Image.jpg ', ' upload success ');</script>
FILEURL, message, can be only one, can also exist at the same time. The message is mainly used for prompting information when an upload fails.
With regard to Fnid, this specific explanation is not very clear, but through the code found that the FF browser its value is 2, the other browser is 1, this can be concluded that through it to inform CKEditor to invoke which method to accept the upload feedback information.
This value can be obtained by our own program. But the better way is CKEditor gives us the value that when we set EDITOROBJ.CONFIG.FILEBROWSERIMAGEUPLOADURL = "New Address" CKEditor will automatically add a few URL parameters for us:
New address? Ckeditor=text&ckeditorfuncnum=2&langcode=zh-cn
Where Ckeditorfuncnum is the fnid we need, we can get it directly and then feedback back.
If you choose to upload across domains, you only need to set a getfile.aspx in the current domain (http://www.jb51.net/) He has three parameters, respectively, to accept the Fnid,fileurl, message, three values, Set into http://Image.jb51.net/upfile.aspx?backUrl=http://in our editorObj.config.filebrowserImageUploadUrl. Www.jb51.net/GetFile.aspx, on it, image.jb51.net domain upfile.aspx accepted to file, after processing completed:
Copy Code code as follows:
Imageurl= "Yun_qi_img/2009111201346_695.jpg"
Message= "based on error or not, set, no error can be empty"
Ckeditorfuncnum=request ("Ckeditorfuncnum")
Response. Redirect ("http://www.jb51.net/GetFile.php?") Imageurl= "+ ImageUrl +" &message= "+ message +" &ckeditorfuncnum= "+ ckeditorfuncnum)
Fix it, call it a night, sleep, and have a good dream.
