nuBuilder Forum

Code: Select all

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

Code: Select all

$('#hot_opis').trumbowyg();

Code: Select all

$('#my-editot").trumbowyg();

Code: Select all

var html = $('#hot_opis').val();
$('#my-editor').trumbowyg('html',html);

Code: Select all

var html = $('#hot_opis').val();
$('#my-editor').val(html);
$('#my-editor').trumbowyg();

Code: Select all

var html = $('#hot_opis').val();
$('#my-editor').trumbowyg('html',html);

Code: Select all

<link href="custlibs/trumbowyg/ui/trumbowyg.css" rel="stylesheet">
<link href="custlibs/trumbowyg/plugins/table/ui/trumbowyg.table.min.css" rel="stylesheet">
<script type="text/javascript" src="custlibs/trumbowyg/trumbowyg.min.js"></script>
<script type="text/javascript" src="custlibs/trumbowyg/plugins/table/trumbowyg.table.min.js"></script>
<script type="text/javascript" src="custlibs/trumbowyg/plugins/cleanpaste/trumbowyg.cleanpaste.min.js"></script>
<script type="text/javascript" src="custlibs/trumbowyg/plugins/fontfamily/trumbowyg.fontfamily.min.js"></script>
<script type="text/javascript" src="custlibs/trumbowyg/plugins/fontsize/trumbowyg.fontsize.min.js"></script>
<script type="text/javascript" src="custlibs/trumbowyg/plugins/pasteimage/trumbowyg.pasteimage.min.js"></script>
<script>

Code: Select all

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

Code: Select all

var treField = ['defterms','disaggtype','calcmethod','qualitycontrol','datasources','datacollectionmethod','resultindicated','notes'];

// Convert all the elements with tre-editor class to the trumbowyg editor.
// Add a listener to run nuHasBeenEdited to monitor if any changes are made to these elements.
$(document).ready(function() { $('.tre-editor').trumbowyg({
        btns: [
        ['viewHTML'],
        ['undo', 'redo'],
        ['formatting'],
        ['fontfamily'],   
        ['fontsize'],  
        ['strong', 'em', 'del'],
        ['superscript', 'subscript'],
        ['link'],
        ['insertImage'],
        ['pasteImage'],
        ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
        ['unorderedList', 'orderedList'],
        ['horizontalRule'],
        ['table'], 
        ['removeformat'],
        ['fullscreen']
      ],
        plugins: {
        table: {
            rows : 12,
            columns : 6
          }
        },
        semantic: false,
        resetCss: true,
        removeformatPasted: true,
        autogrow: true
    }).on('tbwchange', function(){ nuHasBeenEdited(); });   
// Load the 'tre' elements with the contents from the textarea originals.    
  treField.forEach(function(element) {
    if ($("#"+element).val() !== undefined) {
        $("#"+"tre-"+ element).trumbowyg('html', $("#"+element).val());
    }
    nuHide(element);  // hide the textarea object
   });   
  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() {
var hcont;
treField.forEach(function(element) {
    hcont = $("#"+"tre-"+ element).trumbowyg('html'); 
    $("#"+element).val(hcont).change();  
  });   
return true;
}

Code: Select all

 $("#"+"tre-"+ element).trumbowyg('html', $("#"+element).val());

Code: Select all

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

Code: Select all

<h1>This is a header</h1><h2><ul><li><strong>This is bold.</strong></li><li><em>This is italics.</em></li><li><em><strong>This is bold italics.</strong></em></li></ul><p>H<sub>2</sub>O</p><p>E=mc<sup>2</sup></p></h2>

Code: Select all

function nuBeforeSave() {
var hcont;
treField.forEach(function(element) {
    hcont = $("#"+"tre-"+ element).trumbowyg('html'); 
    $("#"+element).val(hcont).change(); 
    var ocont = $("#"+element).val();
    console.log( ((hcont == ocont) ? 'SAME' : 'DIFFERENT'),"tre-"+ element,' length =',hcont.length, element,' length =', ocont.length);
  });   
return true;
}

Code: Select all

SAME tre-defterms  length = 1413 defterms  length = 1413
SAME tre-calcmethod  length = 3831 calcmethod  length = 3831
SAME tre-qualitycontrol  length = 398 qualitycontrol  length = 398
SAME tre-datasources  length = 494 datasources  length = 494
SAME tre-datacollectionmethod  length = 9052 datacollectionmethod  length = 9052