Created
October 2, 2018 05:34
-
-
Save onefriendaday/0e7171e63cecc474fcab651bea2bbaa7 to your computer and use it in GitHub Desktop.
This file contains 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
const Fieldtype = { | |
mixins: [window.Storyblok.plugin], | |
template: `<div><textarea class="uk-width-1-1" v-model="model.rte_content" ref="mytextarea" id="mytextarea">Hello, World!</textarea></div>`, | |
methods: { | |
initWith() { | |
return { | |
plugin: 'atlas_rte', | |
rte_content: 'Hello world!' | |
} | |
}, | |
pluginCreated() { | |
this.$sb.getScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/tinymce.min.js', () => { | |
this.tinyLoaded = true; | |
console.log('plugin:created'); | |
tinymce.init({ | |
selector: '#mytextarea', | |
init_instance_callback: (editor) => { | |
editor.on('input change undo redo setcontent', () => { | |
this.model.rte_content = editor.getContent() | |
}) | |
}, | |
menubar: false, | |
style_formats: [{ title: 'Block', items: [{ title: 'Paragraph', format: 'p' }, { title: 'Header 1', format: 'h1' }, { title: 'Header 2', format: 'h2' }, { title: 'Header 3', format: 'h3' }, { title: 'Header 4', format: 'h4' }, { title: 'Header 5', format: 'h5' }, { title: 'Header 6', format: 'h6' }, { title: 'Blockquote', format: 'blockquote' }] }, { title: 'Inline', items: [{ title: 'Bold', icon: 'bold', format: 'bold' }, { title: 'Italic', icon: 'italic', format: 'italic' }] }, { title: 'Alignment', items: [{ title: 'Text Right', icon: 'alignright', selector: 'p, div, blockquote', classes: 'text-right' }, { title: 'Text Center', icon: 'aligncenter', selector: 'p, div, blockquote', classes: 'text-center' }, { title: 'Text Left', icon: 'alignleft', selector: 'p, div, blockquote', classes: 'text-left' }] }, { title: 'Colours', items: [{ title: 'Text Pink Dark', selector: '*', classes: 'text-pink-dark'} ,{ title: 'Text Pink', selector: '*', classes: 'text-pink'} ,{ title: 'Text White', selector: '*', classes: 'text-white' }] }] | |
}); | |
}) | |
}, | |
}, | |
watch: { | |
'model': { | |
handler: function (value) { | |
this.$emit('changed-model', value); | |
}, | |
deep: true | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment