英文:
Remove colors when pasting on ngx quill field
问题
我正在使用ngx-quill编辑器，目前它具有我所需的所有功能。但是，我没有看到如何删除来自剪贴板的文本的背景颜色和字体颜色的选项。我希望保留所有其他格式，除了颜色。这可能吗？
英文:
I am using the ngx-quill editor and so far it has all the features that I need. However, I don't see any options on how to remove the background colors and font colors of the text coming from the clipboard.<br><br> I want to retain all the other formatting except the colors. Is this possible?
答案1
得分: 10
对于有相同问题的人，我成功找到了一个解决方法。
在我的视图中：
<quill-editor (onEditorCreated)='editorInit($event)'></quill-editor>
在我的控制器中：
editorInit(quill: any){
quill.clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta){
delta.forEach(e => {
if(e.attributes){
e.attributes.color = '';
e.attributes.background = '';
}
});
return delta;
});
}
请注意，这是一段Angular代码，用于解决某个问题。如果您需要进一步的解释或帮助，请随时提出。
英文:
For anyone having the same issue with me, I managed to find a workaround for this.
On my view :
<quill-editor (onEditorCreated)='editorInit($event)'></quill-editor>
On my Controller
editorInit(quill: any){
quill.clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta){
delta.forEach(e => {
if(e.attributes){
e.attributes.color = '';
e.attributes.background = '';
}
});
return delta;
});
}
答案2
得分: 1
// 如果您想要删除完整格式，请使用此代码。
onEditorCreated(quill: Quill) {
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
delta.forEach(e => {
if (e && e.attributes) {
delete e.attributes;
}
});
return delta;
});
}
// 如果您想要删除单个格式，请使用此代码。
onEditorCreated(quill: Quill) {
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
delta.forEach(e => {
if (e && e.attributes) {
e.attributes.color = '';
e.attributes.background = '';
e.attributes.fontSize = '1rem';
e.attributes.fontWeight = 'normal';
e.attributes.header = 0;
}
});
return delta;
});
}
英文:
// If you want to remove complete formating use this code.
onEditorCreated(quill : Quill) {
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
delta.forEach(e => {
if (e && e.attributes) {
delete e.attributes;
}
});
return delta;
});
}
// If you want to remove individual formating use this code.
onEditorCreated(quill : Quill) {
quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
delta.forEach(e => {
if (e && e.attributes) {
e.attributes.color = '';
e.attributes.background = '';
e.attributes.fontSize = '1rem';
e.attributes.fontWeight = 'normal';
e.attributes.header = 0;
}
});
return delta;
});
}
答案3
得分: 0
- 如果您不想使用事件侦听器来删除颜色和背景，如@manoyanx的答案中所提到的，您可以使用以下代码：
const myQuillEditorFormats = ["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"];
- 在上述的myQuillEditorFormats数组中，我已经添加了所有默认的quill编辑器选项。您可以具体地删除您不需要的选项。
- 然后在您的NgModule的导入部分：
QuillModule.forRoot({ formats: quillEditorFormats })
来源：https://quilljs.com/docs/formats/
英文:
-
If you don't want to remove color and background using event listeners as mentioned in @manoyanx's answer, you can use
const myQuillEditorFormats = ["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"]; -
In the above myQuillEditorFormats array, I have added all default quill editor options. You can specifically remove the options which you don't want.
-
Then in your NgModule's imports
QuillModule.forRoot({ formats: quillEditorFormats })
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论