How to Use FCKeditor online editor in ASP

Source: Internet
Author: User

Let's talk about my testing environment: xpsp2, iis5.1, fckeditor2.0
Create a new site on IIS. I directly named it FCKeditor.
Create a site in DW. The test Server is a local machine and supports VBScript.
Download fckeditor2.0, which is open-source and can be found in many places on the Internet ......
The downloaded package should be a compressed package. decompress the package to the root directory of the FCKeditor site and call the package without any changes. When you get there, you will find it easy to die!
Create an index. asp page under the root directory of the site. Add the following content to the Section: Code (Call the editor ): Copy code The Code is as follows: <%
Dim ofckeditor
Set ofckeditor = new FCKeditor
Ofckeditor. basepath = "/FCKeditor/" // set the editor path, which is a directory under the root directory of my site
Ofckeditor. toolbarset = "default"
Ofckeditor. width = "100%"
Ofckeditor. Height = "600"
Ofckeditor. value = "" // This is the initial value for the editor.
Ofckeditor. Create "logbody" // the content in the later editor is obtained by this logbody, And the name is determined by you.
%>
<%
Dim ofckeditor
Set ofckeditor = new FCKeditor
Ofckeditor. basepath = "/FCKeditor/" // set the editor path, which is a directory under the root directory of my site
Ofckeditor. toolbarset = "default"
Ofckeditor. width = "100%"
Ofckeditor. Height = "600"
Ofckeditor. value = "" // This is the initial value for the editor.
Ofckeditor. Create "logbody" // the content in the later editor is obtained by this logbody, And the name is determined by you.
%>

After adding this section, do not forget to add the second line before index. aspCopy codeThe Code is as follows: <! -- # Include file = "FCKeditor/FCKeditor. asp" -->

Include FCKeditor. asp. Remember!
That's easy!
Now you only need to use this editor as a control to extract its data: Request ("logbody ")
Now let's relax. The test is successful. There are some settings, go to the Internet to find some advanced instructions for use.
FCKeditor usage
FCKeditor version 2.0 has finally come out. The reason for using the word "final" is that the flash insertion function is widely seen in this version. Among all online editors, FCKeditor is currently the best editor on the Internet. It has powerful functions and supports multiple browsers without platform restrictions. It can be integrated with multiple web languages and supports multiple languages, open source, etc ~~
FCKeditor can directly use a brand new website without any modifications. However, for most existing websites, some FCKeditor settings are not suitable for your use. Article It aims to tell you how to modify FCKeditor to facilitate your website.
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. the XML can be used, and 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 ~
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 other folders, I will give you a suggestion. If you don't want to use the default one, you can choose the silver one, because Silver, that is, gray, will not be hard to see if it matches any color, 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. Then, enter filemanager/upload/. Similarly, only the ASP folder is left. Now, the simplified editor is complete. Next, 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 ';
The next step is to set the upload function. Take ASP as an example. In fact, the default value of fck is ASP. Just delete all the Codes commented out under line 1, then, all the following parameters are related to browser.html and upload. after 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, in addition, the absolute path is used for setting the path, for example, "/FCKeditor/", and my usual setting is "/". This is conducive to FCKeditor update and upgrade, 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 configallowedextensions. Add "uploadfile", "" after "set configdeniedextensions = Createobject (" scripting. Dictionary ",""
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: Copy code The Code is as follows: <%
Dim ofckeditor
Set ofckeditor = new FCKeditor
Ofckeditor. basepath = "/"
Ofckeditor. toolbarset = "default"
Ofckeditor. width = "100%"
Ofckeditor. Height = "400"
Ofckeditor. value = RS ("logbody ")
Ofckeditor. Create "logbody"
%>
<%
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 take a look at the JS version: copy Code the code is as follows:


the 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 the network flow can be reduced, because the editor file only needs to be downloaded once, and 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 my website log as an example: copy Code the code is as follows:

write it as 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, the page speed will be much faster.
makeup: As mentioned earlier, JavaScript version is not recommended when editing existing data. This is caused by single quotation marks, it is inevitable that there will be single quotation marks in the data content. When the JS version is generated into an editor, it may be caused by single quotation marks, which make the editor unable 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 , 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. </P>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.