Fixed Plugin "textarea" with "WYSIWYG Editor" deletes <Test> on saving

[Roland]

Hi there,

using an element defined as plugin textarea with the option WYSIWYG Editor:
On saving a record containing text in entity brackets like <Test> is being deleted completely - including the entities. Brackets without text <> or containing a number like <1> are preserved. If I deactivate WYSIWYG Editor the complete text including brackets is being saved.

This is my html test code:

<p>Paragraph with &lt;1&gt;: &lt;Test&gt;</p>
<p>Paragraph with &lt;1&gt; and URL: &lt;https://fabrikar.com/&gt;</p>

In Fabrik 3 text surrounded by <> was preserved and in Joomlas content articles it works to save text containing the entity brackets <>.

Roland

 

[lori19]

Hi!

I would guess that has more to do with the current WYSiWYG editor that you use. For example, my preferred editor, JCE, has a HTML cleanup feature that checks all HTML and even removes some.
Check your editors settings and see if you can customise.

Kindly,
Lorenz

 

[Roland]

Thank you Lorenz, but to guess doesn't help me much and for important reasons TinyMCE has to remain the editor. Like you, I assume that a filter is responsible for the deleting of the brackets and I have to find the reason.

I wrote, that I compared fabrik forms and Joomla articles using the TinyMCE Editor and I found a different behaviour when I save an Joomla article. In the Joomla article my demo text is being saved, but in the Fabrik form, the brackets including text are being deleted.

Next I checked the source code and found that Fabrik and Joomla use the same version of TinyMCE:

<script src="/media/vendor/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script src="/media/vendor/tinymce/tinymce.min.js?f466c1" defer></script>
<script src="/media/plg_editors_tinymce/js/tinymce.min.js?a403ff" type="module"></script>
<script src="/media/plg_editors_tinymce/js/plugins/jxtdbuttons/plugin.min.js?f466c1" type="module"></script>
<script src="/media/plg_editors_tinymce/js/plugins/joomla-highlighter/plugin.min.js?f466c1" type="module"></script>
<script src="/media/plg_editors_tinymce/js/plugins/dragdrop/plugin.min.js?f466c1" type="module"></script>

The further step was to check, how Fabrik forms and Joomla articles vary in the configuration of TinyMCE which is located in a separate section of the script. Most of the properties define the optic and the functions in the toolbars but there are properties to define filtering. Both use the option:

"entity_encoding":"raw",

which is fine. It is explained here:
https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#entity_encoding
It says:

All characters will be stored in non-entity form except these XML default entities: &, <, >, ', and ".

I also tried to configure the options of TinyMCE by myself, but I didn't get another result.
Now I checked the script before the TinyMCE configuration and found a difference between Fabrik forms and Joomla article editing:

<script type="application/json" class="joomla-script-options new">
...
"sanitize":true

The "sanitize":true configuration is the last parameter in the Fabrik form before the configuration of TinyMCE begins. "sanitize":true is not part of the Joomla article form.
Could this filter be the reason and do I have an option to configure it?

 

[troester]

As far as I can see it's stored correctly

but then vanishing on form load...

It's also an issue with a simple field element: storing the "tag" which is then shown in form view but will be gone in list/details view because the browser (at least Chrome) will interpret it as HTML

 

[Roland]

Thank you, but I think in this case it is not the browser because I can see the code in other constellations.
There may be a conversion from entities like &lt; to < in the WYSIWYG-Editor but this behaviour is wanted.
I compared three versions with the same test code:

<p>Paragraph with <>: &lt;&gt;</p>
<p>Paragraph with <1>: &lt;1&gt;</p>
<p>Paragraph with <Test>: &lt;Test&gt;</p>

1. Fabrik form: Field type textarea, WYSIWIG Editor activated
After copying the test code into the editor: The text is shown correctly first.
On saving the brackets and text in line three <Test> are deleted. I checked the database record and found them missing there as well.

2. Fabrik form: Field type textarea, WYSIWIG Editor deactivated:
It is the same record as case 1. The code is preserved, shown and stored correctly.

3. Joomla article with TinyMCE editor:
This demo is another record than case 1 and 2 but it works in any Joomla article and can easily be checked. The test source code is saved and displayed correctly again.
If you check the record in the database you'll find all entities < and > correctly converted to &lt; and &gt;

 

[wezetel]

3. Joomla article with TinyMCE editor:
This demo is another record than case 1 and 2 but it works in any Joomla article and can easily be checked. The test source code is saved and displayed correctly again.

Not really: in the Test-line one Test is missing

 

[Roland]

Not really: in the Test-line one Test is missing

You are right, in the third line the first <Test> is missing.
I copied the source text to the editors source tab (not the WYSIWYG tab). In this case <Test> will be deleted, but &lt;Test&gt; preserved.

Would you be so kind and test the behaviour for a real user situation and compare a Fabrik form and a Joomla article?
A real test would be to copy the plain text

<https://fabrikar.com/forums>

into the WYSIWYG window of an article and then save.
In my case the Fabrik form deletes this text, the Joomla article saves it.

 

[Roland]

Good morning,

I still think it is an error when you have field with activated TinyMCE Editor and type text like
<Test> or <https://fabrikar.com/forums> and it gets deleted on saving.
It should be treated like normal text and the brackets should be converted to &lt; and &gt;
This is the way it worked all the time. Now I have the problem on my platform that existing reviews loose important texts on saving them once again.

 

[troester]

I can see the issue.
But this is already in Fabrik3 - at least with php8.
What is your setup where it's working?

 

[Roland]

My setting is since many years:
I use all textarea fields with deactivated TinyMCE in the Fabrik configuration but use my own TinyMCE configuration. (For me it is necessary to give the users restricted formatting functions in TinyMCE like just italic but no bold formatting.)
For this reason I use the default form bootstrap_tabs. I copied it to use my individual forms and added TinyMCE in the default.php of the form.
I changed the configuration of TinyMCE to check, if the error is here but it seems to have no effect. First I thought the reason is a new behaviour of TinyMCE 6 but as saving standard articles in Joomla can be saved with <Test> as well, I thought the reason must be somewhere else.
The configuration of TinyMCE in default.php looks like this:

<script src="/media/vendor/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script>
        tinymce.init({
        selector: '#joom_bh_beitraege___bh_text',
        content_css: '/components/com_bookrev/tmpl/review/css/editor_aufsaetze.css',
         language: 'de',
        entity_encoding: 'raw',
        relative_urls: true,
        remove_script_host: false,
        document_base_url: '<?php echo Juri::base(); ?>',
        valid_elements: 'br,figure[class],figcaption,i/em,b,u,sup,sub,ul,ol,li,p[class],span[class],img[src|align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|width|height|hspace|vspace|id],'
+'-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary],'
+'-tr[rowspan|width|height|align|valign],tbody,thead,tfoot,'
+'#td[colspan|rowspan|width|height|align|valign]',
        extended_valid_elements: '[id|title|alt|class|width|size|noshade]',
        invalid_elements: 'script,applet,iframe',
        valid_classes: { '*': 'Abstract Fussnote Kapitelueberschrift Kapitelabschnitt Literaturverzeichnis Text_ohne_Einzug Haupttext_R1 Widmung Zitat Zitat_zentriert',
    'span': 'GreekText',
    'figure': 'image' },
      style_formats: [ { title: 'Absatz', block: 'p' } ],
    plugins: 'charmap code fullscreen image importcss lists moxiemanager nonbreaking preview searchreplace table visualchars wordcount',
        toolbar1: 'styles removeformat | nonbreaking charmap italic subscript superscript | bullist numlist | image table | cut copy paste searchreplace undo redo | preview print | fullscreen visualchars code | wordcount',
        importcss_append: true,
        image_caption: true,
      moxiemanager_rootpath : '/produktion/bilder',
        resize: 'both',
        height: '400',
        menubar: false,
      statusbar: true,
      elementpath: true,
        deprecation_warnings: false,
        branding: false
      });
</script>

If you want to see it, I can open my development website for testing purpose.

 

[wezetel]

I have found in an old forum post (9 years old) and so I'm not sure, if this helps with current TinyMCE:

[SOLVED]TinyMCE removes HTML tags

Hi, prestashop community. I've been trying to edit the HTML code using prestashop's integrated TinyMCE Editor, but it keeps removing my html tags oce I click on the ok button. I've already tried to solve this by modyfing validate.php isCleanHtml() function, but it keeps doing it again and again :...

www.prestashop.com

 

[troester]

It should not be HTML at all but keeping &lt; etc. as in the DB (and as in the J! article).
At some point it's converted back to < but I can't see where.
And then the editor is additionally doing some "sophisticated" HTML cleanup (e.g. adding the closing "tag" </test>)
Totally strange that e.g. <1test> (which is no valid tag) is kept as it should as &lt;1test&gt;.

 

[troester]

Try
plugins\fabrik_element\textarea\textarea.php
add
$value = htmlspecialchars($value, ENT_COMPAT, 'UTF-8');
around line 380 (before $layoutData->editor = $editor->display(... )

 

[Roland]

Try
plugins\fabrik_element\textarea\textarea.php
add
$value = htmlspecialchars($value, ENT_COMPAT, 'UTF-8');
around line 380 (before $layoutData->editor = $editor->display(... )

Thank you, it works.
I placed the code before "if ($wysiwyg)" because I use the textarea element without the Fabrik WYSIWIG option. Instead I add an individual TinyMCE configuration.
I tested all three versions:

• The default Fabrik form bootstrab_tabs with and without WYSIWIG option.
• My own form with an individual TinyMCE configuration and without WYSIWIG option in the fabrik element configuration.

Code starting at line 375 with the new code:

$value = htmlspecialchars($value, ENT_COMPAT, 'UTF-8');
        if ($wysiwyg)
        {
            $editor = Editor::getInstance($this->config->get('editor'));
            $buttons = (bool) $params->get('wysiwyg_extra_buttons', true);
            $layoutData->editor = $editor->display($name, $value, '100%', 100+$rows * 15, $cols, $rows, $buttons, $id, 'com_fabrik');
            $layout = $this->getLayout('wysiwyg');
        }

You wrote that the error is in Fabrik 3 already which I can't confirm at least for my system: I still use Fabrik 3 with Joomla 3.10.12 in one of my websites because migration to Joomla 5 and Fabrik 4 is not completed yet. Saving of codes like <Test> work there, I just rechecked it.