alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
220 lines (178 loc) • 6.6 kB
JavaScript
(function($) {
var Alpaca = $.alpaca;
Alpaca.Fields.TinyMCEField = Alpaca.Fields.TextAreaField.extend(
/**
* @lends Alpaca.Fields.tinyMCEField.prototype
*/
{
/**
* @see Alpaca.Fields.TextAreaField#getFieldType
*/
getFieldType: function() {
return "tinymce";
},
/**
* @see Alpaca.Fields.TextAreaField#setup
*/
setup: function()
{
var self = this;
if (!this.data)
{
this.data = "";
}
if (!self.options.toolbar)
{
self.options.toolbar = "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image";
}
this.base();
},
setValue: function(value)
{
var self = this;
// be sure to call into base method
this.base(value);
if (self.editor)
{
self.editor.setContent(value);
}
},
/**
* @see Alpaca.Fields.ControlField#getControlValue
*/
getControlValue:function()
{
var self = this;
var value = null;
if (self.editor)
{
value = self.editor.getContent()
}
return value;
},
initTinyMCEEvents: function()
{
var self = this;
if (self.editor) {
// click event
self.editor.on("click", function (e) {
self.onClick.call(self, e);
self.trigger("click", e);
});
// change event
self.editor.on("change", function (e) {
self.onChange();
self.triggerWithPropagation("change", e);
});
// blur event
self.editor.on('blur', function (e) {
self.onBlur();
self.trigger("blur", e);
});
// focus event
self.editor.on("focus", function (e) {
self.onFocus.call(self, e);
self.trigger("focus", e);
});
// keypress event
self.editor.on("keypress", function (e) {
self.onKeyPress.call(self, e);
self.trigger("keypress", e);
});
// keyup event
self.editor.on("keyup", function (e) {
self.onKeyUp.call(self, e);
self.trigger("keyup", e);
});
// keydown event
self.editor.on("keydown", function (e) {
self.onKeyDown.call(self, e);
self.trigger("keydown", e);
});
}
},
afterRenderControl: function(model, callback)
{
var self = this;
this.base(model, function() {
if (!self.isDisplayOnly() && self.control && typeof(tinyMCE) !== "undefined")
{
// wait for Alpaca to declare the DOM swapped and ready before we attempt to do anything with CKEditor
self.on("ready", function() {
if (!self.editor)
{
var rteFieldID = $(self.control)[0].id;
tinyMCE.init({
init_instance_callback: function(editor) {
self.editor = editor;
self.initTinyMCEEvents();
},
selector: "#" + rteFieldID,
toolbar: self.options.toolbar
});
}
});
}
callback();
});
},
/**
* @see Alpaca.Field#destroy
*/
destroy: function()
{
var self = this;
// destroy the plugin instance
if (self.editor)
{
self.editor.remove();
self.editor = null;
}
// call up to base method
this.base();
},
/* builder_helpers */
/**
* @see Alpaca.Fields.TextAreaField#getTitle
*/
getTitle: function() {
return "TinyMCE Editor";
},
/**
* @see Alpaca.Fields.TextAreaField#getDescription
*/
getDescription: function() {
return "Provides an instance of a TinyMCE control for use in editing HTML.";
},
/**
* @private
* @see Alpaca.ControlField#getSchemaOfOptions
*/
getSchemaOfOptions: function() {
return Alpaca.merge(this.base(), {
"properties": {
"toolbar": {
"title": "TinyMCE toolbar options",
"description": "Toolbar options for TinyMCE plugin.",
"type": "string"
}
}
});
},
/**
* @private
* @see Alpaca.ControlField#getOptionsForOptions
*/
getOptionsForOptions: function() {
return Alpaca.merge(this.base(), {
"fields": {
"toolbar": {
"type": "text"
}
}
});
}
/* end_builder_helpers */
});
Alpaca.registerFieldClass("tinymce", Alpaca.Fields.TinyMCEField);
})(jQuery);