Skip to content

Instantly share code, notes, and snippets.

@bign8
Last active August 29, 2015 14:01
Show Gist options
  • Save bign8/9f3b516fba051dbdcce8 to your computer and use it in GitHub Desktop.
Save bign8/9f3b516fba051dbdcce8 to your computer and use it in GitHub Desktop.
Angular.js and TinyMCE playing nicely (in dialogs too)
// A sample MCE_OBJ that can load on everything, then clean itself up for the directive above.
var MCE_OBJ = {
selector: 'textarea',
menubar: false,
toolbar_items_size: 'small',
plugins: 'link image code',
toolbar: "undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code",
setup: function (editor) { // cleanup for angular
delete MCE_OBJ.selector;
delete MCE_OBJ.setup;
}
};
tinymce.init( MCE_OBJ );
!function(a){function f(){function c(a){"remove"===a&&this.each(function(a,b){var c=f(b);c&&c.remove()}),this.find("span.mceEditor,div.mceEditor").each(function(a,b){var c=tinymce.get(b.id.replace(/_parent$/,""));c&&c.remove()})}function d(a){var e,d=this;if(a!==b)c.call(d),d.each(function(b,c){var d;(d=tinymce.get(c.id))&&d.setContent(a)});else if(d.length>0&&(e=tinymce.get(d[0].id)))return e.getContent()}function f(a){var b=null;return a&&a.id&&e.tinymce&&(b=tinymce.get(a.id)),b}function g(a){return!!(a&&a.length&&e.tinymce&&a.is(":tinymce"))}var h={};a.each(["text","html","val"],function(c,e){var i=h[e]=a.fn[e],j="text"===e;a.fn[e]=function(c){var e=this;if(!g(e))return i.apply(e,arguments);if(c!==b)return d.call(e.filter(":tinymce"),c),i.apply(e.not(":tinymce"),arguments),e;var h="",k=arguments;return(j?e:e.eq(0)).each(function(b,c){var d=f(c);h+=d?j?d.getContent().replace(/<(?:"[^"]*"|'[^']*'|[^'">])*>/g,""):d.getContent({save:!0}):i.apply(a(c),k)}),h}}),a.each(["append","prepend"],function(c,d){var e=h[d]=a.fn[d],i="prepend"===d;a.fn[d]=function(a){var c=this;return g(c)?a!==b?(c.filter(":tinymce").each(function(b,c){var d=f(c);d&&d.setContent(i?a+d.getContent():d.getContent()+a)}),e.apply(c.not(":tinymce"),arguments),c):void 0:e.apply(c,arguments)}}),a.each(["remove","replaceWith","replaceAll","empty"],function(b,d){var e=h[d]=a.fn[d];a.fn[d]=function(){return c.call(this,d),e.apply(this,arguments)}}),h.attr=a.fn.attr,a.fn.attr=function(c,e){var i=this,j=arguments;if(!c||"value"!==c||!g(i))return e!==b?h.attr.apply(i,j):h.attr.apply(i,j);if(e!==b)return d.call(i.filter(":tinymce"),e),h.attr.apply(i.not(":tinymce"),j),i;var k=i[0],l=f(k);return l?l.getContent({save:!0}):h.attr.apply(a(k),j)}}var b,c,d=[],e=window;a.fn.tinymce=function(b){function l(){var c=[],d=0;f&&(f(),f=null),g.each(function(a,e){var f,h=e.id,i=b.oninit;h||(e.id=h=tinymce.DOM.uniqueId()),f=new tinymce.Editor(h,b,tinymce.EditorManager),c.push(f),f.on("init",function(){var a,b=i;g.css("visibility",""),i&&++d==c.length&&("string"==typeof b&&(a=-1===b.indexOf(".")?null:tinymce.resolve(b.replace(/\.\w+$/,"")),b=tinymce.resolve(b)),b.apply(a||tinymce,c))})}),a.each(c,function(a,b){b.render()})}var h,i,j,g=this,k="";if(!g.length)return g;if(!b)return tinymce.get(g[0].id);if(g.css("visibility","hidden"),e.tinymce||c||!(h=b.script_url))1===c?d.push(l):l();else{c=1,i=h.substring(0,h.lastIndexOf("/")),-1!=h.indexOf(".min")&&(k=".min"),e.tinymce=e.tinyMCEPreInit||{base:i,suffix:k},-1!=h.indexOf("gzip")&&(j=b.language||"en",h=h+(/\?/.test(h)?"&":"?")+"js=true&core=true&suffix="+escape(k)+"&themes="+escape(b.theme)+"&plugins="+escape(b.plugins)+"&languages="+j,e.tinyMCE_GZ||(e.tinyMCE_GZ={start:function(){function c(a){tinymce.ScriptLoader.markDone(tinymce.baseURI.toAbsolute(a))}c("langs/"+j+".js"),c("themes/"+b.theme+"/theme"+k+".js"),c("themes/"+b.theme+"/langs/"+j+".js"),a.each(b.plugins.split(","),function(a,b){b&&(c("plugins/"+b+"/plugin"+k+".js"),c("plugins/"+b+"/langs/"+j+".js"))})},end:function(){}}));var m=document.createElement("script");m.type="text/javascript",m.onload=m.onreadystatechange=function(e){e=e||event,("load"==e.type||/complete|loaded/.test(m.readyState))&&(tinymce.dom.Event.domLoaded=1,c=2,b.script_loaded&&b.script_loaded(),l(),a.each(d,function(a,b){b()}))},m.src=h,document.body.appendChild(m)}return g},a.extend(a.expr[":"],{tinymce:function(a){return!!(a.id&&"tinymce"in window&&tinymce.get(a.id))}})}(jQuery);
angular.module('ngTinymce', []).
// requires jquery.tinymce.js and Global MCE_OBJ for settings
directive('ngTinymce', function() {
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
element.tinymce( angular.extend( MCE_OBJ || {}, {
setup: function (editor) {
editor.on('change', function (e) {
if (this.isDirty()) this.save();
});
editor.on('SaveContent', function (e) {
ngModel.$setViewValue(this.getContent());
$scope.$apply();
});
}
} ) );
}
}
})
/* tinyMCE styles - remove that path junk! */
.mce-path > .mce-path-item, .mce-path > .mce-divider { visibility: hidden; }
.mce-path { padding: 0px !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment