Add text style

[marc]

Hi All,

How can I style text in a field? (make it bold, change font size etc)?

[admin]

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

[marc]

Is it also possible to format different text elements? Bold the first word, the second underline etc.

[admin]

marc,

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

Steven

[toms]

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

[marc]

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]

Any help is appreciated

[toms]

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.

[admin]

.

[toms]

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;
}