Integrating CKEditor in an ASP.Net Webforms Application

Question

I'm trying to use CKEditor in my Webforms application and I have tried many other methods without success. Can someone help? The site uses a Site.Master file which all the aspx files provide content for using content place-holders. So I place the JavaScript call in the ASPX rather than in the master file.

I'm also trying to get it to edit in a content editable div element. It works fine in a small test site but not in my application. Any ideas?

My Site.master has two content placeholders I want to use:

<asp:ContentPlaceHolder ID="Scripts" runat="server" />
and
<asp:ContentPlaceHolder ID="MainContent" runat="server">

An then my aspx files have:

<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server"> 
<script src="ckeditor/ckeditor.js"></script> 
</asp:Content>`

and

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <div id="renderTarget" renderwidth="1100"> </asp:Content> </asp:Content>

Somewhere in my JavaScript, I set the content editable of my renderTarget div to true.

$(".contentbox[dynamic='true']").attr("contenteditable", "true");

And at this point, I expect CKedtor to add its controls to the div. But It doesn't. i use the same process with TinyMCE and it works fine.

Answer 1

If you have CKEditor in your project correctly, it is as simple as:

<textarea cols="80" class="ckeditor" id="editor1" name="editor1" rows="10"></textarea>

or even

<div contenteditable="true">...</div>

Also, you may want to read up on jQuery Selectors .

An example more like what you posted:

<div id="ckMe">...</div>

<script>
    $(document).ready(function () {
        $("#ckMe").attr("contenteditable", "true");
    });
</script>

Answer 2

all you need is to install the version for asp.net in your project and then just use it as simple as adding a usercontrol:

<ckeditor:ckeditorcontrol ID="CkEditor1" runat="server"></ckeditor:ckeditorcontrol>

Documentation from ckEditor