A simple HTML editor to work in the edge browser

[CJ_London]

It needs further development to meet specific requirements but ChatGPT came up with this as a basic editor. Thought I'd share it in this forum.

To use, unzip and modify the path in the edge browser controlsource to wherever you put the html file

 

[Moosak]

Thank you for sharing .

I believe that you can get the same result by using just access tools :

 

[isladogs]

@Moosak
Bear in mind that isn't full HTML. You are just showing the PlainText version of the RichText data in the right textbox.
I do exactly the same in my rich text editor app

Rich Text Editor

This article demonstrates the use of rich text in a long text (memo) field and shows how to view the underlying code. It also compares the use of rich text and true HTML in Access forms

www.isladogs.co.uk

If you try and enter HTML features not supported by RichText format, it will fail.

 

[CJ_London]

you can also run the html file in a browser if you so wish - can't do that with richtext

 

[isladogs]

@CJ_London
The image feature doesn't appear to work correctly either for local or online image paths. I just see a placeholder in each case.

 

[CJ_London]

As I said, it is a basic editor and needs further development and that is one of the things that needs addressing - I simply asked chatgpt, it produced the code and it worked as is. I did so as a response in a thread asking about the 'dangers' of richtext. If someone want to copy the html code, post it to an AI of their choice and ask for it to add additional features they can. It took me no more that 15 minutes to create and I'm not claiming any credit.

I've played around with it some more since, but not finished - now It displays images and you can resize them, move them around the screen and set text wrapping. More work to be done (for me) - increase the number of fonts, provide background coloring - particularly for tables, provide borders for images, add buttons to name a few. For me, I would primarily use it for creating help files and email html body templates. It's also useful (to me) for seeing how the underlying code is modified - much like your rich text editor For others, perhaps they would want to add the facility to open another form, use a magnifier on some of the text, use vertical text - or even to create their own web pages (although there are plenty of editors out there already).

 

[Jason Lee Hayes]

It needs further development to meet specific requirements but ChatGPT came up with this as a basic editor. Thought I'd share it in this forum.

To use, unzip and modify the path in the edge browser controlsource to wherever you put the html file

I found it very useful when editing/creating my HTML driven switchboard from withing access....

 

[Albert D. Kallal]

Actually, I been looking for a nice HTML editor - might consider using ckedit.

From our web based software, we have a email template system.

So, this allows us to create a e-mail template, and even ms-access (with outlook) can (and does) also use these templates.

Since it's a email system, then we allow small images "in-line" and thus we often paste into the editor a image - and it becomes a base64 string.

So, it looks like this:

To be fair, the sample posted HTML editor here?
I find that ctrl-v in that editor DOES paste in the image as base64 strings.

Hence this:

Needless to say, having a HTML editor to "create" content such as web greetings, or in this case a email template is a REALLY nice approach, since then you can with ease create + format a email - with fonts, pictures, signatures etc.

The above template also allows one to define/use a table or query, and you can pass the routine a PK id for the database row, and thus any data column field can be included in such templates.

As noted, while the above first screen cap is a 100% web based HTML editor, those same templates (saved into a database) are also used by our MS-Access applications.

I can only state that using "markup" to create content for emails etc. has an amazing amount of use cases.....

Now, if I can just find a really great HTML edtior, one without monthly license fees, then I can dump the older editor I'm currently using the ajaxtoolkit HTML editor right now, and it's quite old, but gets the job done).

Newer editors have picture re-sizing options, and quite a bit more support for CSS. However, we avoid CSS right now, since outlook desktop not been much tested to see how/what it supports and does with CSS...

R
Albert

 

[Jason Lee Hayes]

Added some features to support my purpose; importantly Markdown → HTML Auto‑Conversion to support my Telegram Messaging project （Access Safe） & WebView2 Post Message
Hook Added.

• Two‑way sync (Editor ⇄ HTML view)
• Expanded toolbar (undo/redo, align, clear, links, HR, quote, code, etc.)
• Dark mode toggle
• Keyboard shortcuts
• Paste cleaner + basic HTML sanitizer

 

[Jason Lee Hayes]

If you need Base64 Paste Support:
Suggest: add auto resize and compression to better the function.

// PASTE HANDLER WITH BASE64 IMAGE + AUTO-RESIZE
editorEl.addEventListener('paste', function (e) {
    e.preventDefault();

    const clipboard = e.clipboardData || window.clipboardData;
    if (!clipboard) return;

    // 1. Check for image files in clipboard
    const items = clipboard.items || [];
    for (let i = 0; i < items.length; i++) {
        const item = items[i];

        if (item.type && item.type.indexOf("image") !== -1) {
            const file = item.getAsFile();
            if (file) {

                // Optional: size limit
                // if (file.size > 5 * 1024 * 1024) {
                //     alert("Image too large. Please resize first.");
                //     return;
                // }

                processImageFileToBase64(file, function (base64) {
                    const imgHtml = '<img src="' + base64 + '" style="max-width:100%;">';
                    document.execCommand("insertHTML", false, imgHtml);
                    updateHtml();
                    notifyHost();
                });

                return; // handled image
            }
        }
    }

    // 2. If no image, fall back to HTML/text
    const html = clipboard.getData('text/html');
    const text = clipboard.getData('text/plain');

    if (html) {
        let cleaned = sanitizeHtml(html);
        document.execCommand('insertHTML', false, cleaned);
    } else if (text) {
        const safeText = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        document.execCommand('insertHTML', false, safeText.replace(/\n/g, '<br>'));
    }

    updateHtml();
    notifyHost();
});

 

[CJ_London]

Wow - looks like you’ve moved it a long way forward - will take a look when I’m back at my pc