The open source web editing software FCKeditor was released to 3.0 in and renamedCkeditor. The improved ckeditor provides more modules and more flexible configuration, which is different from the previous FCKeditor usage. In my MVC project, because ckeditor is used, I specially studied its usage and wrote it down to share with you.
I am using the latest version: ckeditor_3.0.1: http://ckeditor.com/
Decompress the downloaded package to obtain the ckeditor folder, including the following:
Here, sample is the example, and source is the source file. To reduce the size of the editor, delete it directly. Then copy the entire folder to the root directory of the website.
Add the following in the header of the page where you want to use the editor control:
<Head>
...
<SCRIPT type = "text/JavaScript" src = "/ckeditor. js"> </SCRIPT>
</Head>
Add <textarea name = "editor1"> </textarea> <SCRIPT type = "text/JavaScript">
Window. onload = function ()
{
Ckeditor. Replace ('editor1 ');
};
</SCRIPT>
Note:: JSCodeMust be written after textarea
In fact, we can understand that the editor control only makes a beautiful package for textarea. Our input is actually in the texarea above, and finally through textarea
Submit to the server.
Knowing this, the server code is too simple:
[Acceptverbs (httpverbs. Post)]
[Validateinput (false)]
Public actionresult create (formcollection collection)
{
Blog. content = Collection ["editor1"];
...
}
Collection ["editor1"] to obtain the input in the editor. Note that because textarea has special characters
For security reasons, if the MVC Framework does not allow submission by default, the corresponding method should be added.[Validateinput (false)]Attribute. The effect is as follows:
It is quite good.
In the new editor, the upload function is removed, that is, we cannot insert images and Flash files through the upload. The insert image dialog box in editor does not provide the upload function:
Fortunately, there is a plug-in ckfinder that can help us complete the following functions.
Http://ckeditor.com/Latest Version: ckfinder_aspnet_1.4.1.1
Decompress the package and obtain a folder named ckfinder. Delete the source and sample directories (the same reason) and copy them to the root directory of the website.
Note:: Some configurations must be configured here:
Add the DLL files under the bin directory in the folder to the reference of the website to prevent class failures. Open config. ascx and modify public override bool checkauthentication ()
{
Reture false ;//Return true;
} The modification here is to have the upload permission.
Then we need to integrate ckfinder into ckeditor. The Code is as follows:
VaR editor = ckeditor. Replace ('editor1 ');
Ckfinder. setupckeditor (Editor, '/ckfinder /');
Of course, it is essential to reference the script code at the corresponding position on the page.
<SCRIPT type = "text/JavaScript" src = "/ckfinder. js"> </SCRIPT>
Well, the last step is because ckfinder is not free. By default, there will be a red advertisement prompt on the upload page. Although it does not affect the usage, I always feel that
Unhappy.
The removal method is as follows: Find ckfinder/CORE/JS/ckfinder_ie.js and ckfinder_gecko.js, and delete the EN. Call (window, Qo) in the code comment or directly.
So far, all ckfinder configurations have been completed, and the running effect is as follows:
Supplement:
To configure the eidtor appearance, open the config. js file in the eidtor folder for configuration.
Ckeditor. editorconfig = function (config)
{
// Define changes to default configuration here. For example:
// Config. Language = 'Fr ';
// Config. uicolor = '# aadc6e ';
// Config. width = 200;
};
The configuration here is for the editor of all pages on the website. If a single page needs to be configured separately, you can directly write the configuration code on the page. The example is as follows:
Ckeditor. config. Height = 400;
Work is slow, but I am not lazy. But some things have never been touched, so we need to explore them slowly. In general, there is a lack of experience.
It seems that I found it in the afternoon.JqueryAnd I don't know why. OnDivThere isTablemainAnd thenTablemainIs nested inTabledata.When I useJqueryOf$ ("# Td_1"). classname = "td_sel", Found$ ("# Td_1 ")The returned result isUnderfined. And useDocument. getelementbyid ("td_1"). classname = "td_sel", Then everything is normal.[Note: Please pay attention to the reply on the 4th and 5th floors for this question]
TodayArticleThe focus of this module is to set up the editor. Search onlineFCKeditor, A lot of information is displayed.FCKeditorUpgradedCkeditorI don't believe it yet. I thought it wasCkeditorBorrowFCKeditorWhen I saw"Http://fckeditor.net/The domain name has been switchedHttp://ckeditor.com/", I believe this is true.
Download the latest versionCkeditor 3.0.1This is my personal habit. if conditions permit, everything should use the latest version.
FollowHttp://ckeditor.com.cn/docs/Prompt, configured on the web pageCkeditor, View in the browser, feelCkeditorThe interface is indeed very beautiful, but when I happily want to try an upload function, I don't see the button for uploading images.
Continue searching online, and the conclusion is"CkeditorThe upload function is not available and must be integrated.CkfinderTo achieve the upload function ". I hate plug-ins most, but in the current situation, I can only choose to endure. Then tell yourself: Isn't it just integrating a plug-in? Integration.
Then downloadCkfinder 1.4.1.1 for Asp.netAfter decompressionCkfinderPut the folder under the project root directory-because many materials on the Internet say, it is best to putCkeditorAndCkfinderIn the same level directory. In this way, there will be two more folders in our project for no reason. I personally have code cleanliness. I think it is enough to leave a folder to show respect for the author. Leaving two will make me feel uncomfortable.
After the download, I got off work. The rest was made after dinner at home.
In the ckfinder integrated into ckeditor before, we also need to configure ckfinder . It should be easy for a smart friend to think that, since it is a file upload plug-in, most of the configuration is the file upload path.
ckfinder the default upload path is userfiles folder, however, I have placed ckfinder ckeditor in the folder, save the image to userfiles , the system has to bypass the three-tier folder to find a file or image, so I plan to upload the image to the upfile folder. To implement this function, modify ckfinder config. ascx file, modify baseurl = "/ckfinder/userfiles/" to baseurl = "~ /Upfile/" . In the ckfinder/bin folder ckfinder. DLL file is cut to the bin folder of the system project. Alternatively, add the ckfinder. DLL introduced to the project . Next, we can use the ckeditor with the file upload function now:
SetCkfinderFolderCkeditorFolder, in the page, introduceJSFile:
< Script SRC = "Http://www.cnblogs.com/ckeditor/ckeditor.js" Type = "Text/JavaScript" > </ Script >
<ScriptSRC= "Http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js"Type= "Text/JavaScript"> </Script>
There are two ways to reference the editor to a control on the Internet:
First, use the client controlTextarea:
<ScriptType= "Text/JavaScript">
VaREditor=Ckeditor. Replace ('Txtcontent');
Ckfinder. setupckeditor (editor,'Http://www.cnblogs.com/ckeditor/ckfinder/');
</Script>
Second, use server-side controlsTextbox:
Code
I personally think that since it isAsp.netOfProgramThen use the control on the server side. Although the running efficiency is a little slower than the client control, the development efficiency is faster. In addition, as programmers, we always like to try all the possibilities and then choose the one we like.
In fact, this can also be left empty.TEXT = '<% # BIND ("info") %>'To assign values to the control, which is directly used in the Post-code.
This . Txtcontent. Text = "Initial Value"Yes. You can also directly use the following code:
CkfinderAndCkeditor. When I directly run a page with an editor, the compiler prompts the following error:
String Content = This . Txtcontent. Text
Note: textmode="Multiline"Attribute is required. Otherwise, null values are obtained.
I was not streamlined before debugging the program
Namespace"System. Web. UI. Design"There is no type or namespace name"Controldesigner"(Is the Assembly reference missing??)
The error occurs inCkeditor \ ckfinder \ _ source \ filebrowserdesigner. CSThe19Line, so simply streamline the file:
Step 1: streamlineCkeditor: Set_ Samples,_ SourceFolder deletion,LangDirectory can be retained onlyEn. js,Zh. js,Zh-cn.jsThree language files;
Step 2: streamlineCkfinder: Set_ Samples,_ SourceFolder deletion,LangDirectory can be retained onlyEn. js,Zh. js,Zh-cn.jsThree language files.
Note thatJSThe second line of the Code:Ckfinder. setupckeditor (Editor, 'HTTP: // www.cnblogs.com/ckeditor/ckfinder /');,"Http://www.cnblogs.com/ckeditor/ckfinder/"YesCkfinderThe relative path to the current page. Do not copy or paste the Code directly.Otherwise, the following error may occur during image uploading:
Description: HTTP 404. The resource you are searching(Or one of its Dependencies)It may have been removed, its name has been changed, or it is temporarily unavailable. Check the followingURLAnd make sure that the spelling is correct.
Request URL :/Admin/ckeditor/ckfinder/CORE/connector/aspx/connector. aspx
So,If you do not wantCkfinderPut inCkeditorFolder, it does not matter, as long as you fill in the correct path modification here.
I thought that even after all the work is done, the following prompt message is displayed when I upload an image:
For security reasons,Files cannot be browsed.Contact the system administrator and checkCkfinderConfiguration file.
No wayAs the saying goes, everything goes wrong. I can only ask Baidu, the best teacher. Copy the above prompt information to the baidu search box and press enter to find a message aboutPHPIntegrationCkeditorAfter comparing the posts, I tried to solve the problem. The method is as follows:
ModifyCkfinderUnderConfig. ascxFilePublic override bool checkauthentication ()The return value of a function is composedReturn falseChangeReturn true.
Test again. The image is uploaded successfully!
From Network
Supplement:Usage:
I. Reference JS scripts
<SCRIPT src = "/content/ckeditor_3.4/ckeditor. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "/content/ckfinder_aspnet_2.0.1/ckfinder. js" type = "text/JavaScript"> </SCRIPT>
Ii. Call ckeditor: Use the class method to call ckeditor
<% = Html. textarea ("content", new = "" style = "width: 98%; Height: 300px ;"Class ="Ckeditor">
3. Integrate ckfinder in ckeditor: add
// integrate ckfinder in ckeditor. Make sure that the ckfinder path is selected correctly.
var ckfinderpath = "/content/ckfinder_aspnet_2.0.1 " ; // ckfinder path
config. filebrowserbrowseurl = ckfinderpath + '/ckfinder.html';
config. filebrowserimagebrowseurl = ckfinderpath + '/ckfinder.html? Type = images ';
config. filebrowserflashbrowseurl = ckfinderpath +'/ckfinder.html? Type = flash ';
config. filebrowseruploadurl = ckfinderpath +'/CORE/connector/aspx/connector. aspx? Command = quickupload & type = files ';
config. filebrowserimageuploadurl = ckfinderpath +'/CORE/connector/aspx/connector. aspx? Command = quickupload & type = images ';
config. filebrowserflashuploadurl = ckfinderpath +'/CORE/connector/aspx/connector. aspx? Command = quickupload & type = flash ';
Iv. Cancel ckfinder Upload File Verification
Public override bool checkauthentication ()
{
// Warning: do not simply return "true". By doing so, you are allowing
// "Anyone" to upload and list the files in your server. You must implement
// Some kind of session validation here. Even something very simple...
//
// Return (session ["isauthorized"]! = NULL & (bool) session ["isauthorized"] = true );// Automatically set the Authorization User confirmation. After the authorized user logs on, add the session ["isauthorized"] = true
//
//... Where session ["isauthorized"] is set to "true" as soon as
// User logs on your system.
// Return false; you can also change it to true directly. If necessary, add verification manually.
Return true;
}
For security considerations, you can add user authentication here to determine whether you have the permission to upload files based on user permissions.
The solution is to add the session flag of whether files can be uploaded during user logon. In fact, FCKeditor has been written. Directly verify the FunctionCheckauthentication ()In the comment section
Return (session ["isauthorized"]! = NULL & (bool) session ["isauthorized"] = true );
Comment out. After successfully logging on to the session ["Isauthorized"] = True;You can.
(Optional) 5. Modify the Upload File Name
ModifySource codeFind the connector \ commandhandlers \ fileuploadcommandhandler. CS file and locate the CSHARP code.
String sextension = system. Io. Path. getextension (ofile. filename );
Sextension = sextension. trimstart ('.');
Add a line of code below:
Sfilename = datetime. Now. tostring ("yyyymmddhhmmssfff") + "." + sextension;
Source: http://www.cnblogs.com/lushuicongsheng/archive/2011/05/09/2041695.html
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
