FCKeditor 2.0 online editor setting and modification and use

FCKeditor can directly use a brand new website without any modifications. However, for the vast majority of existing websites, some FCKeditor settings are not suitable for your use. This article aims to tell you how to modify FCKeditor to make it easier for your website to use.

The first task is to streamline the powerful editor. Of course, it is to streamline the file, not the function. Here, I use the FCKeditor of asp as an example to go to The FCKeditor 2.0 folder and delete all the folders starting, these folders contain examples or other tools. In fact, only the editor folder and fckconfig are retained. js, fckeditor. asp, fckeditor. js, fckstyles. xml, fcktemplates. xml is enough. The outermost layer is simplified. after entering the editor folder, delete the "_ source" folder first. Here are some source files, which are useless for use.

Go to the images folder and delete the smiley folder. Some files are placed with emoticon icons. Because I will use my own emoticon icons to delete them first, of course, if you want to use the emojis here, do not delete them. Exit images and enter the lang folder. Here, you can clean things in a large way, only keep fck1_agemanager. js, zh-cn.js, en. js, zh. js. The first file is the language configuration file, which can be used with fckconfig. js settings correspond to the corresponding language files, zh-cn.js is a simplified Chinese Language Pack, en. js is not required, zh. js is in Traditional Chinese. How is it? A few hundred KB is missing at once ~

Then exit the lang folder and enter the skin 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 another folder, I will give you a suggestion. If you don't want to use the default one, select silver, because silver is gray and it won't be ugly, but the office2003 skin, I really do not like it anyway, and the image is relatively large, and the download time is increased, no!

In the last step of streamlining, exit the skin folder and go to filemanager. If you are not using the latest fckeditor version, a folder browser is used. The new version also has an upload folder. One by one, first go to filemanager/browser/default/connectors/. Because I use asp, all except asp folders are deleted. Next, go to filemanager/upload/, and leave only the asp folder. Now, the simplified editor is complete. Next, let's modify the settings of the editor.

--------------------------------------------------------------------------------

The first modified file is the fckeditor configuration file, which is located in the fckconfig. js file under the root directory. Please follow the list below (take fckeditor 2.0 as the standard ):

Find row 20th FCKConfig. DefaultLanguage = 'en'; change to FCKConfig. DefaultLanguage = 'zh-cn'; set the default language to simplified Chinese
Find row 40th FCKConfig. TabSpaces = 0; change to FCKConfig. TabSpaces = 1; that is, you can use the Tab key in the editor.

If your editor is still used at the front-end of the website, for example, for message book or diary reply, you have to consider security. Do not use the Default toolbar on the front-end or customize the function, either use the Basic defined by the system, that is, the Basic toolbar,
Find row 64th FCKConfig. ToolbarSets ["Basic"] = [
['Bold ', 'italic', '-', 'orderedlist', 'unorderedlist', '-',/* 'link', */'unlink ', '-', 'style', 'fontsize', 'textcolor', 'bgcolor', '-', 'smiley ', 'specialchar', 'replace ', 'preview']
];
This is the Basic I changed. I removed the image function and removed the Add link function, because the image and link and flash and image button adding functions allow the front-end page to directly access and upload files, if I don't change it here, I will upload a Trojan to you. Isn't it ready? However, fckeditor also supports the right-click function in the editing area.
Find row 73rd
FCKConfig. contextMenu = ['generic',/* 'link', */'anchor ',/* 'image', */'flash', 'select', 'textarea ', 'checkbox', 'Radio ', 'textfield', 'hiddenfield',/* 'imagebutton', */'call', 'bulletedlist', 'numberedlist', 'tablecell ', 'table', 'form'];

This is also the "link, image, FLASH, image button" function that I changed to remove the right mouse button.

Find row 77th FCKConfig. FontNames = 'arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';
Add several common fonts FCKConfig. FontNames = '; _ GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';

After upload and upload. asp? Type = XX is changed to Type = YY, where YY is the name of the folder where you want to save the file.

If you still want to use your own emoticon icon, jump to row 3 and change the folder address of the emoticon icon and the file name of the emoticon icon below, the three numbers below are the number of emotices displayed on each line and the width and height of the pop-up window. The size depends on the size of the window arranged by the emoticon icon. OK. The change to the total configuration file is complete.

--------------------------------------------------------------------------------

Next, set the editor location. My habit is to put the editor under the root directory, and the five files mentioned at the beginning are also under the root directory (Tips: it is recommended to put it under the root directory, we recommend that you set the path to an absolute path, for example, "/fckeditor/", and my usual setting is "/". This is conducive to the update and upgrade of fckeditor, in addition, all folders on the website can be called at will. There is no problem where the name of other folders has changed and the editor cannot be used elsewhere.

Open the fckeditor. asp file and find sBasePath = "/fckeditor/" to change it to sBasePath = "/"
Open the fckeditor. js file and find this. BasePath = '/fckeditor/'; change this. BasePath = '/';

The default display font in the editor is 12px, while the default font on my home page is 14px, which makes it quite uncomfortable. You can modify the style sheet to meet the requirements, open/editor/css/fck_editorarea.css and change row 4th to font-size: 14px.

The next step is to set the file to be uploaded. This is troublesome. Please perform this operation carefully.

Open \ editor \ filemanager \ browser \ default \ frmresourcetype.html, find row 15th, and insert "['uploadfile', 'uploadfile']," in combination with fckconfig. in js, the path of the uploaded file is/uploadfile. Of course, you can change it to the folder you want, but the name here must be the same as fckconfig. in js, The YY in "Type = YY" is consistent.

Before you finish, go to editor \ filemanager \ browser \ default \ connectors \ asp and open config. asp: Change ConfigIsEnabled = False to ConfigIsEnabled = True. If you cannot upload files, change ConfigUserFilesPath = "/UserFile" to ConfigUserFilesPath = "/".
Add "Set ConfigDeniedExtensions = CreateObject (" Scripting. Dictionary ")"
ConfigAllowedExtensions. Add "uploadfile ",""
ConfigDeniedExtensions. Add "uploadfile ",""

Similarly, the settings here also correspond to the above and fckconfig. js.

Another upload function is quick upload. This function is available only in fckeditor 2.0 and is not available in previous versions. Go to \ editor \ filemanager \ upload \ asp and open config. asp, also set ConfigIsEnabled = False to ConfigIsEnabled = True, change ConfigUserFilesPath = "/UserFiles/" to ConfigUserFilesPath = "/uploadfile/" & Year (Date () & "-" & Month (Date ()) & "/", because my uploaded files are placed in the uploadfile folder and separated by month. Quick upload does not allow you to select folders. Instead, you can directly upload files using the settings here. If the settings are not compatible with the previous settings, your files will be uploaded in a mess, it is inconvenient to manage. Repeat the operations in the previous config. asp file before adding

ConfigAllowedExtensions. Add "uploadfile ",""
ConfigDeniedExtensions. Add "uploadfile ",""

--------------------------------------------------------------------------------

Next, let's talk about how to create your own online editor. Here we take ASP and JS as examples. The sample code of ASP is generally used for background operations:

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
OFCKeditor. BasePath = "/"

OFCKeditor. ToolbarSet = "Default"
OFCKeditor. Width = "100%"
OFCKeditor. Height = "400"

OFCKeditor. Value = rs ("logbody ")
OFCKeditor. Create "logbody"
%>

ASP version, of course, can only be used in. asp is the extension of the page, if you are in front of fckedito. if BasePath is set to "/" in asp, the third row can be saved here. ASP only has one Create function. We recommend that you use ASP when modifying an article.

Next, let's look at the JS version:

<Script type = "text/javascript">
Var oFCKeditor = new FCKeditor ('logbody ');
OFCKeditor. BasePath = '/';
OFCKeditor. ToolbarSet = 'basic ';
OFCKeditor. Width = '000000 ';
OFCKeditor. Height = '20140901 ';
OFCKeditor. Value = '';
OFCKeditor. Create ();
</Script>

BasePath settings are described above. The JS version can be used on any webpage or even html page. Because it is generated by the client, the advantage is that it can reduce network traffic, because the editor file only needs to be downloaded once. Second, the client can define when to display the file. Because fckeditor initialization takes some time, JS is very useful at this point.

In addition, another function in JS is the ReplaceTextarea () function, which can replace the specified TextArea and take the reply part of the log of my website as an example:

<Script type = "text/javascript">
<! --
Function showFCK (){
Var oFCKeditor = new FCKeditor ('fbcontent ');
OFCKeditor. BasePath = '/';
OFCKeditor. ToolbarSet = 'basic ';
OFCKeditor. Width = '000000 ';
OFCKeditor. Height = '20140901 ';
OFCKeditor. Value = '';
// OFCKeditor. Create ();
OFCKeditor. ReplaceTextarea ();
// Document. blog_feedback.blogsubmit.disabled = '';
Document. blog_feedback.blogsubmit.style.display = '';
Document. blog_feedback.openFCK.disabled = 'true ';
Document. blog_feedback.openFCK.style.display = 'none ';
}
// -->
</Script>

Write it into a simple function. This fckeditor is generated only when the user opens the editor. You do not need to initialize an editor every time you refresh the page, so the page speed will be much faster.

--------------------------------------------------------------------------------

Supplement: As mentioned earlier, JavaScript version is not recommended when editing existing data content, which is caused by single quotation marks, it is inevitable that there will be single quotation marks in the data content. When an editor is generated using JS, the single quotation marks may cause the editor to fail to be generated normally. asp is different, the ASP version is used because the data is treated as a variable and then assigned a value to the editor domain. In addition, unless you use the ReplaceTextArea () method to generate an editor, you do not need to write a tag such as <textarea>, and everything will be automatically generated by fckeditor, all you need to do is to specify an Instance name for fckeditor. At the same time, you don't have to worry about how to submit the file. fckeditor automatically submits the file when submitting the form. The submitted variable name is named after the fckeditor instance you specified.