laravel10とvue3を使って管理画面を作る時に、リッチなWYSIWYGエディターを使いたい時が多々あります。quillというライブラリがおすすめされるのですが、vue3でのサンプルソースがあまりないので示しておこうと思います。
目次
インストール
npmでインストールします。
npm install @vueup/vue-quill
ソースコード
QuillEditor.vue
<template>
<div>
<QuillEditor ref="editor" class="editor" theme="snow" toolbar="full" v-model="content" contentType="html" @update:content="updateContent" />
</div>
</template>
<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import { ref, watch, onMounted } from 'vue';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import '@vueup/vue-quill/dist/vue-quill.bubble.css';
const props = defineProps({
content: {
type: String,
default: ''
}
});
const emit = defineEmits(['update:modelValue']);
let content = ref(props.content);
let editor = ref(null);
watch(content, (newVal) => {
emit('update:modelValue', newVal);
}, { immediate: true });
const updateContent = (newContent) => {
var newText = newContent;
content.value = newText;
emit('update:modelValue', newText);
};
onMounted(() => {
editor.value.setHTML(content.value)
});
</script>
NotiForm.vue
<template>
<form @submit.prevent="$emit('submit', $event)" class="space-y-4">
<div>
<label class="block">タイトル:</label>
<input v-model="form.title" type="text" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" required>
</div>
<div>
<label class="block">内容:</label>
<RichTextEditor :content="form.content" @update:modelValue="updateContent" />
</div>
<slot name="buttons"></slot>
</form>
</template>
<script setup>
import RichTextEditor from '@/Components/QuillEditor.vue';
const props = defineProps({
form: Object,
errors: Object
});
if (props.form.content === null) {
props.form.content = "";
}
const updateContent = (newContent) => {
props.form.content = newContent;
}
</script>
お知らせ作成画面をNotiForm.vueで作り、その中でQuillエディターであるQuillEditor.vueを呼び出しています。
Quill側の@update:contentでエディターの値が更新された場合に通知がきます。その値をNotiForm.vueに送ってから使用します。
既存の値をセットするにはonMountedでQuillのeditorに直接setHTMLでhtmlをセットします。
https://vueup.github.io/vue-quill/api/
PropsやEventsの詳細は上記を参照して下さい。
コメント