Skip to content

Latest commit

 

History

History

third_party_wysiwyg_trumbowyg

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
sample
sample
 
 
screenshots
screenshots
 
 
README.md
README.md
 
 

README.md

Third party: How to include a WYSIWYG Editor

This article is going to show you how to include the Trumbowyg WYSIWYG editor in nuBuilder.

Trumbowyg.js is a lightweight, customizable, extendable, semantic, cross-browser and jQuery based HTML5 WYSIWYG rich text editor for modern web/mobile applications.

  1. Download Trumbowyg from https://codeload.github.com/Alex-D/Trumbowyg/zip/master

  2. Unzip the archive. and place the contents of the subfolder \dist in a new subdirectory (e.g. "libs\trumbowyg") of your nuBuilder installation (Only files in the dist directory are required)

  1. ☛ Add this code in the Header (❓ Home ► Setup). Click Save and log in again.

Click to view the code! 
</script>

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

<script src="libs/trumbowyg/trumbowyg.min.js"></script>

<script>

If you want to see it in action right away, import the sample into your existing nuBuilder database.

❓ Instructions to import the sample

Otherwise continue with the steps below:

  1. In your form, create a new object of type HTML. Any object ID can be entered.

    ☛ Add this code in the HTML field (HTML tab).

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

<div id="cus_notes_tr" placeholder="Placeholder here..." style="background:white"></div>

The DIV cus_notes_tr is going to be converted into a WYSIWYG editor as soon as your form loads (Step 6)

  1. Create a Textarea object with (e.g.) the ID cus_notes. Set its access to Hidden.

    Also create this column in your table (Type text)

  2. Add this JavaScript to your form's Custom Code field ❓ How to add Custom Code

Click to view the code! 
if (nuFormType() == 'edit') {

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

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

    // Get the html code of the nuBuilder object and assign it to the trumbowyg editor
    var html = $('#cus_notes').val();
    $('#cus_notes_tr').trumbowyg('html', html);
}

function nuBeforeSave() {

    // Get the html code of the trumbowyg editor and assign it to the nuBuilder object
    var html = $('#cus_notes_tr').trumbowyg('html');
    $('#cus_notes').val(html).change();
    return true;

}

Useful links: