wysiwyg editor

Myusername · 2021-01-15 19:59:38

LRTEditor is a lightweight editor that does, I believe, the most boring job. Adds basic functionality to the editor, deals with updating the content and also with the mouse position after the update, etc. The cool thing is that it seems to be compatible with basically any syntax highlighting. As far as I know, there isn’t one for textile, right? If so, tell me I’ll do some tests. Ultimately, how viable would it be to create a syntax highlight for textile? Even if it is something very simple that, over time, can become something cool.

Some modifications to make it more friendly to the textile would be necessary, as well as a toolbar, which shouldn’t be a problem.

I did some bad tests and it can be seen here. I basically added some regexs (h1,h2 and images), also badly made, to manipulate the titles and images, to see how it would look. Very badly done, but can have potential in the right hands.

It is important to note that, it is only allowed to work in LRTEditor with text. Which means, the approach would be very similar to SimpleMDE, but simpler and without the heavy codemirror.

Well, take a look and see if it interests you.

etc · 2021-01-15 21:10:07

Myusername wrote #328181:

LRTEditor is a lightweight editor that does, I believe, the most boring job.

Thanks for sleuthing. Out of the box it looks too intrusive (impossible to type tags, at least at the beginning of the line), but all of them need parametrization.

Since we currently use jQuery though, this one looks easier to adapt to basic textile.

Myusername · 2021-01-16 09:31:35

etc wrote #328182:

(impossible to type tags, at least at the beginning of the line)

Sorry, that was my mistake. Updated.

etc · 2021-01-16 11:43:30

Thank you. I think it has potential, especially if it can also replace Prism.js we use for HTML preview highlighting. Probably too late for 4.8.5, but let’s try it in 4.9-dev?

Myusername · 2021-01-16 12:41:19

etc wrote #328185:

Thank you. I think it has potential, especially if it can also replace Prism.js we use for HTML preview highlighting. Probably too late for 4.8.5, but let’s try it in 4.9-dev?

It would be great.

If a syntax highlight is created for Textpattern, you can probably replace prismjs in the preview. Perhaps later, it may even extend to the page and form guides.

Last edited by Myusername (2021-01-16 12:41:41)

etc · 2021-01-16 13:56:41

Myusername wrote #328187:

If a syntax highlight is created for Textpattern …

I guess HTML highlighter is already available? Here is txp tag regex, if you want to experiment:

/(<\/?(?:\w+:?):\w+(?:\[-?\d+\])?(?:\s+[\w\-]+(?:\s*=\s*(?:"(?:[^"]|"")*"|\'(?:[^\']|\'\')*\'|[^\s\'"\/>]+))?)*\s*\/?\>)/

Myusername · 2021-01-16 20:29:28

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:

/(&lt;\/?(?:\w+:?):\w+(?:\[-?\d+\])?(?:\s+[\w\-]+(?:\s*=\s*(?:"(?:[^"]|"")*"|\'(?:[^\']|\'\')*\'|[^\s\'"\/&gt;]+))?)*\s*\/?\&gt;)/

A div for example:

/&lt;div&gt;/

Here is the result

Last edited by Myusername (2021-01-16 20:43:57)

Myusername · 2021-01-30 10:49:26

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.

etc · 2021-01-30 12:37:13

Myusername wrote #328417:

The misbehave is interesting, and there is even a demo working with prismjs here

Nice, thank you! With XML autocomplete/indent feature it would be really handy in Forms and Pages. To investigate.

Myusername · 2021-01-31 08:16:45

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.

etc · 2021-01-31 10:00:15

Myusername wrote #328434:

I did some tests and here is a demonstration.

Nice work! What do you mean by ‘allows even pre-existing HTML’?

Myusername · 2021-01-31 17:11:58

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.

Textpattern CMS

Textpattern CMS support forum

#25 2021-01-15 19:59:38

Re: wysiwyg editor

#26 2021-01-15 21:10:07

Re: wysiwyg editor

Myusername wrote #328181:

#27 2021-01-16 09:31:35

Re: wysiwyg editor

etc wrote #328182:

#28 2021-01-16 11:43:30

Re: wysiwyg editor

#29 2021-01-16 12:41:19

Re: wysiwyg editor

etc wrote #328185:

#30 2021-01-16 13:56:41

Re: wysiwyg editor

Myusername wrote #328187:

#31 2021-01-16 20:29:28

Re: wysiwyg editor

#32 2021-01-30 10:49:26

Re: wysiwyg editor

#33 2021-01-30 12:37:13

Re: wysiwyg editor

Myusername wrote #328417:

#34 2021-01-31 08:16:45

Re: wysiwyg editor

#35 2021-01-31 10:00:15

Re: wysiwyg editor

Myusername wrote #328434:

#36 2021-01-31 17:11:58

Re: wysiwyg editor

Board footer