Page 1 of 1
quill editor - richtext - new in 4.5+
Posted: Fri Jan 22, 2021 12:49 pm
by apmuthu
Using the latest version of 4.5 from the
git master, play around with the new richtext editor for
TextArea and
HTML fields.
The JS for the form can be initialised with:
Code: Select all
function nuBeforeSave() {
if (nuFORM.edited === true) {
var container = document.querySelector('#qui_editor_container');
var containerHtml = container.children[0].innerHTML;
$('#qui_editor').val(containerHtml).change();
}
return true;
}
if (nuFormType() == 'edit') {
nuQuill('qui_editor');
}
Other parameters are either available or in the pipeline.
Once fully incorporated this initialisation wouldn't be necessary anymore.
Re: quill editor - richtext - new in 4.5+
Posted: Sat Jan 23, 2021 1:53 am
by kev1n
Screenshot:
Re: quill editor - richtext - new in 4.5+
Posted: Sat Jan 23, 2021 4:37 am
by apmuthu
nucommon.js fixed in
v4.5 repo Commit 297
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 5:59 am
by miasoft
How can I insert in Editor my generated text?
For example, I can write:
Code: Select all
quill.setContents([
{ insert: 'Hello', { bold: true } },
{ insert: '\n', { align: 'center' } },
{ insert: { formula: 'x^2' } },
{ insert: '\n', { align: 'center' } },
{ insert: 'World', { italic: true }},
{ insert: '\n', { align: 'center' } }
]);
and how embedd this text in editor and show one in Editor form?
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 7:06 am
by kev1n
Use nuQuillSetContents(). It overwrites the quill editor with given contents. Contents should end with a newline.
Code: Select all
function nuQuillGetInstance(i) {
var container = document.querySelector('#'+ i + '_container');
var quill = new Quill(container);
if (Quill.find(container) === quill) {
return quill;
} else {
return null;
}
}
function nuQuillSetContents(i, contents) {
var quill = nuQuillGetInstance(i);
if (quill !== null) {
if ($.isArray(contents)) {
quill.setContents(contents);
} else {
quill.clipboard.dangerouslyPasteHTML(contents);
}
}
}
: Pass an array:
(Replace not_content with the ID of your Textarea)
Code: Select all
var contents =
[
{ insert: 'Hello', attributes: { bold: true } },
{ insert: '\n', attributes: { align: 'center' } },
{ insert: 'nuBuilder', attributes: { italic: true }},
{ insert: '\n', attributes: { align: 'center' } }
]
nuQuillSetContents('not_content', contents);
: Pass some HTML:
Code: Select all
nuQuillSetContents('not_content', '<b>Hello<b><br><i>nuBuilder</i><br>');
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 9:06 am
by kev1n
Function to get the HTML:
Code: Select all
function nuQuillGetContents(i) {
var container = document.querySelector('#'+ i + '_container');
return container.children[0].innerHTML;
}
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 11:04 am
by miasoft
I try to understand...
Code: Select all
function nuBeforeSave() {
if (nuFORM.edited === true) {
var container = document.querySelector('#qui_editor_container');
var containerHtml = container.children[0].innerHTML;
$('#qui_editor').val(containerHtml).change(); // works !
// $('#qui_editor').val('<b>Hello<b><br><i>nuBuilder</i><br>').change(); //works
// nuQuillSetContents('qui_editor', '<b>Hello<b><br><i>nuBuilderForte</i><br>'); //don't works
}
}
don't works too
Code: Select all
var contents =[
{ insert: 'Hello', attributes: { bold: true}},
{ insert: '\n', attributes: { align: 'center' } },
{ insert: 'nuBuilder4.5', attributes: { italic: true }},
{ insert: '\n', attributes: { align: 'center' } }
]
nuQuillSetContents('qui_editor', contents);
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 11:49 am
by kev1n
Did you declare nuQuillSetContents() ? It is not yet included in nuBuilder's core files.
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 12:41 pm
by miasoft
kev1n wrote:Did you declare nuQuillSetContents() ? It is not yet included in nuBuilder's core files.
Thx! Now I added this functions in Procedure CustomCode.
When I click on the button Save, this text appears in the field, and then disappears and is not written to the database.
Re: quill editor - richtext - new in 4.5+
Posted: Mon Jan 25, 2021 7:46 pm
by miasoft
In the end, I did this:
Code: Select all
function nuBeforeSave() {
if (nuFORM.edited === true) {
var str1=$('#I').val();
var str2=$('#O').val();
var Fio= $('#F').val()+' '+str1.substring(0,1)+'.'+str2.substring(0,1)+'.';
var nn='<h3 style="text-align: center";> <span style ="color: rgb(102,186,102);">Обращение № '+$('#ID').val()+'</span></h3>'
+'<br><b>Город </b> '+$('#CITY').val()+'</br>'
+'<br><b>ФИО: </b> <br>'+$('#F').val()+' '+str1+' '+str2+'</br>'
+'<b>Вид: </b> <br>'+$('#VID').val()+'</br>'
+'<b>Район: </b> <br>'+$('#RAION').val()+'</br>'
+'<b>Улица: </b>'+$('#STREET').val()+' '
+'<b>Дом: </b> '+$('#DOM').val()+' '
+'<b>Кв.: </b> '+$('#KV').val()+'</br>'
+'<b><br>Тел.: </b>'+$('#PHONE').val()+'</br>'
+'<b><br>Анализ: </b> '+$('#NUMANALIZ').val()+'</br>'
+'<b><br>Результат: </b> '+$('#TEMA').val()+'</br>';
//var container = document.querySelector('#qui_editor_container');
//var containerHtml = container.children[0].innerHTML;
$('#qui_editor').val(nn).change();
}
return true;
}
Rezult:
25.01_1.png
Thanks All!