CODEWITHSUNDEEP
javascriptc#htmlwinformsckeditor
Imran Mohamed
Imran Mohamed

Reputation: 41

Getting and Setting CKEditor HTML in a C#.net Winform App

I am trying to use CKEditor in a Winform app to load, manipulate, and store HTML content in a Sql Server database.

I found this great post on how to get CKEditor onto a winform:

Can the CKEditor be used in a WinForms application for (X)HTML editing?

However it does not detail how to load the HTML content or extract it once the user has manipulated it.

I have tried:

webBrowser1.Document.GetElementById("editor1").InnerText;

However that returns the initial data that was loaded into the editor, after it is manipulated by the user, it still returns the same value.

If someone could expand on the answer in the link above with some code that loads the editor with some content and some code that displays a message box in the WinForm application with its current content, I would really appreciate it. My suspicion is that it requires some more JavaScript in the html file that is initially opened but I know nothing about javascript and I've spent several days trying to trip my way through it with no success.

Thanks in advance.

Upvotes: 2

Views: 2191

Answers (1)

Imran Mohamed
Imran Mohamed

Reputation: 41

In some more research today, I was able to answer my own question... The blank HTML setup file I load to the webbrowser control looks like this:

<html>
    <head>
        <script src="http://cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
    </head>
    <script>
        var editor1, html = '';

        function createEditor() {
            if ( editor1 )
                return;

            // Create a new editor instance inside the <div id="editor1"> element,
            // setting its value to html.
            var config = {};
            editor1 = CKEDITOR.appendTo( 'editor1', config, html );
        }

        function getHtml() {
            if ( !editor1 )
                return;
            html = editor1.getData();
            return html

        }

        function setHtml(vsHtml) {
            if ( !editor1 )
                return;
            editor1.setData(vsHtml)
        }
    </script>
    <div id="editor1"></div>
</html>

The the C# code looks like this:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace HTMLEditor
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load_1(object sender, EventArgs e)
        {
            webBrowser1.Navigate("C:\\AMResearch\\HTMLEditor\\blank.html");
            Application.DoEvents();
        }

        private void button1_Click_1(object sender, EventArgs e)
        {
            webBrowser1.Document.InvokeScript("createEditor");
        }

        private void button2_Click(object sender, EventArgs e)
        {
            string sHtml;
            sHtml = (string)webBrowser1.Document.InvokeScript("getHtml");
            MessageBox.Show(sHtml);
        }

        private void button3_Click(object sender, EventArgs e)
        {
            Object[] objArray = new Object[1];
            objArray[0] = "<p>Hellow World!</p>";
            webBrowser1.Document.InvokeScript("setHtml", objArray);
        }

    }
}

Upvotes: 2

Related Questions