Need to change btn options in trumbowyg editor

QuestionsNeed to change btn options in trumbowyg editor
Steve Borruso asked 5 years ago

 

Hi Abu,

I’m trying to supply text editor in a narrow grid column so my client can add some notes.

Gave up on trying to do it in a model.

Decided to use the trumbowyg editor plugin since there was a phpgrid demo example avail.

I need to limit the header button options in the editor since the column is narrow.

Found how to do that on trumbowyg site via jQuery but I need to know what element the editor is “attached to”.

Used Chrome dev tools, looked at phpgrid demo source code, looked in jqgrid_dist.php, looked in trunbowyg demo site source code … etc…. still can’t figure out what to use on the trumbowyg JQuery as a selector to change the editor button options.

The example format from trumbowyg site to change the buttons –

$(‘.simple-editor’).trumbowyg({ btns: [[‘bold’, ‘italic’], [‘link’]] });

Found this in  jqgrid_dist.php at “function link_editor(el)” but can’t figure out what “el’ is –

jQuery(el).trumbowyg({
btns: [
[‘formatting’],
[‘strong’, ’em’, ‘del’],
[‘justifyLeft’, ‘justifyCenter’, ‘justifyRight’, ‘justifyFull’],
[‘unorderedList’, ‘orderedList’],
[‘link’],
[‘insertImage’],
[‘fullscreen’],
],
autogrow: true
})
I’ve tried everything I’ve seen as examples in all of the above mentioned places for the right selector with no luck. Sadly at this point I admit defeat ;-).

Any help is most appreciated.

Thanks !

Steve

 

 

 

12 Answers
Abu Ghufran Staff answered 5 years ago

Code: Using Trumbowyg custom buttons – Related Lines 98,128,158

https://gist.github.com/gridphp/b62f6e8085a5c126287a24042077a749

Output:

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Steve Borruso answered 5 years ago

Thanks Abu,

That worked … I then realized that I can get away with the client editing the notes field in the Edit Record modal file (as opposed to just inline) but there are still some issues.

I’m going to switch to tinyMCS (followed your demo code)  if I can get these issues solved.

Here’s what I’m seeing  –

The tinyMCE editor DOES show up with inline editing but does NOT appear in the Edit record modal (even if I manually  stretch the modal)

None of the text formatting is preserved (bold/Italic, etc.) are not preserved when saved or re-edited (or in the DB).

When multiple lines (or paragraphs) are edited so the note text is “long” I’l like the inline control to collapse to the normal grid row size when the edit is is saved (so only the first line is displayed after the editor closes.

These issues seem to happen with both editors except that with Trumbo the editor shows up in the modal.

Any further guidance is most appreciated.

 

Thanks !!

Steve

Abu Ghufran Staff answered 5 years ago

If you want to use tinymce, we have it’s demo placed in demos/integration/tinymce.php

It works inline / modal and load formatting as well.

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
steven M borruso answered 5 years ago

Yes .. I implemented both following the demo code … I’ll look one more time again to see if I spot the problem then maybe I can send you my code to see if you can spit the problem … Thanks

 

Steve Borruso answered 5 years ago

Still having issues with tinymce. The control shows up with inline editing, I can add formatted text (Bold, Italic, Emoji, etc.) and save that row … the formatting is still active for the column after saving but if I reload the grid with either the reload grid button or reload the whole page all formatting goes away.

Aslo still can’t get the tinymce control to show up in the Edit Record modal (all other column inputs show up) … I looked for it with Chrome Dev Tools and it’s definitely not in the modal.

Will send a link to my grids page, a couple screen shots and code snippits to you.

Thanks,

Steve

Steve Borruso answered 5 years ago

I can get the tinymce editor to show up in the Add/Edit modals now      but the problem with all formatting being removed after a refresh is still happening.

For the modal issue to work I changed this –

$g->set_columns($cols,true);   to this   $g->set_columns($cols);

 

Still not sure why formatting is removed after a refresh though.

Steve Borruso answered 5 years ago

I have the tinymce control  showing up correctly now with inline Edit, modal Edit, and modal Add … problem is still with formatting not being preserved after a refresh …. just noticed that on the PHPGrid Framework Demo page (tinymce demo) it also does the same thing … formatting can be applied while inline editing and is preserved when saved (formatting shows in the grid column) but once you refresh the grid all formatting goes away …. so seems like maybe a tinymce/PHPGrid Frameworks integration bug at this point (?)

Steven Borruso answered 5 years ago

The browser form POST of formatted tinymce data (when doing a grid Add Record) is being encoded –

id=137&client=4&date=05%2F02%2F2019&caregiver=1&bath=Bed&hair=Indep&oral=Depend&nails=Inspect&shave=Indep&perineal=Assist&bladder=Cont%2C8-4&bowel=Const&mobility=Wkr&sleep=111&mood=222&activities=333&breakfast=10&lunch=25&notes=%3Cimg+title%3D%22smile%22+src%3D%22MY_TINYMCE_FILES%2Fimg%2Fsmile.jpg%22+data-mce-src%3D%22MY_TINYMCE_FILES%2Fimg%2Fsmile.jpg%22%3ENotes%3Cspan+style%3D%22background-color%3A+rgb(0%2C+255%2C+255)%3B%22+data-mce-style%3D%22background-color%3A+%2300ffff%3B%22%3E+Line+1%3C%2Fspan%3E%3Cbr%3E%3Cbr%3ENotes+%3Cspan+style%3D%22color%3A+rgb(255%2C+0%2C+0)%3B%22+data-mce-style%3D%22color%3A+%23ff0000%3B%22%3E%3Cstrong%3Etest%3C%2Fstrong%3E%3C%2Fspan%3E+Line+2%3Cimg+src%3D%22https%3A%2F%2Fcdn.tinymce.com%2F4%2Fplugins%2Femoticons%2Fimg%2Fsmiley-frown.gif%22+alt%3D%22frown%22+data-mce-src%3D%22https%3A%2F%2Fcdn.tinymce.com%2F4%2Fplugins%2Femoticons%2Fimg%2Fsmiley-frown.gif%22%3E&oper=edit

But tracing the SQL UPDATE on the server side shows all formatting has been stripped –

12325 Query UPDATE daily_activities SET `client`=’4′,`date`=’2019-05-02′,`caregiver`=’1′,`bath`=’Bed’,`hair`=’Indep’,`oral`=’Depend’,`nails`=’Inspect’,`shave`=’Indep’,`perineal`=’Assist’,`bladder`=’Cont,8-4′,`bowel`=’Const’,`mobility`=’Wkr’,`sleep`=’111′,`mood`=’222′,`activities`=’333′,`breakfast`=’10’,`lunch`=’25’,`notes`=’Notes Line 1Notes test Line 2′ WHERE `id` IN (‘137’)

This is what the UI looked like when I clicked Submit –

Steve Borruso answered 5 years ago

I can’t seem to add images with this forum editor (maybe it’s a tinyMCE issue 😉 … anyway here’s the image I tried to paste above – https://jmp.sh/5f9pXdB

Steve Borruso answered 5 years ago

SOLVED (I think) … after looking through  jqgrid_dist.php … and the jqgrid documentation I found the grid “sanitize” option … so I added this to my grid definition – $grid[“sanitize”] = false; and now tinyMCE formatting is being preserved across grid reloads.

Are there any ramifications to using this grid option that may break something else I already have coded ?

If not maybe this option can be added to the PHPGrid doc somewhere (if it isn’t already)

Steve Borruso answered 5 years ago

I guess “sanitize” probably defaults to “true” to help avoid malicious activity (SQL injections, etc.) but in my case my grid apps will eventually be on a private locked down server, on a standalone machine, with no internet connection so I should be safe. Setting this option to “false” on a normal web based app on the open internet I guess may be a risk but then again it was the only way I could get tinyMCE formatting to work.

The End  😉

Abu Ghufran Staff answered 5 years ago

Ok, we’ve fixed this bug now. For custom editor (like tinymce) it was assuming the field is non-html after which it was calling strip_tags to make it safe.

If you now set:

$col[“formatter”] = “html” with any column, it will not run strip_tags instead it will run sanitize_xss which will only remove the malicious tags.

Your solution is also fine to disable it altogether if not required.
Update is available, if you wish contact via email.

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Your Answer

13 + 18 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?