I have problem I can't figure out but I do have a hint. Before integrating TinyMCE the main navigation was working fine eg links Settings, Analytics, Setup; it isn't working now if you click them.
Here is my js file:
var app_htmleditor_module = angular.module('app_htmleditor', ['components']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: getBaseURL()+'public/tpl/app/htmleditor.htm', controller: HtmlEditorCtrl, reloadOnSearch:false }).
otherwise( {redirectTo: '/'});
}
]);
angular.module('components', []).directive('imageUpload', function () {
return {
restrict: 'E',
scope: {
uploaderid:'@uploaderid'
},
templateUrl: '/public/tpl/imageupload.htm'
}
});
app_htmleditor_module.directive('uiTinymce', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.tinymce({
// Location of TinyMCE script
script_url: 'http://resources.holycrap.ws/jscripts/tiny_mce/tiny_mce.js',
// General options
theme: "simple",
// Change from local directive scope -> "parent" scope
// Update Textarea and Trigger change event
// you can also use handle_event_callback which fires more often
onchange_callback: function(e) {
if (this.isDirty()) {
this.save();
// tinymce inserts the value back to the textarea element, so we get the val from element (work's only for textareas)
//ngModel.$setViewValue(e.getBody().innerHTML);
ngModel.$setViewValue(element.val());
scope.$apply();
return true;
}
}
});
}
}
});
And I added above tinymce directive into textarea using ui:tinymce
like this:
<textarea ui:tinymce ng-model="data.html_tab" id="{{fileUploaderID}}_html_tab" name="{{fileUploaderID}}_html_tab" style="width:600px; height:300px"></textarea>
Notice ui:tinymce
above. If I remove that, the navigation works fine again. So how do I make my navigation work with ui:tinymce
added in textarea?
DEMO URL:
http://dev-socialapps.rkm-group.com/app/htmleditor/index#/
Any help will be greatly appreciated. Thanks
As suggested, I added ui js file to my template file first:
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
Then In my js file, I added:
var app_htmleditor_module = angular.module('app_htmleditor', ['components', 'ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: getBaseURL()+'public/tpl/app/htmleditor.htm',
controller: HtmlEditorCtrl,
reloadOnSearch:false
}).
otherwise( {redirectTo: '/'});
}
]);
app_htmleditor_module.value('ui.config', {
tinymce: {
theme: 'simple'
}
});
And in textarea tag:
<textarea ui-tinymce ng-model="tinymce" id="{{fileUploaderID}}_html_tab" name="{{fileUploaderID}}_html_tab" style="width:600px; height:300px"></textarea>
But I am getting error:
ReferenceError: tinymce is not defined
Though ui js file is added fine, I confirmed by viewing source code and clicking on link
Have you tried the latest version of the tinymce directive in the angular-ui library?
Demo
JS file
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With