Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2021-01-07 05:16:26
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
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
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: 165
Offline
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
Re: wysiwyg editor
A tough problem is txp tags integration, generally HTML parsers fubar it. I remember having experimented and failed.
Offline
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
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
Re: wysiwyg editor
Can’t blame them for being confused by
<txp:tag attr='<txp:tag attr=''<txp:tag />'' />' />Offline
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
Offline
#11 2021-01-11 06:32:05
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
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("<", "<").replaceAll(">", ">");
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
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