Skip to content

Instantly share code, notes, and snippets.

@onefriendaday
Created July 31, 2019 07:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save onefriendaday/1bdfe0eea19311f19181e727296411ed to your computer and use it in GitHub Desktop.
Save onefriendaday/1bdfe0eea19311f19181e727296411ed to your computer and use it in GitHub Desktop.
Storyblok TinyMCE plugin
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div><textarea v-model="model.content" id="mytextarea"></textarea></div>`,
methods: {
initWith() {
return {
plugin: 'wysiwyg-tinymce',
content: ''
}
},
pluginCreated() {
var styles = '.mce-tinymce{ box-sizing:border-box; }'
var styleSheet = document.createElement('style')
styleSheet.type = 'text/css'
styleSheet.innerText = styles
document.body.appendChild(styleSheet)
this.$sb.getScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.3/tinymce.min.js', () => {
tinymce.init({
selector: '#mytextarea',
init_instance_callback: (editor) => {
editor.on('input change undo redo setcontent', () => {
this.model.content = editor.getContent()
})
},
height: 230,
plugins: 'fullscreen link lists code visualblocks',
menubar: false,
toolbar: 'styleselect | link | numlist bullist | removeformat',
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: 'Styles',
items: [{
title: 'Text Pink',
selector: '*',
classes: 'text-pink-carnation'
}]
}]
})
})
},
},
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