Page 1 of 5
Add text style
Posted: Sun May 20, 2018 9:49 am
by marc
Hi All,
How can I style text in a field? (make it bold, change font size etc)?
Re: Add text style
Posted: Sun May 20, 2018 11:58 pm
by 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
Re: Add text style
Posted: Mon May 21, 2018 8:47 am
by marc
Is it also possible to format different text elements? Bold the first word, the second underline etc.
Re: Add text style
Posted: Mon May 21, 2018 8:52 am
by admin
marc,
I don't know, you'll need to Google CSS.
Steven
Re: Add text style
Posted: Mon May 21, 2018 9:53 am
by 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
Re: Add text style
Posted: Tue May 22, 2018 1:24 pm
by 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?
Re: Add text style
Posted: Tue May 29, 2018 1:36 am
by marc
Any help is appreciated
Re: Add text style
Posted: Tue May 29, 2018 8:09 am
by 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.
Re: Add text style
Posted: Sat Jun 02, 2018 4:52 am
by admin
.
Re: Add text style
Posted: Sat Jun 02, 2018 6:39 am
by 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;
}