ASP using the FCKeditor online Editor Method _ Web page Editor

Source: Internet
Author: User
Let's talk about my test environment: xpsp2,iis5.1,fckeditor2.0
To create a new site on IIS, I'll just name it fckeditor.
Create a corresponding site in DW, test server is native, support VBScript
Download FCKeditor2.0, this thing is open source, the Internet can down to a lot of places to find their own ...
Download should be compressed package, extract to the FCKeditor site root directory, nothing need to change, directly can begin to call. When you do, you'll find it easy to die!
Under the site root, create a new index.asp page, Denega The following code (invoke editor):
Copy Code code as follows:

<%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
Ofckeditor.basepath = "/fckeditor/"//Set editor path, 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 to the editor
Ofckeditor.create "Logbody"//after the contents of the editor are made by this logbody, named by you
%>
<%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
Ofckeditor.basepath = "/fckeditor/"//Set editor path, 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 to the editor
Ofckeditor.create "Logbody"//after the contents of the editor are made by this logbody, named by you
%>

Don't forget to add the second line in front of the index.asp.
Copy Code code as follows:

<!--#include file= "fckeditor/fckeditor.asp"-->

Include the fckeditor.asp in. Remember, remember!
It's that simple!
Now all you have to do is use this editor as a control to extract its data: request ("Logbody")
Now, breathe. The test was successful. There are some settings, go to the Internet to find some advanced use instructions to see.
Preliminary use of FCKeditor
FCKeditor version 2.0 finally came out, the reason for using the word "finally" is because in this version added the expected flash insert function. It can be said that in all online editors, FCKeditor is currently the best editor on the Internet, powerful, support a variety of browsers, no platform restrictions, and a variety of web language integration, multi-language support, open source and so on ~ ~
For a brand new site, FCKeditor can be used directly, do not need to make any changes. But for the vast majority of existing Web sites, some of the FCKeditor settings are not suitable for their own use, this article is intended to tell you the simple modification of fckeditor to facilitate the use of your site.
The first task is to streamline this powerful editor, which is of course file simplification rather than functional streamlining. Here I take the ASP version of FCKeditor as an example, into the FCKeditor 2.0 folder, first to "_" folder all deleted, these folders are placed in the example or some other tools. In fact, just keep the editor folder, Fckconfig.js, fckeditor.asp, Fckeditor.js, Fckstyles.xml, fcktemplates.xml on it, the outermost layer of the streamlined finish, Enter into the Editor folder, first delete the "_source" folder, here are some source files, for the use of useless.
Enter the images folder, delete the smiley folder, some files are put emoticons, because next I will use my own expression icon, the first to remove them, of course, if you want to use the expression icon here then do not delete. Exit images and then enter the Lang folder, where the things can be a large cleaning, only to retain Fcklanguagemanager.js, Zh-cn.js, En.js, Zh.js these four files, the first file is a language configuration file, with its ability and fckconfig.js set in the corresponding language file, Zh-cn.js is a simplified Chinese language pack, En.js Needless to say, Zh.js is traditional Chinese. All of a sudden less hundreds of k, cool it ~
And then exit the Lang folder, into the skin folder, if you want to use the FCKeditor default of this milk yellow, then delete the other than the folder default two folders directly deleted, if you want to use other, then consider yourself, but I give you a suggestion, if you do not want to use the default, Then choose that silver, because the silver is gray and any color match will not ugly, and that office2003 skin, anyway, I am very dislike, and the picture is relatively large, but also increased the download time, do not!
The final step of streamlining, exit the skin folder, and then enter the FileManager, if you are not using the latest version of the FCKeditor, then here is a folder browser, the new version also has a upload folder. Come, first into the filemanager/browser/default/connectors/, because I am using the ASP, so in addition to the ASP folder, delete all. And then into the filemanager/upload/, again, only the ASP folder, so that the editor's streamlining is over, next, we set the editor to modify.
The first modified file, the FCKeditor general configuration file, is located in the root directory of the Fckconfig.js file. Please follow the list below (subject to FCKeditor version 2.0):
Find the 20th line fckconfig.defaultlanguage = ' en '; change to Fckconfig.defaultlanguage = ' ZH-CN '; set the default language to Simplified Chinese
Find line 40th fckconfig.tabspaces = 0; Changed to Fckconfig.tabspaces = 1; That is, you can use the TAB key in the Editor field.
If your editor is also used in front of the site, for example, for message book or journal reply, then you have to consider security, in the foreground do not use the default toolbar, or customize the function, or use the system has been defined by basic, that is, fundamental toolbar ,
Find line 64th fckconfig.toolbarsets["Basic"] = [
[' Bold ', ' Italic ', '-', ' orderedlist ', ' unorderedlist ', '-', * ' Link ', ' Unlink ', '-', ' Style ', ' fontsize ', ' TextColor ', ' bgcolor ', '-', ' smiley ', ' Specialchar ', ' Replace ', ' Preview '
] ;
This is I changed basic, the image function is removed, add link function to remove, because the image and link and flash and image button Add function can let the front page directly access and upload files, if here do not change directly to you upload a Trojan not immediately finished? But that's not going to happen. FCKeditor also supports the right mouse button function within the editing domain.
Find Line 73rd
Fckconfig.contextmenu = [' Generic ',/* ' Link ',/' Anchor ',/* ' Image ', ' * ' Flash ', ' Select ', ' Textarea ', ' Checkbox ', ' Radio ', ' TextField ', ' HiddenField ',/* ' ImageButton ', ' Button ', ' bulletedlist ', ' numberedlist ', ' TableCell ', ' Table ', ' Form '];
This is what I have changed the right mouse button "link, image, Flash, image button" features are removed.
Find line 77th Fckconfig.fontnames = ' Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';
Add a few of our commonly used fonts Fckconfig.fontnames = ' XXFarEastFont-Arial _gb2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana ';
Next set up the upload function, or ASP as an example, in fact, FCK default is the ASP, the 100 lines below all the comments out of the code all deleted on the line, and then put all the following about the browser.html and upload.asp behind? Type=xx are changed to Type=yy, which YY for you want to save the folder name of the file.
And if you want to use your own facial icons, jump to 131 lines, change the icon of the folder address, and the following icon of the file name, and then the following three numbers are each line shows the number of expressions and the width and height of the pop-up window, which depends on the size of your expression icon arranged by the size of the window. OK, the total profile modification is complete.
Next is the editor location setting, my custom is to put editor in the root directory, the first five files are also placed in the root directory (tips: recommended in the root directory, and recommended to use when the set path also takes an absolute path, such as "/fckeditor/", and my Custom setting is "/" , this facilitates fckeditor update upgrades, and all folders under the Web site can be invoked arbitrarily, without the problem of other folder names being changed and the editor not available elsewhere.
Open fckeditor.asp file, find Sbasepath = "/fckeditor/" to Sbasepath = "/"
Open the Fckeditor.js file and find this. BasePath = '/fckeditor/'; BasePath = '/';
The default display font in the editor field is 12px, and my home page default font is 14PX, so it's very uncomfortable to look at it and want to modify it to meet your requirements by modifying the stylesheet, opening the/editor/css/fck_editorarea.css, and changing the 4th line to Font-size : 14px;
The next is the upload file settings, this is more trouble, please carefully operation.
Open \editor\filemanager\browser\default\frmresourcetype.html, find line 15th, insert "[' uploadfile ', ' UploadFile ']," With the settings just in the fckconfig.js, then my upload file path is/uploadfile, of course, you can also change to the folder you want, but the name here must and Fckconfig.js in the "Type=yy" in the YY consistent only line.
Not finished, continue to enter the editor\filemanager\browser\default\connectors\asp, open config.asp, first put configisenabled = False to become configisenabled = True, if it is not possible to upload files, then Configuserfilespath = "/userfile" to the configuserfilespath I want = "/".
Then add Configallowedextensions.add "UploadFile" after "Set configdeniedextensions = CreateObject (" Scripting.Dictionary ")" , ""
Configdeniedextensions.add "UploadFile", "" "
Similarly, the setting here is to correspond to the above and fckconfig.js.
There is also a upload, is a quick upload, this function is in the FCKeditor 2.0, the previous version does not have this function. Enter the \editor\filemanager\upload\asp, also open the config.asp, the same configisenabled = False set to configisenabled = True, I'm here to change Configuserfilespath = "/userfiles/" to what I want Configuserfilespath = "/uploadfile/" & Year (Date ()) & "-" & Month (Date ()) & "/", because my upload file is placed under the UploadFile folder, and is placed separately by month. Fast upload, will not let you choose the folder, but through the settings here directly uploaded, here Set if and the previous settings with bad, your file will be uploaded to a mess, very inconvenient management. Repeat the previous operation in the config.asp, and then add the following
Configallowedextensions.add "UploadFile", "" "
Configdeniedextensions.add "UploadFile", "" "
Next, let's talk about how to create their own online editor, here, ASP and JS version of the example, ASP version sample code, generally used for background operations:
Copy Code code 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 an. asp for the extension of the page, if you have in the previous fckedito.asp set BasePath to "/", here you can skip the third line, the ASP version of only a CREATE function. It is recommended that you use the ASP version when modifying a piece of content.
Next look at the JS version:
Copy Code code as follows:

<script type= "Text/javascript" >
var ofckeditor = new FCKeditor (' logbody ');
Ofckeditor.basepath = '/';
Ofckeditor.toolbarset = ' Basic ';
Ofckeditor.width = ' 100% ';
Ofckeditor.height = ' 400 ';
Ofckeditor.value = ';
Ofckeditor.create ();
</script>
 
BasePath settings as described above, the JS version can be used in any Web page, even for HTML pages, because it is generated by the client, the advantage is that one can reduce network traffic, because the editor file only download once, two can be defined by the client when the display, Since FCKeditor initialization takes a certain amount of time, JS is very useful at this point.
In addition, the JS version of a functional function is the Replacetextarea () function, you can replace the specified textarea, take my site's log reply to part of the example:
Copy Code code as follows:

<script type= "Text/javascript" >
<!--
function Showfck () {
var ofckeditor = new FCKeditor (' fbcontent ');
Ofckeditor.basepath = '/';
Ofckeditor.toolbarset = ' Basic ';
Ofckeditor.width = ' 100% ';
Ofckeditor.height = ' 200 ';
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 as a simple function, when the user appears to open the editor to generate this fckeditor, do not refresh the page every time to initialize an editor, the speed of the page will be much faster.
  Addendum: The previous mentioned, said is in the editing of existing data content, do not use the JS version, that is because of the single quotation mark (') of the problem, in the data content will inevitably have single quotes in the JS version of the editor can be generated because of single quotes problem, and the editor can not be normal generation, and the use of ASP is different, The ASP version is because the data is treated as a variable, and then directly assigned to the editor field. And unless you want to use the Replacetextarea () method to generate the editor, otherwise you do not need to write a <textarea> such a label, everything will be automatically generated by FCKeditor, all you need to do is give FCKeditor an instance name. At the same time you don't have to worry about how to submit, when the form is submitted, FCKeditor will automatically submit the variable name is named after the FCKeditor instance you specified.
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.