HTML Wysywig Editor

Bringing the internet highway into your project? Building FTP, HTTP, email, chat or other client solutions?

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Post Reply
Gerhard
Posts: 1
Joined: Mon Dec 17, 2018 7:26 am

HTML Wysywig Editor

Post by Gerhard » 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

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6310
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: HTML Wysywig Editor

Post by FourthWorld » Mon Dec 17, 2018 8:41 am

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?
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

bogs
Posts: 2583
Joined: Sat Feb 25, 2017 10:45 pm

Re: HTML Wysywig Editor

Post by bogs » Mon Dec 17, 2018 2:30 pm

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 -
Selection_001.png
Styled text to html...
Which output this file -
Selection_002.png
Saved html...
Selection_002.png (10.29 KiB) Viewed 753 times
Which made this webpage -
Selection_003.png
Final output...
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?
Image

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1880
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: HTML Wysywig Editor

Post by [-hh] » Wed Dec 19, 2018 12:25 am

shiftLock happens

bogs
Posts: 2583
Joined: Sat Feb 25, 2017 10:45 pm

Re: HTML Wysywig Editor

Post by bogs » Wed Dec 19, 2018 12:33 pm

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 :D
Image

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1880
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: HTML Wysywig Editor

Post by [-hh] » Wed Dec 19, 2018 1:56 pm

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.
shiftLock happens

bogs
Posts: 2583
Joined: Sat Feb 25, 2017 10:45 pm

Re: HTML Wysywig Editor

Post by bogs » Wed Dec 19, 2018 3:05 pm

[-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 :D
Image

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6310
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: HTML Wysywig Editor

Post by FourthWorld » Wed Dec 19, 2018 8:20 pm

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.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

Post Reply

Return to “Internet”