|
|
Posted on 4/17/2015 4:20:20 PM
|
|
|
After two days, Ckeditor and Ckfinder finally integrated the image upload function.
Here I will write about my experience.
In order to implement the editing module of news, my brother introduced me to Ckeditor.
First, download the .net version of Ckeditor on http://ckeditor.com/, I'm using ckeditor_aspnet_3.6.4 here.
After downloading, unzip it open. But not everything here is useful, so, you can put it
where sample is an example, and source is the source file
, directly deleted
, the purpose is to reduce the volume of the editor. Then copy the entire folder directly to the root directory of the website. citation
ckeditro.net.dll
In the header of the page where you need to use the editor control:
<scrip remove t src="/ckeditor/ckeditor.js" type="text/javascrip remove t" ></scrip去掉t>
<scrip remove t type="text/javascrip remove t" >
window.onload = function () {
CKEDITOR.replace("txtContent");
}
</scrip去掉t>. .
body
：
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server">
</CKEditor:CKEditorControl>
The background code is also simple:
article. ARTICLECONTENT = CKEditor1.Text; This assigns the edited content to the ARTICLECONTENT field of the article's model class.
And with that, my editor is successfully completed!
But a big problem has arisen again, that is, Ckeditor does not have the ability to upload images, which is really a headache. How to do this? Go to Baidu.
As soon as I went online, I found that there are many ways to solve it, some say that it is to create a function of uploading an image outside the editor, and then pass his server link path to the current cursor of the editor when it is passed to the server, then implement it, do it, and suddenly find that when you click on the external upload image, the cursor is not in the editor at all, what should I do??? Think about it, alas, with the current knowledge, I can't do it, I can only give up. (If any god knows, leave a message to tell me, thank you); Some say that you write your own JS to implement this function, and then plug it into the editor to complete it, and there are many such articles:
1、 http://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html
2、 http://www.cnblogs.com/striiiiing/archive/2012/08/15/2640792.html
I think these two articles are quite good, but my own JS knowledge is weak, so I tried to write it, but I still couldn't successfully implement it.
Well, it seems that I can only use Ckeditor to integrate with Ckfinder, and I really didn't want to use Ckfinder because it is charged, which is not good!! But what's the matter, it's good not to be under the official website, I directly went to the resources on the Internet, well, finally I found one that provided very detailed resources (here I would like to thank some brothers!!) Website: http://download.csdn.net/download/q8347901/3887066 (There are also detailed introduction articles on Ckeditor and Ckfinder here, very good!) ）
Download Ckfinder, then copy the ckfinder.dll file from the /bin directory to the site bin directory, copy the ckfinder directory to the root directory of the site (you can choose another path), and reference the ckfinder.dll
Configure this:
If you are on the .aspx page you want to ckeditor, it is as follows:
CKEDITOR.replace('Text box you want to enable editing',
{
filebrowserBrowseUrl:'/ckfinder/ckfinder.html',//启用浏览功能
filebrowserImageBrowseUrl:'/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl:'/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl:'/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
}
);
Of course, use the global configuration method
Configure in config.js of the Ckeditor plugin
config.filebrowserBrowseUrl="/ckfinder/ckfinder.html";
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";
After the configuration, modify the config.ascx in ckfinder
CheckAuthentication()in Return true, otherwise it will not be uploaded and requires verification
The path to BaseUrl in SetConfig() is the path to upload
Also after paying attention don't forget to reference the bll file in ckfinder
Well, your integration and uploading images are successfully completed.
Alternatively, if you want to hide the Hyperlinks and Advanced tabs in the Images panel, you can do so in CKEditor's plugins/image/dialogs/image.js
Search for "Link" and "advanced" in "id:'Link'," and "id:'advanced'," and add "hidden:true," just do it.
If you want to improve the appearance and optimize your website, check out some of the following articles.
1、 http://www.cnblogs.com/netec/archive/2009/11/02/ckeditor_ckfinder.html
2、 http://blog.csdn.net/lulu_jiang/article/details/5532345
3、 http://blog.csdn.net/hzq1074/article/details/5893475 |
Previous:asp.net Text Editor (FCKeditor)Next:SQL Server determines whether there are databases, tables, columns, and views
|
