Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#31 2021-01-16 20:29:28
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
I took the test, and the short answer is that it works.
The content you see in the editor, is initially in a textarea. So when it is inserted into the editor, it doesn’t matter if I use innerHTML or textContent to do this, the result is the same: plain text.
The editor uses textContent when updating the content. This means that, even after recurring updates, everything is still considered as plain text. That’s nice!
However, if you want the syntax highlighting of the tags to work, it needs to be this way:
/(<\/?(?:\w+:?):\w+(?:\[-?\d+\])?(?:\s+[\w\-]+(?:\s*=\s*(?:"(?:[^"]|"")*"|\'(?:[^\']|\'\')*\'|[^\s\'"\/>]+))?)*\s*\/?\>)/A div for example:
/<div>/Last edited by Myusername (2021-01-16 20:43:57)
Offline
#32 2021-01-30 10:49:26
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
The misbehave is interesting, and there is even a demo working with prismjs here
In addition, prismjs has a very simple syntax highlight for textile. Is it difficult to make him more attractive?
It is interesting, mainly because it is an editor that, together with prismjs, could be used both in the write tab and in the forms, pages and styles tabs.
Offline
Offline
#34 2021-01-31 08:16:45
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
I did some tests and here is a demonstration. This is misbehavejs with syntax highlighting from prismjs, with this plugin that allows even pre-existing HTML.
Offline
Re: wysiwyg editor
Myusername wrote #328434:
I did some tests and here is a demonstration.
Nice work! What do you mean by ‘allows even pre-existing HTML’?
Offline
#36 2021-01-31 17:11:58
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
On all occasions so far, I had to convert the opening and closing tags, to deal with the “pre-existing HTML”, the one that was there before the page was loaded, those that were still inserted in the back end. It was common for editors to remove or render this HTML.
Anyway, it was not necessary this time, because the prism does the job. With this plugin, the editor will have no problems with HTML, even the one that existed before the page was loaded.
I tried to be explanatory, I hope you understood what I meant.
Offline
Re: wysiwyg editor
Myusername wrote #328434:
Do you happen to know how in that demonstration the Textile link is being filtered to scope for the grey punctuation only (i.e. "":)?
I’m trying to target this in a TextMate theme but the regex is beyond me.
I’d also like to target paired Textile syntax in general, if anyone knows the trick to that, too, for example @...@, %...%, *...*, etc.
I don’t mean target the elements they stand for, or the strings between, but the actual punctuation pairs themselves. I want to grey these down from the regular text/strings.
Last edited by Destry (2021-01-31 18:09:14)
Offline
#38 2021-02-01 18:51:42
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
The syntax highlighting for this demo is done by prismjs. You may find something in this file.
Offline
Offline
#40 2021-02-02 16:20:53
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
I did a few things in regular expressions, but I think that is as much as I can get. I will leave the demo as it is, maybe someone will be interested in continuing this.
Offline
Re: wysiwyg editor
Myusername wrote #328496:
I will leave the demo as it is, maybe someone will be interested in continuing this.
Sure, I think that would be a nice addition, say, to smd_textile_bar and then to core if approved by the community. Personally, I’m more interested in auto-complete/indent feature than in syntax colouration, will take a look if the time permits.
Offline
#42 2021-02-03 09:22:53
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
etc wrote #328498:
Sure, I think that would be a nice addition, say, to smd_textile_bar and then to core if approved by the community
Yes, it would be great, although smd_textile_bar was created for <textarea>. I don’t know how much it will interfere.
Personally, I’m more interested in auto-complete/indent feature than in syntax colouration, will take a look if the time permits.
Yes, they are very useful.
Certainly a editor with these resources would be a great step forward, talking about the Textpattern admin area.
Although, some bugs need to be resolved before anything.
Last edited by Myusername (2021-02-03 09:24:39)
Offline
#43 2021-02-04 08:06:24
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
Look codejar.
And here the demonstration with prismjs textile.
Last edited by Myusername (2021-02-04 08:14:45)
Offline
Re: wysiwyg editor
Very cute for 2kB! I’m not sure we can get everything we want just via options, but worths testing.
Offline
#45 2021-02-05 14:08:04
- Myusername
- Member
- Registered: 2019-12-12
- Posts: 165
Re: wysiwyg editor
I made a plugin that puts codejar with prismjs in Textpattern. More specifically on the tabs write, pages, forms and styles.
Just for a real demonstration.
In this plugin, I made some modifications so that it works together with wet_textfilter_markdown, and change the syntax highlight according to the user’s choice.
If anyone is curious they can download here
Last edited by Myusername (2021-02-05 14:10:01)
Offline