<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue3 Rich Text Editor Example</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<div id="app">
<quill-editor v-model="content"></quill-editor>
<button @click="submitContent">Submit</button>
<div v-html="cleanContent"></div>
</div>
<script>
const Quill = window.Quill;
// Define a new Vue application
const app = Vue.createApp({
data() {
return {
content: '',
cleanContent: ''
};
},
mounted() {
const quill = new Quill('#app .quill-editor', {
theme: 'snow'
});
// Listen for editor changes and update the v-model
quill.on('text-change', (delta, oldDelta, source) => {
this.content = quill.root.innerHTML;
});
},
methods: {
submitContent() {
// Sanitize the HTML content to prevent XSS attacks
this.cleanContent = $(this.content).text();
}
},
// Define a new component
components: {
'quill-editor': {
data() {
return {
editor: null
};
},
template: `<div ref="quillEditor"></div>`,
mounted() {
this.editor = new Quill(this.$refs.quillEditor, {
theme: 'snow'
});
},
评论已关闭