AngularJS 컨트롤러에서 TinyMCE 텍스트 콘텐트 얻기

Question

나는 angularJS로 시작하고 내가 원하는 것은 tinymce-ui 텍스트 영역으로 폼을 제출하고 HTML 콘텐트와 텍스트 콘텐트를 제출하는 것이다.

지금은 tinyMce 텍스트 영역이 작동하고 있습니다. 내가 콘솔

tinyMCE.get('tinymce1').getBody().textContent 

입력하면

<div> 
    <form method="post"> 
    <textarea ui-tinymce="tinymceOptions" ng-model="user.commentaireValue" id="tinymce1"></textarea> 
      <textarea>{{user.commentaireValue}}</textarea> 
      <textarea id="IwouldLikeNonHtmlContent">{{HELPME}}</textarea> 
     </form> 
    </div> 

나는 내가 원하는 것을 얻을. 난 그냥 그렇게 할 수있는 방법 기능을 소독 사용하지 않고 내 컨트롤러

app.controller('UserCreationCtrl', ['$scope', 'UsersFactory', '$location', 
    function ($scope, UsersFactory, $location) { 
    // callback for ng-click 'createNewUser': 
    $scope.createNewUser = function() { 
     UsersFactory.create($scope.user); 
     $location.path('/user-list'); 
    }; 
    $scope.options=[ 
     {name:'black', shade:'dark'}, 
     {name:'white', shade:'light'}, 
     {name:'red', shade:'dark'}, 
     {name:'blue', shade:'dark'}, 
     {name:'yellow', shade:'light'} 
    ]; 
    $scope.correctlySelected = $scope.options[1]; 
    $scope.tinymceOptions = { 
     resize: false, 
     width: 400, // I *think* its a number and not '400' string 
     height: 300, 
     plugins: 'textcolor link', 
     toolbar: "undo redo styleselect bold italic forecolor backcolor", 
     menu : { // this is the complete default configuration 
      edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'}, 
      insert : {title : 'Insert', items : 'link media | template hr'}, 
      format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'}, 
     } 
    }; 
    //tinyMCE.get('tinymce1').getBody().textContent; 
}]); 

에서 그것을 검색하는 방법을 알아낼 수 없습니다? Thnak.

Answer 1

당신은 활성 TinyMCE에 editor 내 KeyUp, ExecCommand 및 SetContent에 대한 이벤트 리스너를 부착하고 이러한 이벤트가 트리거 될 때마다 $scope 변수를 바인딩 할 init_instance_callback를 사용할 수 있습니다. ui-tinymce 지시문 소스 코드를 확인하면 이러한 이벤트가 모델을 업데이트하는 데 사용됨을 알 수 있습니다.

JAVASCRIPT

$scope.tinymceOptions = { 
     resize: false, 
     width: 400, // I *think* its a number and not '400' string 
     height: 300, 
     plugins: 'textcolor link', 
     toolbar: "undo redo styleselect bold italic forecolor backcolor", 
     menu : { // this is the complete default configuration 
      edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'}, 
      insert : {title : 'Insert', items : 'link media | template hr'}, 
      format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'}, 
     }, 

     init_instance_callback: function(editor) { 
      var textContentTrigger = function() { 
      $scope.textContent = editor.getBody().textContent; 
      $scope.$apply(); 
      }; 

      editor.on('KeyUp', textContentTrigger); 
      editor.on('ExecCommand', textContentTrigger); 
      editor.on('SetContent', function(e) { 
      if(!e.initial) 
       textContentTrigger(); 
      }); 
     } 
    }; 

HTML

<textarea>{{textContent}}</textarea>