Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2021-01-11 09:48:21

Myusername
Member
Registered: 2019-12-12
Posts: 108

Re: wysiwyg editor

Bloke wrote #328124:

Nice workaround! The only (very minor) issue I found in my tests is that for some reason it converts straight quotes to curly quotes inside HTML blocks. Otherwise, that’s workable.

Yes, I noticed that. According to Textile’s own documentation, it converts straight quotes to curly quotes. This does not happen within bc., for example, but the HTML entered is considered text (now it is!), So the conversion of the quotes is done. Either way, it is easy to resolve.

Thank you for continuing to improve this idea.

Exact! These are just some ideas and tests to find problems, and then try to come up with ideas on how to solve those problems in some way. But consider my ideas, not my codes. It is noticeable that I don’t know how to program well.

For example, this solution that I brought, brings problems with the alignment of paragraphs: p>., p<. I believe that with regular expressions this would be easily solved, converting only what is, in fact, HTML tags. This is another idea that I haven’t been able to reproduce yet.

But I would love to see a WYSIWYG editor working side by side with Textile. So I will continue to work on it. If you notice new problems, or who knows, ideas of how something should be reproduced, feel free to speak. The tests are very much appreciated.

Offline

#14 2021-01-11 09:53:44

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,509
Website GitHub Twitter

Re: wysiwyg editor

This is looking very nice. I would love to get a WYSIWYG into the Textpattern core that can be turned on and off by users at their preference (and can be used on our planned unlimited custom fields). I also need to do some icon work on Stef’s Textile bar idea to integrate the bar better into the UI, so a similar set of icons could be done for this idea too.

Offline

#15 2021-01-11 10:02:20

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,286
Website GitHub

Re: wysiwyg editor

philwareham wrote #328126:

This is looking very nice. I would love to get a WYSIWYG into the Textpattern core that can be turned on and off by users at their preference.

That would indeed be lovely. My reticence has always been that most markup editors create dog ugly HTML, which causes more hassle than it’s worth to try and unpick when it puts 200 <span> tags around bunches of letters. This solution, with its tight synchronisation between Textile (or A.N.Other markup system) and HTML delivers a great experience because it creates both tidy HTML and Textile.

I also need to do some icon work on Stef’s Textile bar idea to integrate the bar better into the UI, so a similar set of icons could be done for this idea too.

Awesome!


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#16 2021-01-11 10:08:23

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,509
Website GitHub Twitter

Re: wysiwyg editor

Bloke wrote #328127:

This solution, with its tight synchronisation between Textile (or A.N.Other markup system) and HTML delivers a great experience because it creates both tidy HTML and Textile.

So, would this be a potential contender for core, if the UX can be hammered out well?

Offline

#17 2021-01-11 10:46:22

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,286
Website GitHub

Re: wysiwyg editor

philwareham wrote #328128:

So, would this be a potential contender for core, if the UX can be hammered out well?

It’s certainly small enough and light enough. My concern would be how to integrate it with any markup system you might have installed as a plugin (e.g. Markdown). That will require a markdown-to-html and html-to-markdown converter too, which bulks things up.

A core-sanctioned (com_) plugin might be preferable here so the various markup systems can be modularised. Maybe smd_textile_bar could become com_markup_bar or something? And that plugin would have bundled with it a bunch of converters for various markup systems so it can pick the correct one based on which Textfilter is in force for an article. We can expand the set of available filters as we go.

One element of fun is switching the markup system on-the-fly – loading new .js WYSIWYG converters if you swap the selector from, say, Textile to Markdown on the Write panel. No idea how to do that.

If it can be done cleverly as a core feature without bloating it with markup tools that may not be used, then cool. Trying to avoid the kitchen sink approach. If it works better as a helper plugin – i.e. opt-in and can benefit from a faster development cycle to be more reactive to changes in markup systems – then I’m fine with that too.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#18 2021-01-11 12:39:56

Myusername
Member
Registered: 2019-12-12
Posts: 108

Re: wysiwyg editor

The pasted content being just plain text seems like an interesting idea. This prevents people from pasting together any rubbish that can sometimes make life difficult for converters (does that happen? They have done very well.).

The downside is basically not being able to paste images. Perhaps there is a way to get around this and just accept images. Anyway, I think there are more advantages than disadvantages.

This is already working here.

Offline

#19 2021-01-11 13:09:20

moon blake
Member
From: near Hannover, Germany
Registered: 2009-07-16
Posts: 75

Re: wysiwyg editor

Just out of curiosity: are we talking about pell.js or about SCEditor now?

Offline

#20 2021-01-11 13:19:41

etc
Developer
Registered: 2010-11-11
Posts: 4,259
Website GitHub

Re: wysiwyg editor

Myusername wrote #328125:

I would love to see a WYSIWYG editor working side by side with Textile. So I will continue to work on it. If you notice new problems, or who knows, ideas of how something should be reproduced, feel free to speak. The tests are very much appreciated.

Me too, thanks for your efforts. But the simple tags encoding when switching from textile to html is not quite satisfactory:

  • images, paragraphs etc are rendered as plain text in wysiwyg editor, which makes it less wysiwyg. I could live with it, but
  • tags being rendered as plain text, textile gets its way into it, transforming quotes into curly ones etc, which makes, say, <txp:php /> blocks fragile:
<txp:php>echo "hello";</txp:php>

becomes unusable

<txp:php>echo “hello”;</txp:php>

edit: though not in textile editor, which is great. But all code formatting (linebreaks, tabulations) is mangled by textile, and notextile.. commands are removed.

Offline

#21 2021-01-11 14:08:07

Myusername
Member
Registered: 2019-12-12
Posts: 108

Re: wysiwyg editor

etc wrote #328132:

Me too, thanks for your efforts. But the simple tags encoding when switching from textile to html is not quite satisfactory:

  • images, paragraphs etc are rendered as plain text in wysiwyg editor, which makes it less wysiwyg.

Yes, I would say that seeing HTML in the wysiwyg editor makes it less wysiwyg. But we are not talking about wysiwyg/html, but wysiwyg/textile, so there will be peculiarities. I think the following:

When we type this:

<img src="image.jpeg"/>

I don’t expect this to render an image in the wysiwyg editor. If I want to “send” an image of the textile to wysiwyg, I type Textile:

!image.jpeg!

To see all the content rendered in HTML, including the tags you typed and are being rendered as plain text in the wysiwyg editor, the textpattern preview should be useful. Right?

edit: though not in textile editor, which is great. But all code formatting (linebreaks, tabulations) is mangled by textile, and notextile.. commands are removed.

Truth.

Last edited by Myusername (2021-01-11 14:10:59)

Offline

#22 2021-01-11 14:39:18

etc
Developer
Registered: 2010-11-11
Posts: 4,259
Website GitHub

Re: wysiwyg editor

Myusername wrote #328133:

When we type this:

<img src="image.jpeg"/>...

I don’t expect this to render an image in the wysiwyg editor.

To see all the content rendered in HTML, including the tags you typed and are being rendered as plain text in the wysiwyg editor, the textpattern preview should be useful. Right?

Yep, no problem for me here. But letting textile into html/txp blocks like txp:php, script etc is problematic. We’d need to somehow protect them, maybe by including inside some code block.. dunno.

Offline

#23 2021-01-14 16:28:57

Myusername
Member
Registered: 2019-12-12
Posts: 108

Re: wysiwyg editor

A textarea with real-time syntax.

I don’t think it’s an alternative, but it’s cool.

Last edited by Myusername (2021-01-14 16:34:59)

Offline

#24 2021-01-14 18:29:12

etc
Developer
Registered: 2010-11-11
Posts: 4,259
Website GitHub

Re: wysiwyg editor

Nice find, and easy to plug in.

Offline

Board footer

Powered by FluxBB