TinyMCE <textarea> AngularJS와 양방향으로 바인딩

<textarea></textarea>에는 TinyMCE가 서식있는 텍스트 형식으로 적용되어 양방향 바인딩을 적용 할 수 있습니까?TinyMCE <textarea> AngularJS와 양방향으로 바인딩

나는 작동하지 않습니다! 내 모델의 내용을로드하려면 TinyMCE를 가져올 수 있지만 TinyMCE에서 텍스트를 업데이트하면 모델이 자동으로 업데이트되지 않습니다!

방법이 있습니까? 어떤 도움이라도 대단히 감사하겠습니다.

감사합니다.

2013-11-15 Ciwan

사용자 고유의 지시문을 만들면됩니다.

TinyMCE 편집기의 내용이 변경되면 지시문을 모델과 동기화 할 수 있습니다. 나는 TinyMCE를 사용하지 않았지만 Wysihtml5. 나는 당신이 TinyMCE를 대신 사용하도록 이것을 다시 만들 수 있다고 생각합니다.

angular.module('directives').directive('wysihtml5', ['$timeout', 
function ($timeout) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     template: "<textarea></textarea>", // A template you create as a HTML file (use templateURL) or something else... 
     link: function ($scope, $element, attrs, ngModel) { 

      // Find the textarea defined in your Template 
      var textarea = $element.find("textarea"); 

      // When your model changes from the outside, use ngModel.$render to update the value in the textarea 
      ngModel.$render = function() { 
       textarea.val(ngModel.$viewValue); 
      }; 

      // Create the editor itself, use TinyMCE in your case 
      var editor = new wysihtml5.Editor(textarea[0], 
       { 
        stylesheets: ["/style.css"], 
        parserRules: wysihtml5ParserRules, 
        toolbar: true, 
        autoLink: true, 
        useLineBreaks: false, 
       }); 

      // Ensure editor is rendered before binding to the change event 
      $timeout(function() { 

       // On every change in the editor, get the value from the editor (textarea in case of Wysihtml5) 
       // and set your model 
       editor.on('change', function() { 
        var newValue = textarea.val(); 

        if (!$scope.$$phase) { 
         $scope.$apply(function() { 
          ngModel.$setViewValue(newValue); 
         }); 
        } 
       }); 

      }, 500); 
     } 
    }; 
}]);

그럼 당신은 다음과 같은 HTML 페이지에서 지시어를 사용할 수 있습니다 http://docs.angularjs.org/guide/directive

출처

2013-11-16 14:49:43

는 또한 렌더링 비교 : 당신이 당신의 자신의 지시를 만드는 방법에 대한 자세한 정보가 필요하면 여기

<wysihtml5 ng-model="model.text" />

가 링크입니다 위의 지시어에서이 함수에 이르기까지 각도 함수 ( https://github.com/angular-ui/ui-tinymce)

ngModel.$render = function() { 
    if (!tinyInstance) { 
    tinyInstance = tinymce.get(attrs.id); 
    } 
    if (tinyInstance) { 
    tinyInstance.setContent(ngModel.$viewValue || ''); 
    }

Plnkr : http://plnkr.co/edit/04AFkp?p=preview

DOM로드 시간에 따라 지침에서 위쪽으로 우선 순위를 설정해야 할 수 있습니다. :-)

출처

2014-02-21 16:48:48

다음은 사용자 지정 각도 지시문을 사용하는 나의 해결책입니다. angularJS, TinyMCE 4 및 jQuery 플러그인과 함께 jQuery를 사용해야합니다. 그런 다음 HTML에서

myApp.directive('tinymce', function() { 
    return { 
     restrict: 'C', 
     require: 'ngModel', 
     link: function(scope, element, attrs, modelCtrl) { 
     element.tinymce({ 
      setup: function (e) { 
       e.on("change", function() { 
        modelCtrl.$setViewValue(element.val()); 
        scope.$apply(); 
       } 
      } 
     }); 
     } 
    } 
}

: 그것 뿐이다

<textarea class="tinymce" ng-model="data"></textarea>

는 재미가있다.

출처

2015-08-25 06:47:52 Viandoks

TinyMCE <textarea> AngularJS와 양방향으로 바인딩

답변

관련 문제