

vue-quill-editorのツールバーと入力欄を切り離して、ツールバーと入力欄の間に何か入れたいのですが、ツールバーと入力欄が切り離せません。  
切り離す方法があれば教えていただきたいです。

[code]

    <template>
      <div class="ml-5 mt-5">
        <div id="app">
          <quill-editor
            v-model="content"
            ref="quillEditor"
            :options="editorOption"
          ></quill-editor>
        </div>
    
        <p>{{ content }}</p>
      </div>
    </template>
    
    <script lang="ts">
    import { Component, Vue, Emit, Prop } from 'vue-property-decorator';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    // @ts-ignore
    import { quillEditor } from 'vue-quill-editor';
    // @ts-ignore
    
    @Component({
      components: {
        quillEditor,
      },
    })
    export default class Wysiwyg extends Vue {
      private content = '<h2>I am Example</h2>';
      private editorOption = {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ['clean'],
            ['link', 'image', 'video'],
          ],
        },
      };
    }
    </script>
    <style lang="scss">
    code {
      padding: 2px 3px 1px;
      border: 1px solid var(--saf-0);
      border-radius: 3px;
      background-color: rgba(var(--sk_foreground_min, 29, 28, 29), 0.04);
      color: #e01e5a;
    }
    .ql-container.ql-snow {
      border: none;
    }
    
    .ql-toolbar.ql-snow {
      border: none;
    }
    </style>
    
[/code]


CC BY-SA 4.0
2020-09-15T13:30:48.680
70416
2020-09-16T13:28:33.100
2020-09-16T13:28:33.100
41920
41920
question
javascript vue.js
vue-quill-editorのツールバーと入力欄が切り離せない