Add text style

[admin]

.

[nac]

toms,

As you may remember, I posted a question about this some time ago (see https://forums.nubuilder.cloud/viewtopic.php?f=19&t=9434). However, because of other work and the fact that my JavaScript skills are not that great, I opted to leave it. However, following your latest contribution in this thread, I decided to have another go. I can see that Steven has put in a full stop above but as the thread is not yet locked, I thought I would post this.

Initially, I tried using your code exactly but found that the editing buttons did not behave properly wrt the tabs - they were always visible. Rather than trying to hide 'trumbowyg' elements as different tabs received focus, I used $(document).ready to convert the divs to the Trumbowyg editor. They now behave properly. Like you, I have retained the orginal textarea elements but they are now hidden. For each one I created an equivalent HTML element exactly as you suggested, using the same name but with a prefix "tre-". This means the names of the textarea elements can be placed in the array 'treField'. The html divs all have the class "tre-editor". The form's JavaScript converts these to Trumbowyg editor and copies the content from the corresponding textarea elements. I also added a listener so that the 'save' button behaves as you would expect.

1. is unchanged.

2. The HTML objects - much the same as your step 2. but with a new class and a naming convention. This is done for each element to be transformed into a Trumbowyg editor. The id is the same as the textarea id but has the 'tre-' prefix. This shows only textareaA - repeat for as many as required.

Code: Select all

<style> li {display: list-item;} </style>
<div id="tre-textareaA" class="tre-editor" style="background:white"></div>

3. In the form's custom code

Code: Select all

var treField = ['textareaA', 'textareaB', 'textareaC'];

// Convert all the elements with tre-editor class to the trumbowyg editor 
// and a listener to run nuHasBeenEdited if changes are made to any of these elements.
$(document).ready(function() { $('.tre-editor').trumbowyg({
        semantic: false,
        resetCss: true,
        removeformatPasted: false,
        autogrow: true
    }).on('tbwchange', function(){ nuHasBeenEdited(); });   
// Load the 'tre' elements with the contents from the textarea originals.    
  treField.forEach(function(element) {
    $("#"+"tre-"+ element).trumbowyg('html', $("#"+element).val());       
   });   
  nuHasNotBeenEdited();  // Set the form back to  'not been edited' status.
 });
 
// copy the contents of the 'tre' elements back to the textarea originals before saving the form 
function nuBeforeSave() {
 treField.forEach(function(element) {
    $("#"+element).val($("#"+"tre-"+ element).trumbowyg('html')).change();
 });   
 return true;
}

As far as I can tell it all works fine (so far) but I am sure it would benefit from your expert eye. I may be missing something.
And as always, thanks for your insights and contributions.

Neil

[toms]

Neil,

I think your implementation is just perfect. I probably wouldn't have done it any differently! Thanks for your contribution!

BTW, I'm not at all a javascript/PHP expert - I've only been programming for about eight months now. (But I have been using other languages for a long time)

[nac]

Thanks toms,
I will go ahead and use this approach - and let you know if I encounter problems!
You certainly come across as quite an expert on this forum; you are clearly a fast learner if you have only been using JS & PHP for eight months.
Neil

[toms]

Maybe a little improvement: When you open an iframe (eg. the Properties Form), the trumbowyg toolbar remains visible. It's nothing serious, just a cosmetic glitch...

prop_win.png

You can fix that by adding this line:

Code: Select all

$('.trumbowyg-box ').css('z-index', '-1');

after:

Code: Select all

$('#htmlEditor1').trumbowyg('html', html);

[nac]

Well noted toms.
I will keep this in mind.

And for marc (thread starter).. Have you had a chance to try these ideas? I now have eight rich text elements on different tabs and all seems to work very well.
I did make a small change to the code. Rather than opening each textarea object and setting it to 'hidden', I left them unchanged and just used nuHide() in the loop to hide them. It is just one extra line.

Code: Select all

  treField.forEach(function(element) {
    $("#"+"tre-"+ element).trumbowyg('html', $("#"+element).val());
    nuHide(element);
   });   

Neil

[admin]

.

[marc]

And for marc (thread starter).. Have you had a chance to try these ideas?
Neil

Neil, everything works perfectly. But since I only use one editor, it makes it a little easier.

[admin]

.

[Janusz]

Hi,
Can you give some feedback/experience if the trumbowyg is (still) working OK with nuBuilder.
Just 2 weeks ago I was trying to install it but with no success and now I planning to try it again.

Or maybe some other solutions how to make some basic text formating inside the Textarea (in fact just to have possibility for bold text only would be fine)