wysiwyg editor

Myusername · 2021-01-07 05:16:26

Looking at some text editors, I met WysiBB and sceditor. They offer a wysiwyg editor but with bbcode output. It looks cool, doesn’t it?

Has anyone here had any experience with these editors? Would something like that be cool with Textile?

I will certainly play with this a little.

Last edited by Myusername (2021-01-16 10:40:09)

Bloke · 2021-01-07 10:36:01

I’m always on the lookout for editors that are lightweight enough to roll in here. Prosemirror (though not exactly lightweight if you throw the kitchen sink at it) was the one closest in the frame but writing a filter for Textile was… challenging shall we say.

If the ones you mention can have Textile filters added, great. If you can roll them up in a plugin akin to wet_textfilter_markdown to allow people to choose BBCode as an input mechanism, that would be a boon for people that want to try and use Txp as a sort-of forum system, or simply for more markup options when composing article content.

smd_textile_bar is a halfway approach to allow Textile markup to be inserted rather than a full WYSIWYG environment, so that’s another approach that could be adopted, especially since we now have ‘Live preview’ available. A plugin could inject rendering markup into the textarea, and then the live preview takes care of showing you what it looks like rendered by passing it through the chosen textfilter in real time.

Lots of options, so if there’s anything you can bring to the platform here, it’d be most welcome.

Myusername · 2021-01-08 12:49:45

I just did some tests with pell.js and I liked it. I got the best result so far.

Take a look at this link and see what you think. You can write in the wysiwyg editor and in the textile.

Bloke · 2021-01-08 13:25:58

Very nice! I like that the two views are synced like that. And it copes really well with esoteric uses. The only thing missing as far as I can tell is the multi-line blockquote (bq..) and block code (bc..) but otherwise, that’s sweet.

And Pell’s so tiny at less than 4KB gzip+minified. Impressive. Slightly larger with the textile to HTML converters in, but even so, all less than 50KB.

This kind of thing might have potential if we can package it up as a plugin and find a way to fit it into the UI. My initial (unfiltered) thinking is a tabbed interface – like we had a few versions ago, but offered in realtime. So there’s a Textile (or, more accurately, a Textfilter) view which will offer the ability to type content via your markup system of choice. And you can flip to WYSIWYG view if you like, provided there’s an “HTML-to-your-markup-system” converter available to bundle in. Maybe even add an HTML view if we can find a way to grab the intermediate HTML code and squirt it into a third tab, so you can check what the other views have constructed under the hood.

With the tabs, you can pick which view you see and, for bonus points, if we remember which view is selected in localStorage then you’ll see that one by default each time you edit an article: a choice of editing environment.

I like this. It has potential. Thank you for putting the demo together. Be interested to hear what others have to say about this.

etc · 2021-01-08 13:56:11

A tough problem is txp tags integration, generally HTML parsers fubar it. I remember having experimented and failed.

Bloke · 2021-01-08 15:07:23

etc wrote #328090:

A tough problem is txp tags integration, generally HTML parsers fubar it.

Yes, that is likely to be an issue. Testing required.

Bloke · 2021-01-08 15:16:02

Yeah, it seems to automatically prepend ‘bc.’ in front of any tags if you paste something like this into the WYSIWYG box:

<div class="header">
   <txp:title wraptag="h3" class="my_title" />
   <txp:article_image />
   <txp:excerpt />
</div>

And if you paste that into the Textile box, it just spits out the article_image tag verbatim, nothing else.

There are also odd issues with code being used at the end of the textarea. If you put some (bc.) code at the end of the WYSIWYG window and then press return a few times and add some more text, the newlines sometimes aren’t added and it just appends it to the end. Or occasionally puts it inside the closing </div> of your construct.

So, plenty of corner cases to work around. But still pretty cool.

etc · 2021-01-08 15:18:05

Can’t blame them for being confused by

<txp:tag attr='<txp:tag attr=''<txp:tag />'' />' />

Bloke · 2021-01-08 15:33:23

etc wrote #328099:

Can’t blame them for being confused by <txp:tag attr='<txp:tag attr=''<txp:tag />'' />' />...

Haha! Yeah. And it’s being able to handle things like that, which make (y)our Txp parser so freaking cool.

etc · 2021-01-08 15:36:17

Bloke wrote #328101:

(y)our Txp parser

That was not me, frankly! Ruud?

Myusername · 2021-01-11 06:32:05

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)

Bloke · 2021-01-11 08:55:54

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.

Myusername · 2021-01-11 09:48:21

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.

philwareham · 2021-01-11 09:53:44

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.

Bloke · 2021-01-11 10:02:20

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!

Textpattern CMS

Textpattern CMS support forum

#1 2021-01-07 05:16:26

wysiwyg editor

#2 2021-01-07 10:36:01

Re: wysiwyg editor

#3 2021-01-08 12:49:45

Re: wysiwyg editor

#4 2021-01-08 13:25:58

Re: wysiwyg editor

#5 2021-01-08 13:56:11

Re: wysiwyg editor

#6 2021-01-08 15:07:23

Re: wysiwyg editor

etc wrote #328090:

#7 2021-01-08 15:16:02

Re: wysiwyg editor

#8 2021-01-08 15:18:05

Re: wysiwyg editor

#9 2021-01-08 15:33:23

Re: wysiwyg editor

etc wrote #328099:

#10 2021-01-08 15:36:17

Re: wysiwyg editor

Bloke wrote #328101:

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

Re: wysiwyg editor

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

Re: wysiwyg editor

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

Re: wysiwyg editor

Bloke wrote #328124:

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

Re: wysiwyg editor

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

Re: wysiwyg editor

philwareham wrote #328126:

Board footer