HTML WYSIWYG Editor

Projects Networking, Protocols, and Devices
1

Hello all, I'm new to the forum, and new to Arduino projects.

As the title suggests i've seen multiple discussions about some sort of editor to create web pages (with basic elements), that live on an Arduino.
Rather than having to construct all the text (for the page) manually.
CKEditor is an open-source javascript based editor that is free to implement for open-source communities.
Can probably be tweaked to generate code (in various formats) for Arduino.
Should be easy enough to host it on the Arduino.cc website.

I'm sure there are web editors out there (people) that would contribute, and make it a nice easy tool for use with projects.

4
  1. Write your page in Markdown
  2. Use VS Code's Markdown to HTML converter to generate HTML
  3. Save to SD card or onboard Flash
  4. Profit!
5

Phase 1. LibreOffice (free!)
Phase 2. Write the document.
Phase 3. File >> Save As >> HTML
Phase 4. Profit!

image
image1920×1080 178 KB

image
image806×561 23.5 KB

The HTML from the saved document (nicely, not bloated with VS or CSS)

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title></title>
	<meta name="generator" content="LibreOffice 25.2.2.2 (Windows)"/>
	<meta name="created" content="2025-05-05T11:56:10.539798900"/>
	<meta name="changed" content="2025-05-05T12:03:56.457778200"/>
	<style type="text/css">
		@page { size: 8.5in 11in; margin: 0.79in }
		p { line-height: 115%; margin-bottom: 0.1in; background: transparent }
	</style>
</head>
<body lang="en-US" link="#000080" vlink="#800000" dir="ltr"><p align="center" style="line-height: 100%; margin-bottom: 0in">
Hello, Squirrels!</p>
<p style="line-height: 100%; margin-bottom: 0in"><img src="hellosquirrels_html_a3a024cc.gif" name="Image1" align="left" width="207" height="108" border="0"/>
<br/>

</p>
</body>
</html>
6

FrontPage Express doesn't work anymore? :rofl:

7

What are the specific requirements for code for Arduino in this case?

8

Okay so the first 2 responses sort of hint at part of the problem, using an external HTML editor, then having to copy all the output into whatever mechanism, that someone would use to incorporate that inta a sketch and post views the whichever webserver code you are using, and whatever it requires.
One is just plain text, that would have to be place in String / char variables, then posted via that mechanism's requirements.

[quote="mocallins, post:1, topic:1379177, full:true"]
Hello all, I'm new to the forum, and new to Arduino projects.

As the title suggests i've seen multiple discussions about some sort of editor to create web pages (with basic elements), that live on an Arduino.
Rather than having to construct all the text (for the page) manually.
CKEditor is an open-source javascript based editor that is free to implement for open-source communities.
Can probably be tweaked to generate code (in various formats) for Arduino.
Should be easy enough to host it on the Arduino.cc website.

I'm sure there are web editors out there (people) that would contribute, and make it a nice easy tool for use with projects.

@Rintin I didn't do any extensive research but i did see a package called PageBuilder, and another, don't remember right off, the name, but it looks like there are multiple.
And have the output tweaked , for that package. the you just copy and paste the code in your sketch.

And anybody who looked at this, this is 2025, can't we have great tools to help us all out, without having to resort to the clunking way arduino / cpp code limits us.

Like I said i'm new the the Arduino world, but i've already written some things to help replace variable names, with values in text strings. Sure looks a lot better than a bunch of clunky Serial.print(ln) statements with their variables inserted appropriatly.

I plan on posting it to the community at some point, just trying to wrap my head around the whole .h / .cpp files, t make it more easily usable.
I also implemented it with va_* , but i'm sreioisly considering rethinking that in favor of an array of struct, with name/value definitions which would make lookup, much easier and make it more understandable, for usage. Little bit of additional legwork, but i think the result is more robust.
Still thinking it out, and playing around with it.

Is there no preview of the post, before submiotted ?

9

Why does it need to be copied to a sketch? Any arduino capable of running a webserver can load/save files from Flash or SD card. There's also a templating library out there to do dynamic inserts into the page as it's served.

10

Message received. Why have you not built it yourself? Too lazy or too ignorant?

On a PC, to the right. Not on phones. PHONE: YES... SEE POST 16

11

Well how else would it serve the data to the web page without having that data in the sketch. Even if it was in flash, you have to loafd it in the flash, in the sketch !!

12

You can store your HTML in LittleFs or SPIFFS.
Dynamic data can be loaded via fecth API.

This splits presentation and data. This allows to test the HTML with a local HTTP server and without flashing it.

13

Probably a little , or a lot of both. I'm not a web developer, but i know i could copy and paste that data into a sketch and into char array or String, and then put it into the function call to display in the browser, on connection. But would it be optimal, NO.
And now that i have my own function to replace strings (variable name / value), i could even tweak it, to display custom data

14

Vastly oversimplifying by leaving out a lot of code, but...

#include <ESPAsyncWebServer.h>
#include "LittleFS.h"

...

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

...

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{ request->send(LittleFS, "/index.html", String(), false, templateProcessor); });

Responds with the index.html stored on the filesystem when you make a request on the home page. It also allows you to insert a template processor function to replace parameters in the HTML with your own values retrieved by code.

15

Yep, that's what i would consider stored in the sketch, or at least gets compiled into the sketch.

16

The fact is you don't need the compiler to update the content of the on-board LittleFS or the files on a removable SD card; which proves that it's not in the sketch.

On a phone, the preview button is in the bottom right corner; looks like a monitor screen. Tap it and with the preview shown, the button switches to a pen(cil) to switch back to editing; along with the big button in the bottom left to post.

18

OK maybe I should have clarified, i'm using ESP8266 with no external media. So basically all the html code is in the sketch, and obviusly it can be extended.

19

ESP8266 supports LittleFS. You can store files on internal Flash that are not a part of your code.

In fact, I think the program that the snippet I posted above came from has conditional compiles for either ESP32 or ESP8266, but it's been a long time since I used the 8266 version.