Add text style

[kev1n]

Trumbowyg works just fine here. If you tell us where you are stuck we might be able to help you.

Another possibility: Use contenteditable:

https://www.quackit.com/html/codes/contenteditable.cfm

[Janusz]

I placed in the header section at the very bottom just before the final <script> line
.....

Code: Select all

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

>> When I try to make first tests:

when I add for existing text in JS on the form

Code: Select all

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

than I can see text in wyswig editor and make formatting (but can not save later)

when create new field and add

Code: Select all

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

than again I can open new blank field with wyswig editor.

but if I will do for example

Code: Select all

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

the editor is not appearing at all

but if I will do following I am able to copy text to the new field and make formatting on the screen (with no possibility to save)

Code: Select all

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

So currently I am stacked with transporting the text into the trumbowyg editor

Code: Select all

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

[nac]

Janusz,

Here is my implementation which is essentially the same as that I put in my post last year (Wed Jun 06, 2018 11:25 pm). It works fine and I have not heard of any problems with it. The key point is this approach does not try to convert a nuBuilder textarea object into a Trumbowyg editor object. When the form is loaded the contents of the textarea objects are copied to the separate trumbowyg objects and just before saving, the reverse occurs. There is no doubt this could be improved but it has worked well for what I needed.

1. This is the content in the setup>header (just above the final '<script>'). I have placed the trumbowyg files in a folder called 'custlibs'. You can also see that I have used a number of the plugins

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>

2. For each textarea object there needs to be a corresponding HTML object that can be converted to a trumbowyg editor. When the form is loaded with data, the HTML content from the textarea object is copied to the corresponding trumbowyg object. This is why the naming and class is important. The easiest way to do this is to create the textarea with the properties you want and then clone it. Change the Type from 'Textarea' to 'HTML' and give it a new ID (any unique ID is fine). Then go to the HTML properties of the object and enter the HTML code for the div. The code I use relies on the naming and so this is important. In this example, the textarea object that stores the rich text content is called 'defterms' and so the ID in the div must be 'tre-defterms'. Take the name of the textarea and add the 'tre-' prefix. The class must always be 'tre-editor'.

Code: Select all

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

3. This is the code that needs to go in the form's JavaScript section. I have retained all the original names of the textarea fields in my application. There are 8 in all, on different tabs. All you need to do for this to work is put the names of your textarea fields in the treField array. Obviously other changes can be made to modify the features of the editor but this will work with your application as long as the HTML objects have the correct IDs. My nuBeforeSave() has other code but I removed this to avoid confusion.

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

I hope this helps.
Neil

[Janusz]

Hello Neil,
I appreciate very much your very detailed and clear description.
Cocerning the behavior so I still have the issue that text is not placed inside crated tre-... trumbowyg html area.
Trumbowyg edit area with all buttons works OK, I can type text, button save is changing to red, old windows disappers.
when I save - then the original text is replaced by false description in the table (when checking with phpmyadmin)
so generally I have problem somewhere here - that text is not copied to new trumbowych window.

Code: Select all

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

maybe I have some issue with system configuration or ...
When I check errors I do not see any in nuBuilder or in the browser with F12
Can you please let me know what version of php, browser and platform are you using?

myself I am running Debian Stretch with PHP 7.3

[Janusz]

Looks like similar issue as I have were observed on ver 2.6
https://github.com/Alex-D/Trumbowyg/issues/567
and some users were going back to 2.5.1

now I am looking for ver.2.5.1 to try - but have some difficulties to find it - if you would have please let me know.

[Janusz]

unfortunatelly with 2.5.1 I have similar issue - so If you would have any suggestions what to check more I would appreciate.

[nac]

Hi Janusz,

I am sorry to hear that you are having problems with this. Here is the information you requested (though I suspect it is not a PHP version issue - more likely JavaScript coding.)

Production system
Red Hat 2.6.32-754.3.5.el6.x86_64
PHP Version 5.6.40

Local system - UWAMP on Windows
PHP offers versions 5.6.18, 7.0.3 & 7.2.7 - all of these work OK
I use this for testing new ideas.

Both work fine with Chrome, Firefox and Opera.

The version of Trumbowyg I have been using is 2.11.1 and I have just downloaded and tried v2.14.0 - both are fine.

I am not sure I entirely understand what you are describing. Did you have a go at implementing this with the code I provided or are you using your original approach? Anyway, here is a handful of ideas.

Do these links help you at all?
https://github.com/Alex-D/Trumbowyg/issues/731
https://github.com/Alex-D/Trumbowyg/issues/699

Could it be a timing issue or a clash of names? The html content can only be copied to the Trumbowyg elements when the document is completely loaded.
You could also try some console.log() statements to dump the contents of the elements at different stages to see where you are 'losing' the content.
You could paste the contents of the HTML object and the whole of the code you are using in another post. I will have a look but I am no expert.

Neil

[Janusz]

Hi Neil,
Thanks for your suggestions I will try them and let know what are the results.

Regarding the code implementation so I did just 100% copy of your code - testing on one field.
In my case original ID of the text area field is hot_opis (the same as the column table name to store data)

so I created new html object with ID ref-hot_opis and placed the code inside the HTML option area.

Code: Select all

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

after I changed the var treField = ['hot_opis']; and placed with remaining code in the form properties javascript. The form is placed inside the iframe on one of the main form tab - so I assume that code is properly placed.

[Janusz]

Hi,
I created very simple example with one table and one field - and this is not working with my set-up.
I do not know if it would be possible to test on some let say testing configuration if you have such.

so probably the only thing to change would be the header section with proper paths to trumbowyg
(and just disabled in JS the hide for text area to see the values)

https://drive.google.com/open?id=1BvfUK ... k_oX7BBRQS

[nac]

Janusz,

Can you confirm that there are no errors in nuDebug results?

This is a frustrating one - I am not sure what to suggest but I think one option would be separate the loading and saving and investigate each separately. To test the loading, I suggest that you prepare some rich text and paste it directly into the field using phpMyAdmin. Here is an example of some content you could use.

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>

When you open the nuBuilder form with that record you will be able to see if the contents are loaded and displayed correctly.

Next, saving..

when I save - then the original text is replaced by false description in the table (when checking with phpmyadmin)

Can you check that the nuBeforeSave() function is working as intended? Add some simple debugging statements like this.

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

You should see something like this in the console when you save the record.

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

Try these and let's see where that leads.
Neil