I have nuxt project where i use “Quill editor”, and I’m trying to add quill-html-edit-button like in example https://github.com/benwinding/quill-html-edit-button, but after rebuilding my app i’ve got “Super expression must either be null or a function, not undefined”. Can someone help me, please?
My code:
“quillEditor.js” imported like plugin in “nuxt.config”
import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
import Quill from 'quill'
import ImageResize from 'quill-image-resize-vue'
import VideoResize from 'quill-video-resize-module';
import {ImageUpload} from 'quill-image-upload';
import htmlEditButton from "quill-html-edit-button";
Quill.register('modules/ImageResize', ImageResize);
Quill.register('modules/VideoResize', VideoResize);
Quill.register('modules/imageUpload', ImageUpload);
Quill.register('modules/htmlEditButton', htmlEditButton);
Vue.use(VueQuillEditor);
component
<quill-editor
ref="editor"
:content="formInitialData.content"
:options="editorOption"
/>
editorOption: {
theme: 'snow',
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] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video']
],
ImageResize: {},
VideoResize: {},
htmlEditButton: {
debug: true,
msg: "Edit the content in HTML format",
okText: "Ok",
cancelText: "Cancel",
buttonHTML: "HTML",
buttonTitle: "Show HTML source",
syntax: false,
prependSelector: 'div#myelement',
editorModules: {}
},
imageUpload: {
url: process.env.apiUrl + '/push-s3',
method: 'POST',
name: 'file',
withCredentials: false,
headers: {},
csrf: { token: 'token', hash: '' },
callbackOK: (serverResponse, next) => {
if(serverResponse.success){
next(serverResponse.data);
}
},
callbackKO: serverError => {
console.log(serverError);
},
checkBeforeSend: (file, next) => {
console.log(this.apiUrl);
next(file);
}
},
},
placeholder: 'Insert text here ...',
},
packege.json
"quill-html-edit-button": "^2.2.7",