Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2021-01-11 06:32:05

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

Re: wysiwyg editor

About the problem of inserting HTML in the textile box and it being rendered in the wysiwyg box, I did some tests and…

var t = $("#textile-output").val();
t = t.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
t = textile(t);
$(".pell-content").html(t);

Just converting the openings and closings of the html tags before textile.js does its job and sends the content to the wysiwyg box, seems enough for HTML to be considered just the text to be displayed in the wysiwyg box. And then we can type any HTML or TXP tag freely in both boxes. Even <txp:tag attr='<txp:tag attr=''<txp:tag />'' />' />. Look.

This is similar to how SCEditor handles HTML. Look.

Last edited by Myusername (2021-01-11 06:41:30)

Offline

#12 2021-01-11 08:55:54

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,994
Website

Re: wysiwyg editor

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.

Thank you for continuing to improve this idea.


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

Online

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

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

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,437
Website

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: 9,994
Website

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

Online

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

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

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: 9,994
Website

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

Online

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

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

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,076
Website

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

Board footer

Powered by FluxBB