Created
December 14, 2016 14:04
-
-
Save Doogiemuc/c23c9f4b315db01e9ba3737e3b01616b to your computer and use it in GitHub Desktop.
VueJs TinyMCE directive
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
<script> | |
module.exports = { | |
twoWay: true, | |
bind: function() { | |
var self = this; | |
var IDattr = self.el.getAttribute('id') | |
console.log("TinyMCEDirective.bind IDattr="+IDattr) | |
console.log("========== JQUERY val=", $('#ideaDescription').val()) // returns undefined, el is not yet in the DOM ?? | |
Vue.nextTick(function() { // this does not work. Vue seems to be unknown in a directive | |
console.log("========== TinyMCEDirective.nextTick el.val=", $('#ideaDescription').val()) | |
tinymce.init({ | |
selector: '#'+IDattr, | |
setup: function(editor) { | |
console.log("tinymce.setup editor="+editor) | |
editor.on('init', function() { | |
console.log("TinyMCEDirective.editor.on(init) this=", this, " self=",self) | |
tinymce.get('editor').setContent(self.value); | |
}); | |
// when typing keyup event | |
editor.on('keyup', function() { | |
// get new value | |
var new_value = tinymce.get('editor').getContent(self.value); | |
// set model value | |
self.set(new_value) | |
}); | |
} | |
}) | |
.then(function(editors) { | |
console.log("TinyMCEDirective.init.then() editors=", editors) | |
}) | |
.catch(err => { | |
console.err("TinyMCEDirective ERROR: ", err) | |
}); | |
}) | |
}, | |
update: function(newVal, oldVal) { | |
console.log("tinymce update newVal="+newVal) | |
// set val and trigger event | |
$(this.el).val(newVal).trigger('keyup'); | |
}, | |
unbind: function() { | |
console.log("tinymce unbind") | |
tinymce.remove('#' + this.el.getAttribute('id')) | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment