Add text style

Questions related to using nuBuilder Forte.

Re: Add text style

Postby admin » Sun Jun 03, 2018 3:01 pm

.
admin
Site Admin
 
Posts: 3012
Joined: Mon Jun 15, 2009 9:53 am

Re: Add text style

Postby nac » Wed Jun 06, 2018 11:25 pm

toms,

As you may remember, I posted a question about this some time ago (see https://forums.nubuilder.com/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
nac
 
Posts: 44
Joined: Wed Dec 13, 2017 7:58 am
Location: Aberdeen, UK

Re: Add text style

Postby toms » Wed Jun 06, 2018 11:45 pm

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)
toms
 

Re: Add text style

Postby nac » Thu Jun 07, 2018 12:15 am

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
nac
 
Posts: 44
Joined: Wed Dec 13, 2017 7:58 am
Location: Aberdeen, UK

Re: Add text style

Postby toms » Thu Jun 07, 2018 2:16 am

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
prop_win.png (16.12 KiB) Viewed 1390 times



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);
toms
 

Re: Add text style

Postby nac » Thu Jun 07, 2018 11:24 pm

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
nac
 
Posts: 44
Joined: Wed Dec 13, 2017 7:58 am
Location: Aberdeen, UK

Re: Add text style

Postby admin » Fri Jun 08, 2018 9:37 am

.
admin
Site Admin
 
Posts: 3012
Joined: Mon Jun 15, 2009 9:53 am

Re: Add text style

Postby marc » Fri Jul 20, 2018 11:23 pm

nac wrote: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.
marc
 
Posts: 72
Joined: Mon May 14, 2018 10:56 pm

Re: Add text style

Postby admin » Mon Jul 23, 2018 6:50 am

.
admin
Site Admin
 
Posts: 3012
Joined: Mon Jun 15, 2009 9:53 am

Re: Add text style

Postby Janusz » Tue Feb 12, 2019 4:31 am

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)
Janusz
 
Posts: 65
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland

PreviousNext

Return to General



cron