Created
August 12, 2020 23:39
-
-
Save danielsouzaaf/264cd49ab9f2c0031bd6f3acd39c5b2c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="field-tinymce"> | |
| <template> | |
| <ckeditor v-model="html" :editor="classic" :disabled="disabled" :config="editor" @input="onEditorInput" @ready="initHtml"></ckeditor> | |
| </template> | |
| </div> | |
| </template> | |
| <script> | |
| import CKEditor from '@ckeditor/ckeditor5-vue' | |
| import ClassicEditor from '@ckeditor/ckeditor5-build-classic' | |
| export default { | |
| name: 'WysiwigField', | |
| components: { | |
| ckeditor: CKEditor.component | |
| }, | |
| props: { | |
| text: { | |
| type: Object, | |
| default: () => { | |
| return {} | |
| } | |
| }, | |
| value: { | |
| type: String, | |
| default: '' | |
| }, | |
| type: { | |
| type: String, | |
| default: '' | |
| }, | |
| item: { | |
| type: Object, | |
| default: () => { | |
| return {} | |
| } | |
| }, | |
| controller: { | |
| type: String, | |
| default: 'a' | |
| }, | |
| component: { | |
| type: Object, | |
| default: () => { | |
| return {} | |
| } | |
| }, | |
| disabled: { | |
| type: Boolean, | |
| default: false | |
| } | |
| }, | |
| data() { | |
| return { | |
| baseUrl: null, | |
| collection: 'wysiwyg', | |
| editor: { | |
| language: 'pt-BR' | |
| }, | |
| init: false, | |
| html: '', | |
| classic: ClassicEditor | |
| } | |
| }, | |
| methods: { | |
| initType() { | |
| this.editor.toolbar1 = 'bold italic strikethrough link | undo redo | removeformat' | |
| switch (this.type) { | |
| case 'note': | |
| this.editor.toolbar1 = 'bold italic strikethrough link | undo redo | removeformat' | |
| break | |
| default: | |
| this.editor.toolbar1 = 'formatselect | bold italic strikethrough | link quickimage image media table | numlist bullist | undo redo | code | removeformat' | |
| } | |
| }, | |
| initHtml() { | |
| if (this.value) { | |
| this.html = this.decodeHTML(this.value) | |
| } else if (this.text) { | |
| this.html = this.text.html | |
| } | |
| }, | |
| onEditorInput(e) { | |
| this.$emit('input', e) | |
| }, | |
| decodeHTML(html) { | |
| const txt = document.createElement('textarea') | |
| txt.innerHTML = html | |
| return txt.value | |
| } | |
| } | |
| } | |
| </script> | |
| <style scoped></style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment