Add text style

Questions related to using nuBuilder Forte.

Add text style

Postby marc » Sun May 20, 2018 5:19 pm

Hi All,

How can I style text in a field? (make it bold, change font size etc)?
marc
 
Posts: 73
Joined: Mon May 14, 2018 10:56 pm

Re: Add text style

Postby admin » Mon May 21, 2018 7:28 am

marc,

You'll need to do something like this in the Javascript section of the Form you are opening.

Code: Select all
$('#cus_name').css('font-weight', 900)



Steven
admin
Site Admin
 
Posts: 3094
Joined: Mon Jun 15, 2009 9:53 am

Re: Add text style

Postby marc » Mon May 21, 2018 4:17 pm

Is it also possible to format different text elements? Bold the first word, the second underline etc.
marc
 
Posts: 73
Joined: Mon May 14, 2018 10:56 pm

Re: Add text style

Postby admin » Mon May 21, 2018 4:22 pm

marc,

I don't know, you'll need to Google CSS.

Steven
admin
Site Admin
 
Posts: 3094
Joined: Mon Jun 15, 2009 9:53 am

Re: Add text style

Postby toms » Mon May 21, 2018 5:23 pm

You can't do this inside a <textarea>, not one that's editable. It sounds like you're after a WYSIWYG editor, most of which use a <iframe> to do this.
E.g. https://alex-d.github.com/Trumbowyg
toms
 

Re: Add text style

Postby marc » Tue May 22, 2018 8:54 pm

I followed the documentation to transform a nuBuilder textarea into a Trumbowyg WYSIWYG editor .
Code: Select all
$('#textarea_editor').trumbowyg();

The editor is shown but saving/loading to the database doesn't work. Do you have any idea how to make this work?
marc
 
Posts: 73
Joined: Mon May 14, 2018 10:56 pm

Re: Add text style

Postby marc » Tue May 29, 2018 9:06 am

Any help is appreciated
marc
 
Posts: 73
Joined: Mon May 14, 2018 10:56 pm

Re: Add text style

Postby toms » Tue May 29, 2018 3:39 pm

In short, I would create an additional div element and initialize the plugin on it. When your form loads, the content of the nuBuilder text area is assigned to the editor and when saving, the content is written back.
I may be able to provide more details a little later.
toms
 

Re: Add text style

Postby admin » Sat Jun 02, 2018 12:22 pm

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

Re: Add text style

Postby toms » Sat Jun 02, 2018 2:09 pm

Ok, here a more detailed instruction to impelement the trumbowyg WYSIWYG Editor in nuBuilder:

1. Import Files (JS, css). Add under Setup -> Header:
(change the path!)

<link href="libs/trumbowyg/ui/trumbowyg.min.css" rel="stylesheet">
<script src="libs/trumbowyg/trumbowyg.js"></script>

2. Create a new object of type html. The div is going to be transformed into a WYSIWYG editor as soon as your form loads (step 3)

Code: Select all
<style>
li {
    display: list-item;
}
</style>

<div id="htmlEditor1" placeholder="The text goes here" style="background:white">></div>


Step 3: Add this code in your form (Custom Code -> JS):


Code: Select all
if (nuFormType() == 'edit') {
    // init the trumbowyg plugin
    $("div[id^='htmlEditor']").trumbowyg({
        btns: [
            ['viewHTML'],
            ['undo', 'redo'],
            ['formatting'],
            ['strong', 'em', 'del'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ['unorderedList', 'orderedList'],
            ['horizontalRule'],
            ['removeformat'],
            ['fullscreen']
        ],
        semantic: false,
        resetCss: true,
        removeformatPasted: false
    });

    // get the html code of the nuBuilder field and assign it to our html editor
    var html = $('#nuBuilderEditor1').val();
    $('#htmlEditor1').trumbowyg('html', html);
}


function nuBeforeSave() {
    // get the html code of the html editor and assign it to our nuBuilder field
    var html = $('#htmlEditor1').trumbowyg('html');
    $('#nuBuilderEditor1').val(html).change();
   return true;
}
toms
 

Next

Return to General



cron