Akaunting Html Editor component fixed.. 0.js and 37.js file deleted :)
This commit is contained in:
parent
1a562e4707
commit
12c1be09e6
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user