Akaunting Html Editor component fixed.. 0.js and 37.js file deleted :)

This commit is contained in:
Cüneyt Şentürk 2021-01-18 16:20:57 +03:00
parent 1a562e4707
commit 12c1be09e6

View File

@ -11,103 +11,112 @@
<button type="button" class="ql-list" value="bullet"></button> <button type="button" class="ql-list" value="bullet"></button>
</div> </div>
</div> </div>
<div :id="editorId" :name="name" class="" ref="editor"> <div :id="editorId" :name="name" class="" ref="editor">
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { import Quill from 'quill';
export default {
name: 'akaunting-html-editor', name: 'akaunting-html-editor',
props: { props: {
value: { name: String,
type: String, value: {
default: '' type: String,
}, default: ''
name: String },
theme: {
type: String,
default: 'snow'
},
}, },
data () { data () {
return { return {
editor: null, editor: null,
content: null, content: null,
lastHtmlValue: '', lastHtmlValue: '',
editorId: null, editorId: null,
toolbarId: null toolbarId: null
} }
}, },
methods: { methods: {
initialize (Quill) { initialize (Quill) {
this.editor = new Quill(`#${this.editorId}`, { let theme = this.theme;
theme: 'snow',
modules: {
toolbar: `#${this.toolbarId}`
}
})
if (this.value.length > 0) { this.editor = new Quill(`#${this.editorId}`, {
this.editor.pasteHTML(this.value) theme: theme,
} modules: {
toolbar: `#${this.toolbarId}`
}
});
let editorRef = this.$refs.editor; if (this.value.length > 0) {
let node = editorRef.children[0]; this.editor.pasteHTML(this.value)
}
this.editor.on('text-change', () => { let editorRef = this.$refs.editor;
let html = node.innerHTML; let node = editorRef.children[0];
if (html === '<p><br></p>') { this.editor.on('text-change', () => {
html = ''; let html = node.innerHTML;
}
this.content = html; if (html === '<p><br></p>') {
html = '';
}
this.$emit('input', this.content); this.content = html;
})
},
pasteHTML () { this.$emit('input', this.content);
if (!this.editor) { });
return },
}
this.editor.pasteHTML(this.value); pasteHTML () {
}, if (!this.editor) {
return;
}
randomString() { this.editor.pasteHTML(this.value);
let text = ""; },
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (let i = 0; i < 5; i++) { randomString() {
text += possible.charAt(Math.floor(Math.random() * possible.length)); let text = "";
} let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
return text; for (let i = 0; i < 5; i++) {
} text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
},
}, },
async mounted () { async mounted () {
this.content = this.value; this.content = this.value;
let Quill = await import('quill'); this.editorId = this.randomString();
this.toolbarId = this.randomString();
Quill = Quill.default || Quill; this.$nextTick(() => {
this.initialize(Quill)
this.editorId = this.randomString(); });
this.toolbarId = this.randomString();
this.$nextTick(() => {
this.initialize(Quill)
});
}, },
watch: { watch: {
value (newVal) { value (newVal) {
if (newVal !== this.content) { if (newVal !== this.content) {
this.pasteHTML(newVal); this.pasteHTML(newVal);
} }
}, },
content (newVal) { content (newVal) {
this.$emit('input', newVal); this.$emit('input', newVal);
} },
} },
} }
</script> </script>