Comments (5)
If you are using ngx-quill, then you need to get a reference to the quill object. The following is the entire code for running DynamicQuillTools with ngx-quill.
Download and either serve DynamicQuillTools.js as an asset(include script in index.html) or
in you angular.json, provide DynamicQuillTools as a build dependency.
"architect": {
"build": {
...,
"options": {
"scripts": [
...,
"PATH_TO_FILE/DynamicQuillTools.js"
]
}
}
}
Declare object in your component to avoid build errors
declare const QuillToolbarDropDown
Get reference of QuillEditorComponent from the dom
<quill-editor #quill (onEditorCreated)="onCreated()"></quill-editor>
@ViewChild('quill') quill: QuillEditorComponent
Attach your custom dropdown when the editor is created.
public onCreated() {
const dropDownItems = {
'Mike Smith': '[email protected]',
'Jonathan Dyke': '[email protected]',
'Max Anderson': '[email protected]'
}
const myDropDown = new QuillToolbarDropDown({
label: 'Variables',
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = (label, value, quill) => {
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length)
quill.insertText(index, value)
quill.setSelection(index + value.length)
}
myDropDown.attach(this.quill.quillEditor)
}
Also, as a side note, if you are using reactive forms the form will not be updated with the new value when any item from the dropdown is selected. To work around that you have to set the value of the form yourself on the onContentChanged event(on the quill-editor component).
public onChanged(data) {
const editor = this.form.get('editor')
if (data.html != editor.value) {
editor.setValue(data.html)
}
}
from dynamicquilltools.
Thanks for your short guide, it pointed me in the right direction. Here are a couple of minor improvements which works with killercodemonkey/ngx-quill
First of, you can pass the editor in the onEditorCreated event like this:
<quill-editor #quill (onEditorCreated)="onCreated($event)"></quill-editor>
You can then access the editor inside the scope of the method by passing it like so:
(This is especially useful if you have multiple instances of the editor)
public onCreated(editor:Quill) {
const dropDownItems = {
'Mike Smith': '[email protected]',
'Jonathan Dyke': '[email protected]',
'Max Anderson': '[email protected]'
}
const myDropDown = new QuillToolbarDropDown({
label: 'Variables',
rememberSelection: false
})
myDropDown.setItems(dropDownItems)
myDropDown.onSelect = (label, value, quill) => {
const { index, length } = quill.selection.savedRange
quill.deleteText(index, length,'user') //If you set the source to user, then it will work fine with reactive forms without the additional onChanged method
quill.insertText(index, value,'user') //Same as above
quill.setSelection(index + value.length)
}
myDropDown.attach(editor) //You just pass the editor here, no need for viewChild anymore
}
from dynamicquilltools.
Please elaborate. I don't know what you mean.
from dynamicquilltools.
i want to implement your DynamicQuillTools to bellow code but not able to configure...
<quill-editor id="myEditor" [styles]="{height: '500px'}" [theme]="'snow'" formControlName="letterformat" [(ngMode
l)]='FormatValue'>
or how to get/set html contents to quill object like quill-editor
from dynamicquilltools.
<div id='myEditor'></div>
`this.quill = new Quill('#myEditor', {
theme: 'snow',
height: 500,
modules: {
toolbar: {
container:
[
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ '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] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
]
}
}
});
const dropDownItems = {
'Mike Smith': '[email protected]',
'Jonathan Dyke': '[email protected]',
'Max Anderson': '[email protected]'
};
this.myDropDown = new QuillToolbarDropDown({
label: "Email Addresses",
rememberSelection: false
});
this.myDropDown.setItems(dropDownItems);
this.myDropDown.onSelect = function(label, value, quill) {
// Do whatever you want with the new dropdown selection here
// For example, insert the value of the dropdown selection:
const { index, length } = quill.selection.savedRange;
quill.deleteText(index, length);
quill.insertText(index, value);
quill.setSelection(index + value.length);
};
this.myDropDown.attach(this.quill);
// Add a custom Button to the Quill Editor's toolbar:
const myButton = new QuillToolbarButton({
icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>`
});
myButton.onClick = function(quill) {
// Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.
// For example, get the selected text and convert it to uppercase:
const { index, length } = quill.selection.savedRange;
const selectedText = quill.getText(index, length);
const newText = selectedText.toUpperCase();
quill.deleteText(index, length);
quill.insertText(index, newText);
quill.setSelection(index, newText.length);
};
myButton.attach(this.quill);`
above code is working fine but not able to get/set html contents from/to editor
from dynamicquilltools.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dynamicquilltools.