Intalled:
"quill": "^1.3.7",
"quill-emoji": "^0.2.0",
"quill-mention": "^3.0.3",
"ngx-quill": "^13.3.1"
Configured Css:
"styles": [
"node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.bubble.css",
"node_modules/quill/dist/quill.snow.css"
],
"scripts": [
"node_modules/quill/dist/quill.js"
]
Imported the Module:
Problem:
I was working on the large form with more than 100 fields. In that, I was using the ngx-quill library to use editor field, everything was working fine but the data was not retained in the correct format. For example, If I used the right align, center align and left align in three lines means it comes in single line. That is not what I have saved before. Please help me out with this scenario. Below is my code,
import { Component, OnInit } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import 'quill-mention';
import 'quill-emoji';
@component({
selector: 'quill-editor',
template: <quill-editor [(ngModel)]="htmlText" placeholder="Enter Text" [modules]="quillConfig" (onSelectionChanged)="onSelectionChanged($event)" (onContentChanged)="onContentChanged($event)" [styles]="{height: '50px'}"></quill-editor>,
styleUrls: ['./custom-fields.css']
})
export class QuillEditorComponent extends FieldType {
htmlText ="<ol><li><strong>Heading </strong></li><li><em>Italic </em></li><li><u>Underlined </u></li></ol><p><br></p><ul><li><span style=\"color: rgb(230, 0, 0);\">Colour </span></li><li><span style=\"background-color: rgb(0, 138, 0);\">Background-colour </span></li><li><a href=\"Link\" rel=\"noopener noreferrer\" target=\"_blank\">Link</a></li></ul><p><br></p><p class=\"ql-align-right\">Right Align</p><p>Left Align</p><p class=\"ql-align-center\">Justify</p>"
hasFocus = false;
subject: string;
atValues = [
{ id: 1, value: 'Fredrik Sundqvist', link: 'https://google.com' },
{ id: 2, value: 'Patrik Sjölin' }
];
hashValues = [
{ id: 3, value: 'Fredrik Sundqvist 2' },
{ id: 4, value: 'Patrik Sjölin 2' }
]
quillConfig={
//toolbar: '.toolbar',
toolbar: {
container: [
['bold', 'italic', 'underline'], // toggled buttons
[{ 'color': [] }, { 'background': [] }],
['link'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'align': [] }],
// ['code-block'],
// [{ 'header': 1 }, { 'header': 2 }], // custom button values
//[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
//[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
//[{ 'direction': 'rtl' }], // text direction
//[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
//[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
//[{ 'font': [] }],
//[{ 'align': [] }],
//['clean'], // remove formatting button
//['link', 'image', 'video']
],
},
mention: {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["@", "#"],
source: (searchTerm, renderList, mentionChar) => {
let values;
if (mentionChar === "@") {
values = this.atValues;
} else {
values = this.hashValues;
}
if (searchTerm.length === 0) {
renderList(values, searchTerm);
} else {
const matches = [];
for (var i = 0; i < values.length; i++)
if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
renderList(matches, searchTerm);
}
},
},
"emoji-toolbar": true,
"emoji-textarea": false,
"emoji-shortname": true,
keyboard: {
bindings: {
// shiftEnter: {
// key: 13,
// shiftKey: true,
// handler: (range, context) => {
// // Handle shift+enter
// console.log("shift+enter")
// }
// },
enter:{
key:13,
handler: (range, context)=>{
console.log("enter");
return true;
}
}
}
}
}
test=(event)=>{
console.log(event.keyCode);
}
onSelectionChanged = (event) =>{
if(event.oldRange == null){
this.onFocus();
}
if(event.range == null){
this.onBlur();
}
}
onContentChanged = (event) =>{
//console.log(event.html);
}
onFocus = () =>{
console.log("On Focus");
}
onBlur = () =>{
console.log("Blurred");
}
}
![depfu[bot] avatar](https://avatars.githubusercontent.com/in/715?v=4 "depfu[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent