installing WYSIWYG editor with image upload function in ASP.net
While creating my own CMS (content management system) for my clients, I was searching for a good WYSIWYG editor. Although many editors are availible. There aren’t many editors that support uploading images the way CKEditor does.
How do you install this on an ASP.net driven website?
Step 1)
Download the package from: http://download.cksource.com/CKEditor/CKEditor.NET/CKEditor.NET%203.6.1/ckeditor_aspnet_3.6.1.zip
Step 2)
Unzip and upload to your website (install instructions are verry easy)
Step 3)
Use it on your website. The clu is actualy simple, the javascript takes over the Textbox ellement. Make a script reference to the .js file, in the head section of your page:
<head id="Head1" runat="server"> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head>
Now insert a textbox en set it to the CKEditor script:
<asp:TextBox ID="txtPageContent" TextMode="MultiLine" runat="server">
</asp:TextBox>
<script type="text/javascript">
CKEDITOR.replace('txtPageContent');
</script>
When you are using masterpages don’t forget to place the contentholder in your script like this:
<asp:TextBox ID="txtPageContent" TextMode="MultiLine" runat="server">
</asp:TextBox>
<script type="text/javascript">
CKEDITOR.replace('siteContentHolder_txtPageContent'
</script>
In your code-behind you can retrive the formatted text like this:
string pageContent = txtPageContent.Text;
Now, for the image upload module I use CKFinder. There is a free to use (fully functional) license on there website: http://download.cksource.com/CKFinder/CKFinder%20for%20ASP.NET/2.0.2.1/ckfinder_aspnet_2.0.2.1.zip
Step 1)
The installation of this part is a bit more. First upload the ckfinder folder to your server. I have the ckeditor and ckfinder as separate folder in /memberpages/ (so not in the root). This is because only loged-in members can use this functionality.
Step 2)
Change the CKEditor to accept options set from you .aspx page:
<asp:TextBox ID="txtNewNewsText" TextMode="MultiLine" runat="server"></asp:TextBox>
<script type="text/javascript">
CKEDITOR.replace('siteContentHolder_txtNewNewsText',
{
toolbar: 'cms_toolbar',
filebrowserBrowseUrl: '/memberpages/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/memberpages/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl: '/memberpages/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl: '/memberpages/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/memberpages/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl: '/memberpages/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
});
</script>
Note: the toolbar is a custom toolbar, you can remove this from the options or read my article on that.
Step 3)
In the config.ascx file (in the root of the ckfinder folder) change the BaseUrl if you want to let the images be uploaded to a different folder. For example:
BaseUrl = "http://www.yourdomain.com/memberpages/Images/"; BaseDir = "c:/hostingspaces/user/yourdomein.com/wwwroot/memberpages/Images/";
Normaly the folder is /userfiles/. I do it like this, so I can upload images to different websites. If you don’t know the directory, just leave is blank. CKFinder will try to resolve it.
What is important that you give the directory you specify the read/write rights. Otherwise the CKFinder isn’t able to upload anything into it.
That’s it. Now you can upload and use images in a textbox, almost like you are working in MS Word.
This is one of my first technical posts, so feel free to leave suggestions for me to improve, or leave some comments is you need extra info.
[...] ASP.net Tips, scripts and solutions The ASP.net story behind Lynx Digiservice Skip to content HomeOver ← installing WYSIWYG editor with image upload function in ASP.net [...]