Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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