Re: Add text style
Posted: Sun Jun 03, 2018 7:31 am
.
As you may remember, I posted a question about this some time ago (see https://forums.nubuilder.cloud/viewtopic.php?f=19&t=9434). However, because of other work and the fact that my JavaScript skills are not that great, I opted to leave it. However, following your latest contribution in this thread, I decided to have another go. I can see that Steven has put in a full stop above but as the thread is not yet locked, I thought I would post this.
Initially, I tried using your code exactly but found that the editing buttons did not behave properly wrt the tabs - they were always visible. Rather than trying to hide 'trumbowyg' elements as different tabs received focus, I used $(document).ready to convert the divs to the Trumbowyg editor. They now behave properly. Like you, I have retained the orginal textarea elements but they are now hidden. For each one I created an equivalent HTML element exactly as you suggested, using the same name but with a prefix "tre-". This means the names of the textarea elements can be placed in the array 'treField'. The html divs all have the class "tre-editor". The form's JavaScript converts these to Trumbowyg editor and copies the content from the corresponding textarea elements. I also added a listener so that the 'save' button behaves as you would expect.
1. is unchanged.
2. The HTML objects - much the same as your step 2. but with a new class and a naming convention. This is done for each element to be transformed into a Trumbowyg editor. The id is the same as the textarea id but has the 'tre-' prefix. This shows only textareaA - repeat for as many as required.
Code: Select all
<style> li {display: list-item;} </style>
<div id="tre-textareaA" class="tre-editor" style="background:white"></div>Code: Select all
var treField = ['textareaA', 'textareaB', 'textareaC'];
// Convert all the elements with tre-editor class to the trumbowyg editor
// and a listener to run nuHasBeenEdited if changes are made to any of these elements.
$(document).ready(function() { $('.tre-editor').trumbowyg({
semantic: false,
resetCss: true,
removeformatPasted: false,
autogrow: true
}).on('tbwchange', function(){ nuHasBeenEdited(); });
// Load the 'tre' elements with the contents from the textarea originals.
treField.forEach(function(element) {
$("#"+"tre-"+ element).trumbowyg('html', $("#"+element).val());
});
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() {
treField.forEach(function(element) {
$("#"+element).val($("#"+"tre-"+ element).trumbowyg('html')).change();
});
return true;
}And as always, thanks for your insights and contributions.
Neil