Я новичок в VueJS, и я пытаюсь просто получить кусок кода, который я нашел в Интернете, работающем с помощью Quill, завернутым в Vue.
Он отлично работает в Chrome но мне нужно, чтобы он работал в IE 11. Я пробовал полифилы, но они не работают.
Мне нужно это с использованием CDN, а не CLI, как для надстройки Outlook.
Код, с которым я работаю, находится на моем коде:
https://codepen.io/ziggythecompace/pen/BaNRERR
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Trying to use the Quill Editor in Vue</title>
<!-- https://pineco.de/wrapping-quill-editor-in-a-vue-component/ -->
<!-- This works! -->
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
</head>
<body>
<div id="root">
<editor v-model="model"></editor>
<p>I need the v-html directive: <span v-html="model"></span></p>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="quill_in_wrapper.js"></script>
</body>
</html>
JavaScript:
Vue.component('editor', {
/*template: `
<div ref="editor"></div>
`,*/
template: '<div ref="editor"></div>',
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
editor: null
};
},
mounted() {
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false] }],
['bold', 'italic', 'underline']
]
},
//theme: 'bubble',
theme: 'snow',
formats: ['bold', 'underline', 'header', 'italic'],
placeholder: "Type something in here!"
});
this.editor.root.innerHTML = this.value;
this.editor.on('text-change', () => this.update());
},
methods: {
update() {
this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
}
}
})
new Vue({
el: '#root',
data: {
//model: 'Testing an editor'
model: ''
}
})
Полифилла там нет. Любые предложения, я был бы очень признателен.
Спасибо