嗨,我正在尝试添加和呈现当前光标处的HTML。但我无法添加HTML。我尝试了所有方法。但无法获得解决方案。
<quill-editor #quillEditor [(ngModel)]="content" [modules]="modules"> </quill-editor>
<button (click)="addChip()">Add Chip</button>
<div id="toolbar">
<!-- Add buttons as you would before -->
<button class="ql-bold">B</button>
<button class="ql-italic">I</button>
<button class="ql-emoji">I</button>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
</div>
ts
@ViewChild('quillEditor', { static: false }) editor: QuillEditorComponent;
constructor() {
this.modules = {
'emoji-shortname': true,
'emoji-toolbar': true,
toolbar: {
container: '#toolbar',
},
};
}
addChip() {
const cursorPosition = this.editor.quillEditor.getSelection().index;
const delta = this.editor.quillEditor.clipboard.convert(
`<p>Your HTML code here</p>`
);
console.log('delte', delta);
this.editor.quillEditor.updateContents(
{ index: cursorPosition, length: 0 },
delta,
'api'
);
}
我的羽毛笔版本:
"ngx-quill": "^3.4.0",
"quill": "^1.3.7",
"quill-emoji": "^0.2.0",
我什么都试过了,我不知道我做错了什么。如果有人知道任何解决办法或你有stackblitz,请建议。
1条答案
按热度按时间sbdsn5lh1#
您应该将有关光标位置的信息添加到delta中,而不是作为updateContents方法的参数。
安装
npm i quill-delta
变化