feat(quill): add image support

s-blu · Apr 21, 2020 · f85c8d4 · f85c8d4
1 parent bd88f40
commit f85c8d4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/app/components/createNewNote/createNewNote.component.ts b/src/app/components/createNewNote/createNewNote.component.ts
@@ -17,25 +17,23 @@ export class CreateNewNoteComponent implements OnInit, OnChanges {
   quillModules = {
     toolbar: [
       ['bold', 'italic', 'underline', 'strike'],
-      [{ list: 'ordered' }, { list: 'bullet' }],
-      [{ indent: '-1' }, { indent: '+1' }],
+      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+      ['blockquote', 'code-block', 'link', 'image'], // add's image support
+      ['clean'],
     ],
   };
-  
+
   quillStyle = {
     'font-family': 'Roboto, "Helvetica Neue", sans-serif',
-    'font-size': '14px'
+    'font-size': '14px',
   };
 
   private translatedContextNames = {
     paragraph: 'paragraph',
     document: 'document',
   };
 
-  constructor(
-    private translocoService: TranslocoService,
-    private formBuilder: FormBuilder
-  ) {
+  constructor(private translocoService: TranslocoService, private formBuilder: FormBuilder) {
     this.createNewForm = this.formBuilder.group({
       type: 'todo',
       color: '',

diff --git a/src/app/components/quill/quill.component.scss b/src/app/components/quill/quill.component.scss
@@ -23,8 +23,15 @@
   position: absolute;
   top: 5px;
   z-index: 10;
-  width: 636px;
+  width: 660px;
   border: none;
+  padding: 8px 0;
+  margin-left: -12px;
+}
+
+::ng-deep .ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  width: 26px;
 }
 
 ::ng-deep .readonly .ql-toolbar {
@@ -38,5 +45,5 @@
 }
 
 .introduction {
-  color: #333333
+  color: #333333;
 }
diff --git a/src/app/components/quill/quill.component.ts b/src/app/components/quill/quill.component.ts
@@ -24,10 +24,10 @@ export class QuillComponent implements OnInit {
     toolbar: [
       [{ header: [1, 2, 3, 4, 5, 6, false] }],
       ['bold', 'italic', 'underline', 'strike'],
-      ['blockquote', 'code-block'],
-      [{ list: 'ordered' }, { list: 'bullet' }],
-      [{ indent: '-1' }, { indent: '+1' }],
       [{ align: [] }],
+      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+      ['blockquote', 'code-block', 'link', 'image'], // add's image support
+      ['clean'],
     ],
   };
   styles = {