请按照以下步骤操作,它应该可以工作:
1-安装:
npm install ngx-quill
npm install @angular/core
npm install @angular/common
npm install @angular/forms
npm install @angular/platform-browser
npm install quill
npm install rxjs — peer dependencies of rxjs-quill
- 在你的index.html中包含主题样式:bubble.css、quilljs的snow.css,或者将它们添加到你的css/scss文件中
@import
语句,或者在构建过程中添加它们的外部样式。
使用以下代码更新 angular.json 文件:
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
“src/styles.css”,
“./node_modules/quill/dist/quill.core.css”,
“./node_modules/quill/dist/quill.snow.css”
],
“scripts”: [“./node_modules/quill/dist/quill.js”]
将其导入您的 app.module.ts
import { QuillModule } from 'ngx-quill'
并在导入中添加如下所示
@NgModule({
declarations:[],
imports:[
CommonModule,
QuillModule.forRoot(),
]
})
在您的 component.ts 文件中,您可以修改编辑器样式,如以下代码:
editorStyle = {
height: '200px'
};
在你的 component.html 文件中你可以像下面的代码一样调用它:
<div id="quill">
<p>Content *</p>
<quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
formControlName="yourCtrlname" required>
</quill-editor>
</div>
您还可以检查:https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/ https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/
和这里:https://www.npmjs.com/package/ng-quill https://www.npmjs.com/package/ng-quill