The latest versions of CKEditor and CKFinder can be downloaded from the official website (http://cksource.com).
Put the above two resources in the root directory of the website: /CKEditor (here in version 3.6.2, you need to put the _Samples\ckeditor folder in the compressed folder) and /CKFinder (case insensitive, you can put the folder here directly). )
Note, here sometimes there is an error in the generation. For example, there are duplicate AssemblyTitle type tags, mainly because the website has more than one AssemblyInfo.cs to delete the downloaded file. Or delete the folder _source. If you have any questions here, you can contact me: my QQ: 515072775
Using CKEditor on a page:
<textarea cols="80" id="prcontent" name="content" rows="50"> Hello, your use was successful! </textarea>
<scrip remove ttype="text/javascrip remove t" >
CKEDITOR.replace('content', { height:200, width: 520 });
</scrip去掉t>. .
CKEditor does not come with an upload function, so it needs to be uploaded with CKFinder
Step 1: The website needs to reference the dll of CKFinder (directory: /CKFinder/bin/Release/CKFinder.dll)
Step 2: Configure the CKEditor's config.js (directory: /CKEditor/config.js) in the CKEDITOR.editorConfig function, and unnecessary functions can be removed
CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; Don't write "~/ckfinder/..." or "/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800'; The size setting of the Browse Server pop-up
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '.. /ckfinder/'); Note that the path of the ckfinder corresponds to the actual placement
CKFinder's configuration:
Open the user control config.ascx under "ckfinder\" and change its BaseUrl path:
BaseUrl = "~/ckfinder/userfiles/"; //or BaseUrl = "ckfinder/userfiles/";
Here's an extra point: it is useful to test in IIS. Otherwise, if the upload is unsuccessful, you will think that there is something wrong with the configuration.
CKEditor has an upload function after the configuration is completed, but what if the image file is the original image name and wants to change it to a random file name? Then look at the third step.
Step 3: Modify the source code of CKFinder. CKFinder comes with its own source code, directory: /CKFinde/_source
Create a new current project in VS to CKFinde/_source/CKFinder.Net.sln, the solution file downloaded here may not open in VS2008, you can choose to add a new project or use a newer version of VS to open it.
1) Open the /Settings/ConfigFile.cs file
Locate 27 rows and add an attribute: public bool RandomReName; Rename randomly
Locate 67 rows and assign a value to the property just now: RandomReName = true; The default value is true
Save the closed file
2) Open the /Connector/Config.cs file
Locate the 62 rows, add an attribute:
public bool RandomReName
{
get { returnSettings.ConfigFile.Current.RandomReName; }
}
Save the closed file
3) Open the /Connector/CommandHandlers/FileUploadCommandHandler.cs file
Locate line 64 and add a judgment code:
if ( Config.Current.RandomReName) // Use a random name
sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;
Save the closed file
4) Regenerate the project, overwrite /ckfinder/_source/bin/Debug/CKFinder.dll /ckfinder/bin/Release/CKFinder.dll or remove the previously added references to the website project and re-remove the dll from the CKFinder.Net project
Last step: Open /ckfinder/config.ascx
Locate 40 lines and add an attribute: (In fact, you can add this or not, because there was a default value set before, but it must be set to false when using the original name)
//上传完毕后使用随机文件名
RandomReName = true;
Save closed
Okay, now that the configuration has been successful, CKEditor can have an upload function. The settings of other functions will continue to be studied when you have time~
One more reminder: CKEditor and CKFinder folders have a lot of unnecessary things, such as names with underscores, .net projects do not need php, asp.
If there is an error in uploading a file: The file cannot be viewed for security reasons. Please contact your system administrator and check the CKFinder profile.
You need to modify the config.ascx file
public override bool CheckAuthentication()
{
reture false;
}
Modified to:
public override bool CheckAuthentication()
{
form validation
returnRequest.IsAuthenticated;
}
3. Apply CKEditor control on the page [two methods, a and b]
[A: Quoting the INSTALL.html in the compressed package ]
If you want to integrate CKEditor with your ASP.NET page, follow the steps outlined below.
1. Go to the official CKEditor download site and download the latest versions of both CKEditor 3.x and the CKEditor for ASP.NET Control.
2. Unpack both installation packages to a desired locatio Remove n.
3. Add a reference to the CKEditor for ASP.NET Control to your website.
In Visual Studio use the Add Reference command and browse to the bin\Release\CKEditor.NET.dll file from the unpacked CKEditor for ASP.NET installation package. You can also manually copy the DLL file to the bin folder of your application.
4. Copy the unpacked editor files from the CKEditor 3.x installation package and paste them into the application directory of your website.
5. Register the CKEditor for ASP.NET Control in your page:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6. Insert a CKEditor instance into the page body:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】
1. <head>Add the corresponding js reference to the page:
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckfinder/ckfinder.js"></scrip去掉t>
<scrip remove t type="text/javascrip remove t" language="javascrip remove t" src="ckeditor/ckeditor.js"></scrip去掉t>
2. Then, <body>add the following code to the location where the control needs to be placed, and there are the following usage methods:
(1) Add the specified class attribute to the control
<textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>
Server Controls:
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>
(2) Inject js code - here the js code is best written after the control, or <head>in it
<textarea id="textarea1" name="editor1">hello!</textarea>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('editor1', { height:400, width:800 });
</scrip去掉t>. .
Server Controls:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
CKEDITOR.replace('<%=mckeditor. ClientID %>');
</scrip去掉t>. .
=============================================================================================================
Second reference:
asp.net the configuration method of ckeditor 3.0.1 and ckfinder_aspnet_1.4.1.1
According to the prompts of the http://ckeditor.com.cn/docs/, CKEditor is configured on the web page, and when viewed in the browser, I feel that the interface of CKEditor is indeed very beautiful, but when I happily wanted to try the image upload function, I didn't see the button to upload the image.
Continuing to search online, the conclusion was that "CKEditor does not have an upload function itself, and it needs to be integrated with CKFinder to achieve the upload function".
Then download CKFinder 1.4.1.1 for Asp.net, unzip it, and put the ckfinder folder in the root directory of the project - because many sources on the Internet say that it is best to put CKEditor and CKFinder in the same level directory. And in this way, we will have two more folders in our project for no reason. I myself have a code cleanliness fetish, I think,
Leave a folder as a sign of respect for the author, that will be enough. Keeping two would make me feel very uncomfortable.
Before we integrate CKFinder into CKEditor, we also need to configure CKFinder a bit. Smart friends should easily think that since it is a plug-in for uploading files, most of the things to be configured are the path to upload files.
The default upload path of CKFinder is the userfiles folder in its own directory, but I have put CKFinder in the CKEditor folder, if I store the image in the userfiles, the system has to bypass the three-layer folder to find the file or image, so I plan to upload the image to the upFile folder in the root directory of the project.
To implement this function, you need to modify the config.ascx file under CKFinder to change BaseUrl = "/ckfinder/userfiles/" to BaseUrl = "~/upFile/". Then, cut the CKFinder.dll files from the CKFinder/bin folder into the bin folder of the system project. Or introduce CKFinder.dll into the project by adding references.
Next, we can use CKEditor with file upload:
Put the CKFinder folder into the CKEditor folder, and in the page, import the js files of both:
<scrip remove tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip remove t"></scrip去掉t>
<scrip remove t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip remove t"></scrip去掉t>
There are two ways to reference the editor to a control:
One is to use the client control textarea:
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>. .
The second is to use the server-side control textbox:
<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
<scrip remove t type="text/javascrip remove t" >
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</scrip去掉t>Personally, I think that since it is a asp.net program, then use the server-side controls. Although it runs a little slower than client controls, development is a bit faster. And, as programmers, we always like to try all the possibilities before choosing the one we like.
In fact, you can also assign values to the control without using Text='<%# Bind("info") %>', and use it directly in the backcode
this.txtContent.Text="Initial value"
It's also possible. You can also use the following code directly to get the value:
CKFinder and CKEditor code. When I run the page with the editor directly, the compiler gives the following error:
string content=this.txtContent.Text
Note: The TextMode="MultiLine" attribute is essential, otherwise the value will be null.
I didn't streamline before debugging the program
The type or namespace name "ControlDesigner" does not exist in the namespace "System.Web.UI.Design" (is it missing assembly reference?)
The mistake is on line 19 of ckeditor\ckfinder\_source\FileBrowserDesigner.cs, so simply simplify the file:
The first step is to streamline the ckeditor: delete the _samples and _source folders, and only three language files can be kept in the lang directory: en.js, zh.js, and zh-cn.js;
The second step is to streamline ckfinder: delete the _samples and _source folders, and only keep the en.js, zh.js, and zh-cn.js language files in the lang directory.
Note the second line of js code here: CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/'); , where the "http://www.cnblogs.com/ckeditor/ckfinder/" is the relative path of ckfinder to the current page,
Please do not copy and paste the code directly, otherwise the following error may appear when uploading images:
Description: HTTP 404. The resource you're looking for (or one of its dependencies) may have been removed, or its name has changed, or it's temporarily unavailable. Please check the following URL and make sure it is spelled correctly.
Requested URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
So, if you don't want to put the ckfinder in the ckeditor folder like I did, that's okay, as long as you fill in the path changes correctly here.
I thought this would be considered all the work, but when I uploaded the image, the following prompt popped up:
For security reasons, the file cannot be viewed. Please contact your system administrator and check the CKFinder profile.
There is no way, as the saying goes, good things are hard to eat. I can only ask the best teacher - Baidu. Copy the above prompt information to the Baidu search box, and after entering the car, I found a post about PHP integration ckeditor. Here's how to do it:
Modify the config.ascx file under CKFinder to change the return value of the public override bool CheckAuthentication() function from return false to return true.
Tested again, the image uploaded successfully! |
Posted on 4/18/2015 7:11:55 PM
|
|
|
