CKEditor is a new generation of FCKeditor, which is a redevelopment version. CKEditor is one of the world's best online web text editors. It is widely used in various websites for its amazing performance and scalability. CKFinder is a powerful ajax file manager. Its simple user interface enables all types of users to learn and use it intuitively and quickly, whether from senior professionals or Internet beginners.
URL:
CKEditor: http://ckeditor.com/
CKFinder: http://ckfinder.com/
Use of CKEditor
Preparations
1. Download CKEditor and decompress it to the Web root directory.
2. Simplified directory:
_ Samples folder (the sample file can be deleted)
_ Source folder (source program files can be deleted)
Changes.html (update list, which can be deleted)
Install.html (installation point, which can be deleted)
License.html (license, can be deleted)
CKEditor configuration (config. js file)
For more information about api parameters, see http://docs.cksource.com/ckeditor_api /.
The code is as follows:
// Customize the CKEditor style
CKEDITOR. editorConfig = function (config ){
// Configure the default configuration
Config. language = 'zh-cn'; // configuration language
// Config. uiColor = '# fff'; // background color
// Config. width = 400; // width
// Config. height = 400; // height
// Config. skin = 'V2'; // editor skin style
// Cancel the "drag to change the size" function
// Config. resize_enabled = false;
// Use the basic toolbar
// Config. toolbar = "Basic ";
// Use the all-around toolbar
Config. toolbar = "Full ";
// Use the custom toolbar
// Config. toolbar =
//[
// ['Source', 'preview', '-'],
// ['Cut ', 'copy', 'paste', 'pastetext ', 'pastefromword',],
// ['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
// ['Image', 'flash', 'table', 'horizontalrule', 'smilil', SpecialChar, 'pagebreak'],
//'/',
// ['Bold ', 'italic', 'underline', '-', 'subscript', 'superscript'],
// ['Numberlist', 'bulletedlist', '-', 'outdent ', 'indent', 'blockquote'],
// ['Justifyleft', 'justifycenter', 'justifyright', 'justifyblock'],
// ['Link', 'unlink', 'Anchor '],
//'/',
// ['Format', 'font', 'fontsize'],
// ['Textcolor', 'bgcolor'],
// ['Delimiter', 'showbucket', '-', 'about']
//];
};
CKEditor application
1. Load ckeditor. js in the <! -- Load the CKEditor JS file -->
<Script type = "text/webpage effects" src = "ckeditor/ckeditor. js"> </script>
2. Modify the page command ValidateRequest = "false"
<% @ Page Language = "C #" ValidateRequest = "false" %>
3. Use ckeditor in the <body> label:
<! -- To use ckeditor, you must define class = "ckeditor" -->
<Asp: TextBox ID = "txtContent" class = "ckeditor" TextMode = "MultiLine"
Text = '<% # Bind ("info") %>' runat = "server"> </asp: TextBox>
4. Get or set the content in the editor
// Get the content in the editor
LblView. Text = Server. HtmlEncode (this.txt Content. Text );
// Set the content in the editor
// TxtContent. Text = Server. HtmlDecode ("
CKFinder usage
Preparations
1. Download Asp. NET of CKFinder and decompress it to the Web root directory.
2. Copy the ckfinder. dll file under the/bin/Release directory to the site bin directory.
3. Simplified directory:
_ Samples folder (the sample file can be deleted)
_ Source folder (source program files can be deleted)
CKFinder configuration
1. Open "ckfinderconfig. ascx" and specify the default path for BaseUrl in the SetConfig method, for example:
// Use userfiles as the default path. Subdirectories such as images and flash are automatically generated under the Directory.
BaseUrl = "~ /Ckfinder/userfiles /";
// NOTE: pay attention to "~ /".
2. Integration with CKEditor
Open the config. js file in the CKEditor directory in the function.
The code is as follows:
// Customize the CKEditor style
CKEDITOR. editorConfig = function (config ){
......
};
Add the following content:
The code is as follows:
// Integrate CKFinder in CKEditor. Make sure that the ckfinder path is selected correctly.
Config. filebrowserBrowseUrl = location. hash + '/ckfinder/ckfinder.html ';
Config. filebrowserImageBrowseUrl = location. hash + '/ckfinder/ckfinder.html? Type = Images ';
Config. filebrowserFlashBrowseUrl = location. hash + '/ckfinder/ckfinder.html? Type = Flash ';
Config. filebrowserUploadUrl = location. hash + '/ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Files ';
Config. filebrowserImageUploadUrl = location. hash + '/ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Images ';
Config. filebrowserFlashUploadUrl = location. hash + '/ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Flash ';
// Config. Filebrowser1_wwidth = '201312 ';
// Config. filebrowserWindowHeight = '201312 ';
CKFinder applications
1. Add the ckfinder. dll control in the bin directory of the site root directory in the toolbar.
2. Drag and drop controls to the Web page
3. Modify the CKFinder control attribute BasePath to the relative path of the ckfinder directory.
FAQs
1. Symptoms: files cannot be viewed due to security reasons. Contact the system administrator and check the CKFinder configuration file.
Cause: user authentication is not set or the user is not logged on.
Statement:
The code is as follows:
Public override bool CheckAuthentication ()
{
Return false;
}
Solution: modify public override bool CheckAuthentication () in the config. ascx file of CKFinder to add the user identity permission verification method.
2. Symptoms: Unknown error
Cause: user authentication is not performed, but the BaseUrl path is incorrect.
Statement:
The code is as follows:
Public override bool CheckAuthentication ()
{
Return true;
}
Solution: modify public override void SetConfig () in the config. ascx file of CKFinder.
// Use userfiles as the default path. Subdirectories such as images and flash are automatically generated under the Directory.
BaseUrl = "~ /Ckfinder/userfiles /";
// NOTE: pay attention to "~ /".
3. Symptom: an error "HTTP Error 404-Not Found" is returned when you access a page with CKFinder"
Solution: modify the BasePath attribute of the CKFinder control to the relative path of the ckfinder directory.
To sum up the above tutorial, let's take a look at the detailed configuration methods and configure image upload and security configuration.
CKEditor:
1. Decompress CKEditor to the webRoot directory and load ckeditor. js on the application page;
2. Page textarea:
<Textarea cols = "80 & Prime; name =" editor1 & Prime; rows = "10 & Prime;> </textarea>
CKFinder:
3. Decompress CKFinder to the webRoot Directory (preferably at the same level as CKEditor) and load ckfinder. js on the application page;
4. Page script: (preferably after textarea)
If (typeof CKEDITOR = 'undefined '){
Document. write ('loading CKEditor failed ');
}
Else {
Var editor = CKEDITOR. replace ('editor1 & prime ;);
CKFinder. SetupCKEditor (editor, '../ckeditor/ckfinder/'); // relative path of the total ckfinder directory.
}
Integration:
(Loading the two js files to the same file is actually basically integrated. The configuration to be modified is as follows)
5. open ckfinderconfig. in the php Tutorial, modify $ baseUrl = '(storage path of the uploaded attachment)'; // The absolute path starting with webRoot. Subdirectories such as images and flash are automatically generated under the Directory; by default, it is in the root directory of webRoot. Pay attention to the modification.
Now the configuration is complete. If you need to customize the interface, you can make the following advanced modifications:
6. Add the following custom configuration code to CKEDITOR. editorConfig in ckeditorconfig. js:
// Font.
Config. font_names = '; _ GB2312;; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana; ';
// Tool button.
Config. toolbar =
[
['Source', '-', 'save', 'newpage', 'preview', '-', 'templates'],
['Cut ', 'copy', 'paste', 'pastetext ', 'pastefromword','-', 'print', 'spellchecker ', 'scayt'],
['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
['Form', 'checkbox', 'Radio ', 'textfield', 'textea ', 'select', 'click ',
'Imagebutton ', 'dendenfield'],
'/',
['Bold ', 'italic', 'underline', 'strike', '-', 'subscript', 'superscript'],
['Numberlist', 'bulletedlist', '-', 'outdent ', 'indent', 'blockquote'],
['Justifyleft', 'justifycenter', 'justifyright', 'justifyblock'],
['Link', 'unlink', 'Anchor '],
['Image', 'flash', 'table', 'horizontalrule', 'smiley ', 'specialchar ',
'Pagebreak'], www.111cn.net
'/',
['Styles ', 'format', 'font', 'fontsize'],
['Textcolor', 'bgcolor'],
['Delimiter', 'showbucket', '-', 'about']
];
// Width
Config. width = 500;
// Height
Config. height = 400;
// Skin
Config. skin = 'V2 ';
After CKFinder is installed, the upload function is available:
Step 2: Set the CKFinder Upload function
Because CKEditor's new version does not provide the file upload function, it is a good choice to integrate CKFinder.
You need to modify the JS source code in the CKEditor plug-in folder. Take the image plug-in as an example (the same applies to Flash and Files ):
Code
// Modify the following code
// {Type: 'Button ', id: 'browse', align: 'center', label: m. lang. common. browseServer, hidden: false, filebrowser: 'info: txtUrl '}]},
// Set the browser server button to display status (hidden: false) in, and add the onClick function to open the ckfinder page, followed by the above code
{Type: 'Button ', id: 'browse', align: 'center', label: m. lang. common. browseServer, hidden: false, filebrowser: 'info: txturl', onClick: function () {var finder = new CKFinder (); finder. basePath = '.. /ckfinder20090716/'; finder. selectFunction = SetFileField; finder. popup () ;}}]}]},
Add the following functions to the external body of the method.
// Retrieve the image address returned by ckfinder and assign values to the path text box and preview image
Function SetFileField (fileUrl)
{
// Obtain all text box controls under the primary Div
Var inputStr = document. getElementById ("cke_txtContent_dialog"). getElementsByTagName ("Input ");
For (var I = 0; I <inputStr. length; I ++)
{
If (inputStr [I]. type = "text ")
{
// The first input box controls the image path, get the ID, and set the new image path.
CKEDITOR.doc ument. getById (inputStr [I]. id). setValue (fileUrl );
Break;
}
}
CKEDITOR.doc ument. getById ('previewimage'). setAttribute ('src', decodeURI (fileUrl ));
}
Step 3: CKFINDER Upload: "files cannot be browsed due to security reasons. Contact the system administrator and check the CKFinder configuration file."
After integration, "files cannot be browsed due to security reasons. Contact the system administrator and check the CKFinder configuration file."
The Solution:
1. There is no write access for the default upload folder $ baseUrl = '/userfiles/'; in ckfinder/config. php.
The target folder $ baseUrl = '/userfiles/'; has no write permission.
2. this is maybe because the Return value of Funcation CheckAuthentication () is always FALSE by default in ckfinder/config. php. change the Validation Condition according to your condition, not recommend to set the return value to true directly.
For security reasons, the default return value of the CheckAuthentication () function in the ckfinder/config. Php file is false. You need to manually modify the verification conditions. We do not recommend that you directly return true.
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
