LiveCode Forums

How can I program a Wysywig HTML editor in live code?
Would be happy about hints.
Thanks a lot

It's a tremendous amount of work. Very few exist, and with few exceptions only the biggest companies do well in that space. Are you sure you want to proceed?

I don't know that I would be so quick to jump into the tremendous amount of work camp, it depends on so many factors.

How complicated do you want this program to be would be the top of the factors list.

A simple text editor with simple capabilities, say, styled text, opening/saving files, using different fonts, that part might take a day for someone with intermediate skills. Heck, there are even tutorials which would walk you through it in a few hours.

Something like the devawriter on the other hand might take you years to write, so scope matters.

Now, lets say you have your text editor written and your happy with it, you now have to convert the output to html, if we are talking about a simple editor. This is rediculously easy in Lc, after reading your post it took me maybe half an hour to jigger this together - Which output this file - Which made this webpage - But again, this is all a very simple and straightforward demo, it doesn't include things like putting graphics into the formatting, .js files, xml (although I imagine xml wouldn't be a huge time addition), or any number of other things.

So, how complicated an editor are you asking about?

Again, the main question is going to be are you looking for something to knock together simple pages in a wysiwyg manner, or something that can build web store fronts and the like?

From very simple to advanced (in 4 steps)

http://livecodeshare.runrev.com/stack/8 ... tEditBasic
http://livecodeshare.runrev.com/stack/8 ... xtEditFull

Gerhard wrote: ↑

Mon Dec 17, 2018 7:35 am

How can I program a Wysywig HTML editor in live code?
Would be happy about hints.
Thanks a lot

[-hh] wrote: ↑

Wed Dec 19, 2018 12:25 am

From very simple to advanced (in 4 steps)

LOL!

Although I think your stuff is a great inspiration to aspire too, I think Gerhard wants to actually learn how to program it for themselves, even though they haven't replied back to the thread in a while

Yes, OK if it is a pure exercise for the htmltext property. And your posts are the best possible help if so.

If not, the problem is that the htmltext property of LC isn't up-to-date HTML, it doesn't even support simple tables, it is less than the 20 years old HTML3 standards.
Sooner or later your htmltext approach will reach these limits. May be the CSS support announced for 9.x will allow you to go this way.

[-hh] wrote: ↑

Wed Dec 19, 2018 1:56 pm

If not, the problem is that the htmltext property of LC isn't up-to-date HTML, it doesn't even support simple tables, it is less than the 20 years old HTML3 standards.

I completely agree, and if Gerhard is looking to do anything more complicated than a simple thing as mentioned above, they are certainly going to have to spend more than a day doing such a project.

I don't think my post was the best anything heh, it was merely trying to find out what Gerhard is shooting for. As I said, if they are shooting to see what is ultimately possible, they couldn't do better than to look at the 2 examples you posted. They almost (ALMOST) inspired me to see just how far I could take doing one in Mc.

Thankfully, I came back to my senses

And that's why I described making a truly WYSIWYG HTML editor as a fair bit of work. Not at all impossible; I've made several site-specific ones over the years. But even site-specific tools will take some work.

HtmlText isn't at all HTML, as Hermann noted. Indeed, it was never intended to be. The purpose of HtmlText is to provide a plaintext representation of the contents of a LiveCode field, sufficiently complete to reproduce the field's content with complete fidelity.

But that's all. The name merely orients the user to the structure of that field content representation, and is not meant to imply a direct correlation with true HTML. For this reason the core devs once considered renaming the property "XmlText", but ultimately that choice would have been only incrementally better, still encumbered with expectations beyond its designed purpose, and would introduce compatibility issues making it a non-starter. So "htmlText" remains the name, despite the occasional misunderstanding as to its role.

That said, because HtmlText is machine generated it's predictably consistent, lending itself well to the massaging needed to transform into a form that can be rendered well in even modern browsers.

But here we soberly face the distinction between "possible" and "desirable": htmlText puts all formatting and styling inline, while there are many good reasons to separate those with CSS.

Given the consistency of htmlText, it's possible to build a system that uses style definitions which are applied to text runs. But the means by which this is done within LC will be different from what's needed in the browser, so any generator one would craft for that would require some thought about how that's handled and how the UI presents that to the user.

All of this is doable, but as Hermann reminds us, only if you're content with the subset of web presentation options supported in the LiveCode field object; other object types like images, buttons, menus, and vector graphics each require their own translation strategy.

To be fair, with widgets and custom controls, and a bit of scripting, even those need not be show stoppers, but it does mean more work for things like tables, many kinds of lists, images, etc.

Perhaps the biggest challenge is the difference between just about any app creation tool's object placement logic and the implicit flow of element rendering in HTML. App tools tend to use absolute coordinates, while HTML flows elements to avoid overlap.

True, one can generate the resulting elements with absolute coordinates to mimic how apps like LC work, but is that desirable in a web page where users are accustomed to content reflowing to fit a resizable window?

This requires the developer of such a tool to define a layout framework to translate the positioning we do in script to the corresponding CSS attributes.

Even better (a system I've been working on in my spare time) would be to craft a layout framework for LC which supports HTML-like flow. Such a framework not only benefits the generation of responsive web layouts, but also simplifies work for native apps that will never be have HTML generated from them. But I can say with the confidence of personal experience, this is not as straightforward as it might seem when you first get the idea over a beer with a friend.

In short, some parts of a "WYSIWYG HTML editor" are easier than others. As we learn more about the OP's specific needs we can provide useful guidance.