quill editor - richtext - new in 4.5+

[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.

[kev1n]

Screenshot:

[apmuthu]

nucommon.js fixed in v4.5 repo Commit 297

[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?

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

}

Example 1: 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);

Example 2: Pass some HTML:

Code: Select all

nuQuillSetContents('not_content', '<b>Hello<b><br><i>nuBuilder</i><br>');

[kev1n]

Function to get the HTML:

Code: Select all

function nuQuillGetContents(i) {
  
    var container = document.querySelector('#'+ i + '_container');
    return container.children[0].innerHTML;

}

[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);

[kev1n]

Did you declare nuQuillSetContents() ? It is not yet included in nuBuilder's core files.

[miasoft]

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.

[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!