The online editor was used in the project a few days ago. I did not know which one to use. I searched the internet and found that FckEditor is a good component. It has a multi-language version and supports multiple platforms (Asp. Net, Asp, Php, Jsp, and so on ). However, after this component is down, I had a preliminary understanding of it after studying it for a long time. There are many articles about it on the Internet, however, there are not many examples on how to use it.
So I plan to make this example so that you can get started immediately when using this component. We need to use it. First, we need to have this component first (download FckEditor_2.5.1 ). Because I learned. Net and it is becoming more and more popular, my example is mainly Asp. Net. To enable FckEditor to support. Net, you must download FckEditor_Net. This is not the latest version. The latest version is FckEditor2.6. The version is different, but the usage is the same. That version is the same. In my example, I use FckEditor2.5. Let's take a look at what's in it first? Fcdeditor folder, for example:
For the FckEditor_Net folder, we use Bin \ Debug \ 2.0 \ FredCK. FCKeditorV2.dll. If you are a. Net1.0 user, you need to use Bin \ Debug \ 1.0 \ FredCK. FCKeditorV2.dll. Reference This DLL under the root directory Bin of your website, and then add the reference.
For FckEditor2.5.1, because FckEditor supports multiple languages and platforms, we now use Asp. Net. Therefore, we only need to find out what we need, and we can remove other things. First, the files and folders with "_" can be omitted. They are examples. Next we will continue to slim down. In the fckeditor folder, only the editor, fckconfig. js, fckeditor. js, fckstyles. xml, and fcktemplates. xml files are left. All the other files are removed. In Css, the style used by this component is not supported. In Dialog, do not touch some pop-up Dialog boxes, or do not touch Dta. Under editor \ filemanager \ connectors, we only need Aspx. Here we provide the management of uploaded files. Lang we only need to Zh-cn.js this is simplified Chinese, it is all the languages that can support. Js is the core of this component, and we cannot do anything about it. Some plug-ins are plug-ins, so we don't have to worry about it. In this example, we will use the upload image plug-in, instead of using its default upload function. Skin contains three skins: Default, Office2003, and Silver. By now, the folder size is reduced a lot. Finally, Copy the fckeditor folder to the root directory of your website. After everything is done, configure Web. config and fckconfig. js to use them like our commonly used custom controls.
Add
If you use the default upload function
<Add key = "FCKeditor: BasePath" value = "~ /Fckeditor/"/>
<Add key = "FCKeditor: UserFilesPath" value = "/website name/UploadFiles/"/>
If you are using the InsertImage plugin
<Add key = "UploadDir" value = "UploadFiles"/>
<Add key = "HostName" value = "Host Name \ Host IP \ http: // localhost"/> UploadFiles are stored in the root directory of your website and have writable attributes. There are four folders: image, flash, file, and media.
In fckconfig. js, find FCKConfig. DefaultLanguage = en and change it to zh-cn. Next
Var _ FileBrowserLanguage = 'asp '; // asp | aspx | cfm | lasso | perl | php | py
Var _ QuickUploadLanguage = 'asp '; // asp | aspx | cfm | lasso | perl | php | py
Change to aspx.
You can use this component below.
In this way, you can use the default function. The upload function is used to browse the directory, and the UploadFiles directory is writable, which is not safe for the server. If you want to customize the upload function and insert source code. Then you will continue to read it.
Open fckconfig. js and modify FCKConfig. ToolbarSets ["Default"] with the following values:
We commented on the original Image, Flash, and so on, and added InsertCode and InsertImage. This is what we want. Next, we have to register these two functions and add two sentences at the end of the file:
FCKConfig. Plugins. Add ('insertcodecommands', null, FCKConfig. BasePath + 'ins INS /');
FCKConfig. Plugins. Add ('insertimage', null, FCKConfig. BasePath + 'ins INS /');
And set FCKConfig. LinkBrowser = true; FCKConfig. ImageBrowser = true;
Change FCKConfig. FlashBrowser = true; to false.
At this point, it is finished. But there are still some problems with this component. I found it in the garden and it was not solved. I hope to have a high finger: this component has not been able to upload Flash and Media.
Download the sample source code:
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
