using CK editor in iframes

pamela rizk
pamela rizk used Ask the Experts™
on
i realize that ck editor is working in a simple web page but it is not working in an iframe
why and how to solve such issue?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Manoj PatilSr. Software Engineer

Commented:
Hi,
Can you tell me why you need CKEditor in iFrame ??
pamela rizkDeveloper

Author

Commented:
hi i need it because i need to add in iframe bold, italic charcteres etc..
Manoj PatilSr. Software Engineer

Commented:
CKEditor provides you the Toolbar where you can do all your text design easily. And also you will be able to get whatever work you did in CKEditor as in the text format and you can save it in DB.

But if you are using CKEditor in iFrame then you will not be able to get the input text easily.
pamela rizkDeveloper

Author

Commented:
so what should be do?how to solve such case ?
Sr. Software Engineer
Commented:
Don't use iFrame.
Just integrate CKEditor in your web page using below simple steps

  1. Open New Project [File->New->Project-> ASP.NET Empty Web Application]
  2. Name the Project as you like, I named it "TestCkEditor"
  3. Download the attached Zip file (CKEDditor.zip) and extract.
  4. You will find a bin folder when you extract the CKEditor.zip
  5. Go to the Solution explorer [References->Right Mouse Click -> Add References->Browse-> Then browse the bin folder of the extracted (CkEditor.zip) -> Select The Two DLLs (CKEditor.dll & CKEditor.Net.dll)->OK]
  6. There is a folder called CKEditor in small caps. Find the folder. This folder contains all necessary files (.js , .css, images, themes, etc. that are necessary for successful integration of this tool.
  7. Copy this folder and paste it in your project.
  8. Then add a new aspx page to the project.
  9. Then write this single line of code just before the HTML tag of your .aspx page. This block of line will register the DLL file that you have just added & using the "TagPrefix" will call the CKEditorControl. Here the BasePath is the folder you have just added which contains all necessary files to load the CKEditor.
  10. <%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
  11. Then add this div inside of the form tag of your aspx page and we are done.
  12. <div>
       <CKEditor:CKEditorControl ID="CKEditor1" BasePath="/ckeditor/" runat="server">
       </CKEditor:CKEditorControl>
    </div>
  13. Build the project and then run. You will find CKEditor with full features at your screen. Then customize as per your requirements.

Here is the back end code under button click.

HtmlEncode and HtmlDecode are useful ways to use in here. HTML encoding makes sure that text is displayed correctly in the browser and not interpreted by the browser as HTML. For example, if there is a string in the CKEditor which contains a less than sign (<) or greater than sign (>), the browser would interpret these characters as the opening or closing bracket of an HTML tag. When the characters are HTML encoded, they are
converted to the strings &lt; and&gt;, which causes the browser to display the less than sign and greater than sign correctly.

protected void Button1_Click(object sender, EventArgs e)
        {
            string str = CKEditor1.Text;
            string str1 = Server.HtmlEncode(str);
            string str2 = Server.HtmlDecode(str);
            lblText.Text = str2;
        }  

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial