tinymce不工作内部ng视图？
我正在做一个MEAN项目。
在后端，我需要tinymce进行cms编辑。
我为每个页面内容使用ng-view。 但是微小的mce不能在ng-view里面工作
这里是我的index.html文件在这里工作正常
<html lang="en" ng-app="AdminApp" > <head> <script type="text/javascript" src="/asset/tiny/tiny_mce/tiny_mce.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script type="text/javascript" src="includes/tinymce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options width : "505", height : "150", mode : "textareas", theme : "advanced", extended_valid_elements : "iframe[src|width|height|name|align|type|class|frameborder]", plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,imagemanager", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,search,replace,|,media,|,bullist,numlist,|,blockquote,|,undo,redo,|,link,unlink,|,", theme_advanced_buttons2 : "fontsizeselect,forecolor,backcolor,|,preview,fullscreen,code,insertimage", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, relative_urls : false, remove_script_host : false, document_base_url : "", // Example content CSS (should be your site CSS) content_css : "css/content.css", // Style formats style_formats : [ {title : 'Bold text', inline : 'b'}, {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}, {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}}, {title : 'Example 1', inline : 'span', classes : 'example1'}, {title : 'Example 2', inline : 'span', classes : 'example2'}, {title : 'Table styles'}, {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'} ], // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } }); </script> <base href="/admin/" /> </head> <body> <!--div ng-view></div--> <textarea>hello</textarea> </body> </html> 里面的ng视图代码
<textarea>home</textarea>
我正在使用node.js服务器
请帮我解决这个问题
谢谢
你不能在angularjs应用程序中使用tinymce 。 你应该为此创build第一个指令。
不过已经有一些指令可以使用： https ： //github.com/angular-ui/ui-tinymce
一旦你下载了ui-tinymce下面是开始使用它的步骤：
的index.html
<!DOCTYPE html> <head> <script type="text/javascript" src="bower_components/tinymce-dist/tinymce.js"></script> <script type="text/javascript" src="bower_components/angular/angular.js"></script> <script type="text/javascript" src="bower_components/angular-ui-tinymce/src/tinymce.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body ng-app="myApp"> <form method="post" ng-controller="TinyMceController"> <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea> <button ng-click="getContent()">Get content</button> <button ng-click="setContent()">Set content</button> </form> </body>
app.js
var myAppModule = angular.module('myApp', ['ui.tinymce']); myAppModule.controller('TinyMceController', function($scope) { $scope.tinymceModel = 'Initial content'; $scope.getContent = function() { console.log('Editor content:', $scope.tinymceModel); }; $scope.setContent = function() { $scope.tinymceModel = 'Time: ' + (new Date()); }; $scope.tinymceOptions = { plugins: 'link image code', toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code' }; });
希望对你有帮助。 参考链接 – http://embed.plnkr.co/vL7MqL/
的index.html
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-route.min.js"></script> <script type="text/javascript" src="tinymce.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <div ng-app="plunker"> <ng-view></ng-view> </div>
view.html
<textarea data-ui-tinymce data-ng-model="modal.one"></textarea> change in the input doesn't change the textarea<br> <input ng-model="modal.one">
tinymce.js
/** * Binds a TinyMCE widget to <textarea> elements. */ angular.module('ui.tinymce', []) .value('uiTinymceConfig', {}) .directive('uiTinymce', ['uiTinymceConfig', function(uiTinymceConfig) { uiTinymceConfig = uiTinymceConfig || {}; var generatedIds = 0; return { require: '?ngModel', link: function(scope, elm, attrs, ngModel) { var expression, options, tinyInstance; // generate an ID if not present if (!attrs.id) { attrs.$set('id', 'uiTinymce' + generatedIds++); } options = { // Update model when calling setContent (such as from the source editor popup) setup: function(ed) { ed.on('init', function(args) { ngModel.$render(); }); // Update model on button click ed.on('ExecCommand', function(e) { ed.save(); ngModel.$setViewValue(elm.val()); if (!scope.$$phase) { scope.$apply(); } }); // Update model on keypress ed.on('KeyUp', function(e) { console.log(ed.isDirty()); ed.save(); ngModel.$setViewValue(elm.val()); if (!scope.$$phase) { scope.$apply(); } }); }, mode: 'exact', elements: attrs.id }; if (attrs.uiTinymce) { expression = scope.$eval(attrs.uiTinymce); } else { expression = {}; } angular.extend(options, uiTinymceConfig, expression); setTimeout(function() { tinymce.init(options); }); ngModel.$render = function() { console.log("render") if (!tinyInstance) { tinyInstance = tinymce.get(attrs.id); } if (tinyInstance) { tinyInstance.setContent(ngModel.$viewValue || ''); } }; } }; }]);
example.js
var myApp = angular.module('plunker', ['ngRoute','ui.tinymce','ui.bootstrap']). config(['$routeProvider', function($routeProvider) { console.log("init angular"); $routeProvider.when('/', {templateUrl: 'view.html', controller: 'View'}); $routeProvider.otherwise({redirectTo: '/'}); }]); myApp.controller('View', ['$scope', function ($scope) { console.log("View Controller"); $scope.modal = {one:"hello"}; }])