FCKeditor Introduction
FCKeditor is a powerful text editor that supports WYSIWYG and provides users with online document editing services like Microsoft office software. It is compatible with most mainstream browsers and supports programming environments such as ASP. Net, ASP, ColdFusion, PHP, Java, Active-FoxPro, Lasso, Perl, and ython.
Official Website http://www.fckeditor.net/
Official Document http://wiki.fckeditor.net/
Http://www.fckeditor.net/download/default.html
In fact, the configuration process of FCKeditor in different versions is similar. Here we will introduce the latest 2.6.4 as an example.
FCKeditor installation and configuration
Download two zip packages for fckeditor2.6.4.zip and FCKeditor. NET2.6.3 to the http://www.fckeditor.net
() FCKeditor_2.6.4 is its latest JavasGhost files and images;
(B) FCKeditor.Net_2.6.3.zip is an ASP. NET control DLL file.
Decompress a to obtain the core file of FCKeditor and copy it to the root directory of the web Project (we recommend that you store it as needed ). Decompress B and get. NET-supported source code. Enter. The FCKeditor DLL exists in the Release under the bin (the debug folder is also available here. We recommend that you use release). We need to add a reference to it in the project.
1. Right-click the project browser and choose Add Reference ...), Find the Browse tab, locate the extracted FredCK. FCKeditorV2.dll, and click OK. In this case, a bin folder is added to the FCKPro project directory, which contains the FredCK. FCKeditorV2.dll file.
2. Use FCKeditor on the page
There are two methods:
(1) manual encoding
Add the ASP. NET command to the page:
<% @ Register Namespace = "FredCK. FCKeditorV2" Assembly = "FredCK. FCKeditorV2" TagPrefix = "FCKeditorV2" %>
Add the FCKeditor Control as needed:
<FCKeditorV2: FCKeditor id = "FCKeditor1" runat = "server"/>
(2) integrated into the Visual Studio Toolkit
Open an ASP. NET page, expand Toolbox, right-click the menu, and select "Choose Items... ", in the displayed" Choose Toolbox Items "session box". on the "NET Framework Components" tab, select "Browse", find and select the FCKeditor assembly, open it, return to the "Choose Toolbox Items" window, and click "OK" to import the control.
In this case, a control named FCKeditor is displayed under the General category of Toolbox, which can be used just like the built-in control of Visual Studio.
3. Configure the FCKeditor editor path and file upload path.
The FCKeditor Control is used on the page. You need to know the path of the FCKeditor file group. There are two configuration methods.
(1) Configure Web. Config and add it to the <etettings> node, as shown below:
<Deleetask>
<Add key = "FCKeditor: BasePath" value = "~ /Fckeditor/"/>
<Add key = "FCKeditor: UserFilesPath" value = "~ /Upload/"/>
</AppSettings>
Note:
BasePath: fckeditor is the directory of the entire FCKeditor folder.
UserFilesPath: the path for storing uploaded files and images.
After this configuration method is used, you do not need to configure its BasePath and UserFilesPath attributes for the FCKeditor Control used on any page of the project.
(2) directly configure the FCKeditor Control used
In the code on the page, set the attribute BasePath of FCKeditor to the path of the FCKeditor file group, UserFilesPath to the file upload path of the FCKeditor Editor, or set its BasePath and UserFilesPath values in the Page_Init event processor.
This completes the integration of FCKeditor to ASP. NET pages. After completing the configuration, we can use the FCKeditor Control. To better debug this tool to meet our actual needs, we must modify its attribute settings.
FCKeditor detailed settings
Go to the FCKeditor folder and edit the fckconfig file. In fact, the list is clear, the compilation is more standardized, there are some notes, but as long as you understand English, you can understand it, the operation is also very convenient. The following describes several common settings as a small example.
1. This step is required and the most important step.
Originally:
Var _ FileBrowserLanguage = 'php'; // asp | aspx | cfm | lasso | perl | php | py
Var _ QuickUploadLanguage = 'php'; // asp | aspx | cfm | lasso | php
Changed:
Var _ FileBrowserLanguage = 'aspx '; // asp | aspx | cfm | lasso | perl | php | py
Var _ QuickUploadLanguage = 'aspx '; // asp | aspx | cfm | lasso | php
2. Configure the Language Pack. English and Traditional Chinese are available. Here we use simplified Chinese.
Originally:
FCKConfig. DefaultLanguage = 'en ';
Changed:
FCKConfig. DefaultLanguage = 'zh-cn ';
3. Configure the skin. There are default, office2003, silver style, etc. here we can use the default.
FCKConfig. SkinPath = FCKConfig. BasePath + 'Skins/default /';
4. You can use the Tab key in the editor. (1 is yes, 0 is no)
Change FCKConfig. TabSpaces = 0; To FCKConfig. TabSpaces = 1;
5. add several common font methods, such:
Modify
FCKConfig. FontNames = 'arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';
Changed:
FCKConfig. FontNames = '; _ GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana'
6. The default font in the editor is 12px. You can modify the style sheet to meet the requirements. Open/editor/css/fck_editorarea.css and modify the font-size attribute. Such as font-size: 14px;
7. Enable File Upload
FCKeditor provides powerful and easy-to-use File Upload functions, but the file upload function is not available in the default configuration, which is based on security considerations. However, I think that access security control should be implemented by programs rather than controls.
In the file config. ascx (~ In/fckeditor/editor/filemanager/connectors/aspx/config. ascx), modify CheckAuthentication () to return true. If you want to upload a file with multiple extensions, set the value of ForceSingleExtension in SetConfig () to false. FCKeditor can upload files, images, Flash files, and multimedia files by default () modify AllowedTypes to increase or decrease the allowed types (this type can be defined in TypeConfig ["TypeName"]. For example, in the AllowedExtensions attribute, you can customize the file extension allowed by this type, customize the file extension that is not allowed in DeniedExtensions ).
In the fckconfig. js file, modify the configuration line "FCKConfig. LinkBrowserURL = FCKConfig. BasePath + 'filemanager/browser/default/browser.html? Connector = '+ encodeURIComponent (FCKConfig. basePath + 'filemanager/ORS ors/'+ _ FileBrowserLanguage +'/connector. '+ _ FileBrowserExtension); "is FCKConfig. linkBrowserURL = FCKConfig. basePath + 'filemanager/browser/default/browser.html? Type = File & Connector = '+ encodeURIComponent (FCKConfig. basePath + 'filemanager/ORS ors/'+ _ FileBrowserLanguage +'/connector. '+ _ FileBrowserExtension); "; modify the configuration line" FCKConfig. linkUploadURL = FCKConfig. basePath + 'filemanager/connectors/'+ _ QuickUploadLanguage +'/upload. '+ _ QuickUploadExtension; "is" FCKConfig. linkUploadURL = FCKConfig. basePath + 'filemanager/ORS ors/'+ _ QuickUploadLanguage +' /Upload. '+ _ QuickUploadExtension + '? Type = FILE ';". (In this configuration File, it seems that Type = File is used as the default parameter, but if this parameter is not added, an error will occur .)
8. Security.
If your editor is used on the front-end of the Website, you have to consider security. Do not use the Default toolbar on the front-end, either customize the function or use the Basic defined by the system, that is, the basic toolbar,
FCKConfig. ToolbarSets ["Basic"] = [
['Bold ', 'italic', '-', 'orderedlist', 'unorderedlist', '-', 'link', 'unlink', 'image ', '-', 'about']
];
In fact, you can set these settings as needed. They are powerful enough to provide more options and certainly meet your needs.
Of course, you can also configure Web. Config to ensure security. Next we will talk about it.
FCKEditor 2.6:
1. FCKeditor "this connector is disabled Please check the" editor/filemanager/connectors/aspx/config. aspx "error Solution
Open editor/filemanager/connectors/aspx/config. ascx and modify the CheckAuthentication () method. true is returned.
Private bool CheckAuthentication ()
{
Return true;
}
2. in the Upload File window, click browse server, and the server didn't send back a proper xml will appear ..... error message: FCKEditor later versions require different types of files to be uploaded to different directories, including directories such as file, image, falsh, and media, which must be created first.
FCKeditor simplified
Go to the FCKeditor folder and delete all files and folders starting with "_". These are examples. Only the editor folder, fckconfig, fckeditor, and fckpackager are retained. xml, fckstyles. xml, fcktemplates. xml is enough;
Go to the editor folder and delete the "_ source" folder, which also contains the source file;
Go back to the upper-level directory and enter the filemanager folder. There are two folders: browser and upload. Go to browser "default" connectors, and retain only the aspx folder, and delete the rest; The mcpuk directory can also be deleted; the same is true for upload, and only the aspx folder;
Return to the editor and enter the images folder. The smiley folder contains emoticon icons, including msn and fun. If you want to use your own emoticon icons, you can delete them; if you want to use the emojis here, do not delete them;
Lang contains a Language Pack. If you only use simplified Chinese, you can only keep the fck1_agemanager and zh-cn files. We recommend that you retain en (English) and zh (Traditional Chinese) files) two files. fcklanguagemanager is the language configuration file, which can be paired with the settings in fckconfig. The corresponding language file must be retained!
Exit the lang folder and enter the skins folder. If you want to use the default FCKeditor milk yellow, delete the other two folders except the default folder. If you want to use other folders, it depends on your preferences.
FCKeditor values can be easily implemented as long as FCKeditor1.Value
After configuring the FCKeditor editor, you can use it. However, the problem is unpleasant;
The toolbar interface of the editor is too large to be used.
I want to edit it. I went to some useless ones and changed a location as I used. Of course.
In the FCKeditor directory, locate the fckconfig. js file, open it, and call FCKConfig. ToolbarSets ["Default"].
The buttons on the toolbar of the FCK editor are as follows:
FCKConfig. ToolbarSets ["Default"] = [
['Source', 'docprops', '-', 'save', 'newpage', 'preview', '-', 'templates'],
['Cut ', 'copy', 'paste', 'pastetext ', 'pasteword','-', 'print', 'spellcheck'],
['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
['Form', 'checkbox', 'Radio ', 'textfield', 'textta', 'select', 'click', 'imagebutton ', 'hiddenfield'],
'/',
['Bold ', 'italic', 'underline', 'strikethangout', '-', 'subscript', 'superscript'],
['Orderedlist', 'unorderedlist', '-', 'outdent ', 'indent'],
['Justifyleft', 'justifycenter', 'justifyright', 'justifyfull'],
['Link', 'unlink', 'anchor '],
['Image', 'flash', 'table', 'rule', 'smilil', 'specialchar ', 'pagebreak', 'universalkey'],
'/',
['Style', 'fontformat', 'fontname', 'fontsize'],
['Textcolor', 'bgcolor'],
['Fitwindow', '-', 'about']
];
Before modification, remember to back up the data. Of course, you can comment out the original data and write a new one. Pay attention to the syntax.
"/" Is a line feed, "-" is a vertical line, and [] is a display block area.
My modification results
FCKConfig. ToolbarSets ["Default"] = [
// ['Source', 'docprops', '-', 'save', 'newpage', 'preview', '-', 'templates'],
['Fitwindow', 'source'],
['Cut ', 'copy', 'paste', 'pastetext ', 'pasteword','-', 'print', 'spellcheck'],
['Undo ', 'redo', '-', 'Find ', 'replace', '-', 'selectall', 'removeformat'],
// ['Form', 'checkbox', 'Radio ', 'textfield', 'textta', 'select', 'click', 'imagebutton ', 'hiddenfield'],
//'/',
['Image', 'flash', 'table', 'rule', 'smilil', 'specialchar ', 'pagebreak', 'universalkey'],
['Textcolor', 'bgcolor'],
['Bold ', 'italic', 'underline', 'strikethangout', '-', 'subscript', 'superscript'],
['Orderedlist', 'unorderedlist', '-', 'outdent ', 'indent'],
['Justifyleft', 'justifycenter', 'justifyright', 'justifyfull'],
['Link', 'unlink', 'anchor ']
//'/',
// ['Fontformat', 'fontname', 'fontsize'],
];