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