Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

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

wysiwyg editor

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)

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: wysiwyg editor

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.


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

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

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

Re: wysiwyg editor

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.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: wysiwyg editor

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.


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

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: wysiwyg editor

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

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: wysiwyg editor

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.


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

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: wysiwyg editor

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.


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

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: wysiwyg editor

Can’t blame them for being confused by

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

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: wysiwyg editor

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.


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

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

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: wysiwyg editor

Bloke wrote #328101:

(y)our Txp parser

That was not me, frankly! Ruud?

Offline

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

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

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: 11,250
Website GitHub

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

Offline

Board footer

Powered by FluxBB