Zoople - HTML Editor .NET Example Usage

Example Usage

The following is an example of dynamic control creation on a Windows form in Visual Studio using C#.

Sample Project Downloads

There are many examples in Visual Basic and C# in the sample applications download available by pressing the 'Download' button on this page or from GitHub.

Getting Started

Moving the cursor to the top of the edited document

htmlEditor.DocumentLoadComplete += HtmlEditor_DocumentLoadComplete;

private void HtmlEditor_DocumentLoadComplete(object sender, EventArgs e)
{
htmlEditor.MoveCursorToElement(this.htmlEditor.Document.Body, Zoople.HTMLEditControl.ELEM_ADJ.ELEM_ADJ_AfterBegin);
htmlEditor.SetFocus();
}

Simulating a TAB character in HTML

HTML does not natively support the TAB character. In order to create a functionality similar to TAB implement something like the following;

private void HtmlEditControl1_CancellableUserInteraction(object sender, CancellableUserInteractionEventsArgs e) {
if ((e.InteractionType == "onkeydown" && e.Keys.Keycode == 9)) {
    HtmlElement oEle = (HTMLEditControl) sender.InsertHTMLElement("span");
    oEle.Style = "padding-left: 100px";
    oEle.InnerHtml = " ";

    (HTMLEditControl) sender.MoveCursorToElement(oEle, HTMLEditControl.ELEM_ADJ.ELEM_ADJ_AfterEnd);

    e.Cancel = true;
}
}

Embedding Images as Base64 data

The following is an example of dynamic control creation on a Windows form in Visual Studio using C#. Simply reference the control in your Visual Studio project and add the following code to form.

This example code shows how to create an email message with inline (embedded images). The images in the editor document are included as Base64 data and the email is saved to a fictional SMTP pickup folder. Of course, the email may be sent using the SMTPClient .NET object

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

namespace Email_Message_Example
{
    public partial class Form1 : Form
    {

        Zoople.HTMLEditControl oEdit;

        public Form1()
        {
            InitializeComponent();

            oEdit = new Zoople.HTMLEditControl
            {
                Dock = DockStyle.Fill,
                DocumentHTML = "<img width=\"200\" align=\"right\" src=\"anna 2.jpg\">",
                ShowPropertyGrid = false,
                CSSText = "BODY {font-family: Arial Unicode MS, Arial, Sans-Serif;}",
                BaseURL = "file:///" + Application.StartupPath + "/images"
            };

            Controls.Add(oEdit);

            oEdit.ToolStripItems.Add("Save As Email").Click += AsEmail_Click;
        }

        private void AsEmail_Click(object sender, EventArgs e)
        {

            string EditorHTML = oEdit.DocumentHTML;

            MailMessage newMail = new MailMessage();
            newMail.To.Add(new MailAddress("you@your.address"));
            newMail.From = (new MailAddress("someone@their.address"));
            newMail.Subject = "Test Subject";
            newMail.IsBodyHtml = true;

            List inlineLogoList = new List();

            foreach (HtmlElement oImage in oEdit.GetItemsByTagName("img"))
            {
                Uri oUri = new Uri(oImage.GetAttribute("src"));
                if (oUri.IsFile)
                {
                    var inlineLogo = new LinkedResource(oUri.LocalPath, "image/" + new FileInfo(oUri.LocalPath).Extension.Substring(1))
                    {
                        ContentId = Guid.NewGuid().ToString()
                    };
                    oImage.SetAttribute("src", "cid:" + inlineLogo.ContentId);
                    inlineLogoList.Add(inlineLogo);
                }
            }

            var view = AlternateView.CreateAlternateViewFromString(oEdit.Document.Body.OuterHtml, null, "text/html");

            foreach (LinkedResource inlineLogo in inlineLogoList)
            {
                view.LinkedResources.Add(inlineLogo);
            }

            newMail.AlternateViews.Add(view);

            var view2 = AlternateView.CreateAlternateViewFromString(oEdit.Document.Body.InnerText, Encoding.ASCII, "text/plain");
            newMail.AlternateViews.Add(view2);

            SmtpClient client = new SmtpClient("mysmtphost");
            client.DeliveryMethod = SmtpDeliveryMethod.SpecifiedPickupDirectory;
            client.PickupDirectoryLocation = Application.StartupPath + "/SMTPPickupFolder";
            client.Send(newMail);

            oEdit.DocumentHTML = EditorHTML;

            MessageBox.Show("Successfully saved to \r\n\r\n " + Application.StartupPath + "/SMTPPickupFolder");

        }
    }
}