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

 

[Jason Lee Hayes]

Moved on with this a little more; added some things in needed...

Still some UI tidying to do and features to add but because its HTML CSS & JAVA you can drop the features in or remove them as needed simply by importing... Completely flexible - just add the JS function

Once finalised will upload.

Quick Video

Dropbox

www.dropbox.com

 

[Albert D. Kallal]

Moved on with this a little more; added some things in needed...

Thanks for sharing. I will consider using this on one of my web sites. Not quite sure how I'll add sanitization, but the pages using this HTML editor are ONLY used by site admins to create messages and some content - not end users.

Sanitization is often required if such pages that "allow" HTML editing are public facing, since one does not want users to say inject JavaScript into the content. However, lack of sanitization could be a "feature" in the sense that when/if ONLY site admins are using the HTML editor for adding content to the site, then one tends not to care about "dangerous" content being used or added via such an HTML editor.

I don't require sanitization at this point in time.....

Busy and not a top priority right now but I will give this editor a try on one of my sites - just to see how well it works compared to the existing HTML editor I'm using. For images, I currently use "in-line" images which of course become base64 strings, and is a feature I use quite a bit right now.

So, I'll try this time permitting -- and post back to see how well this suits my needs....

Again, such editors have a zillion use cases, and often the use cases are VERY surprising. I have a "issues" database, and the choices are managed by a HTML editor, and thus to add a new software system, we can paste in a new choice, but the choice can include HTML.

So, choices look like this right now:

In above, the "Project" choices from a database, but the "choices" are in fact edited with a HTML editor. So, in place of a simple combo box dropdown, we have nice grapic image choices. But, it still the equiliavnt of a combo box. In fact, I just feed the .net radiobutton list with the list of choices, but as above shows, the Project, the Isssue, the Priority? They are all HTML choices, so above looks MUCH nicer then just 3 combo boxes, but code behind really is the SAME as if we just used combo boxes for the choices.

So, the point? Well, then the choices on the site become rather nice looking, since we not limited to a simple combo box for such choices, but can include image + text. The editor thus looks like this:

So, for a "choice" of project type, I can have text, graphics, or both. It means as a developer, I allow the admin to add new project types, but they are a whole lot nicer then just a combo box with text.

I should also point out that often when editing a issue, they include a screen shot - again, a HTML editor allows this. In above, that screen shot is of a ms-access application.......
Needless to say, this means that HTML editors have boatloads of use cases......

R
Albert