모난 주석으로 인한 버그

Question

angular-tinymce 지시문의 버그가 무엇인지 발견했습니다. 해결 방법이 있지만이 문제에 대해 더 좋은 해결책을 찾고 있습니다.

기본적으로 동일한 구성을 사용하는 페이지에 두 개 이상의 텍스트 영역이 필요한 경우를 제외하고는 모든 것이 올바르게 작동합니다. 예를 들어 :

@Html.TextArea("BodyContent", null, new { @class = "form-control", ng_model = "bodyContent", ui_tinymce = "tinyMCEOptions" }) 

@Html.TextArea("Translate_BodyContent", null, new { @class = "form-control", ng_model = "translation.bodyContent", ui_tinymce = "tinyMCEOptions" }) 

와 설정은 다음과 같습니다 :

$scope.tinyMCEOptions = { 
     selector: "textarea#BodyContent,textarea#Translate_BodyContent", 
     theme: "modern", 
     plugins: [ 
      "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
      "searchreplace wordcount visualblocks visualchars code fullscreen", 
      "insertdatetime media nonbreaking save table contextmenu directionality", 
      "emoticons template paste textcolor" 
     ], 
     toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
     toolbar2: "print preview media | forecolor backcolor emoticons", 
     image_advtab: true, 
     templates: [ 
      { title: 'Test template 1', content: 'Test 1' }, 
      { title: 'Test template 2', content: 'Test 2' } 
     ], 
     content_css: tinyMCEContentCss 
    }; 

그들은 모두 예상대로 TinyMCE에 편집자가 될 것이다,하지만, 서버로 데이터를 전송 저장할 때 문제는 두 번째 편집자입니다 값은 항상 비어 있습니다 ... ui-tinymce은 두 번째 텍스트 영역을 바인딩하는 것 같습니다. 내가 코드를 반복하는 데보다 더 우아한 해결책이있다 바라고 있어요 ..

@Html.TextArea("BodyContent", null, new { @class = "form-control", ng_model = "bodyContent", ui_tinymce = "tinyMCEOptions" }) 

    @Html.TextArea("Translate_BodyContent", null, new { @class = "form-control", ng_model = "translation.bodyContent", ui_tinymce = "tinyMCEOptions2" }) 


$scope.tinyMCEOptions = { 
     selector: "textarea#BodyContent", 
     theme: "modern", 
     plugins: [ 
      "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
      "searchreplace wordcount visualblocks visualchars code fullscreen", 
      "insertdatetime media nonbreaking save table contextmenu directionality", 
      "emoticons template paste textcolor" 
     ], 
     toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
     toolbar2: "print preview media | forecolor backcolor emoticons", 
     image_advtab: true, 
     templates: [ 
      { title: 'Test template 1', content: 'Test 1' }, 
      { title: 'Test template 2', content: 'Test 2' } 
     ], 
     content_css: tinyMCEContentCss 
    }; 

    $scope.tinyMCEOptions2 = { 
     selector: "textarea#Translate_BodyContent", 
     theme: "modern", 
     plugins: [ 
      "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
      "searchreplace wordcount visualblocks visualchars code fullscreen", 
      "insertdatetime media nonbreaking save table contextmenu directionality", 
      "emoticons template paste textcolor" 
     ], 
     toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
     toolbar2: "print preview media | forecolor backcolor emoticons", 
     image_advtab: true, 
     templates: [ 
      { title: 'Test template 1', content: 'Test 1' }, 
      { title: 'Test template 2', content: 'Test 2' } 
     ], 
     content_css: tinyMCEContentCss 
    }; 

오히려 끔찍한 그렇게 할 필요 : 내 해결 방법은 위의 복사본을 만들어 자신의 설정을 가지고 각각의 텍스트 영역을 설정하는 것이 었습니다.

편집

하는 데 도움이 경우 여기에 각 코드의 일부 :

var TranslationVM = function (item) { 
    this.id = '00000000-0000-0000-0000-000000000000'; 
    this.pageId = '00000000-0000-0000-0000-000000000000'; 
    this.cultureCode = ''; 
    this.title = ''; 
    this.isEnabled = false; 
    this.metaKeywords = ''; 
    this.metaDescription = ''; 
    this.bodyContent = ''; 

    if (item) { 
     this.id = item.Id; 
     this.pageId = item.PageId; 
     this.cultureCode = item.CultureCode; 
     this.title = item.Title; 
     this.isEnabled = item.IsEnabled; 
     this.metaKeywords = item.MetaKeywords; 
     this.metaDescription = item.MetaDescription; 
     this.bodyContent = item.BodyContent; 
    } 
}; 

pagesApp.controller('pageController', function ($scope, $http) { 
    $scope.emptyGuid = '00000000-0000-0000-0000-000000000000'; 

    $scope.id = $scope.emptyGuid; 
    $scope.title = ''; 
    $scope.slug = ''; 
    $scope.metaKeywords = ''; 
    $scope.metaDescription = ''; 
    $scope.isEnabled = false; 
    $scope.bodyContent = ''; 
    $scope.cssClass = ''; 
    $scope.cultureCode = ''; 
    $scope.translation = new TranslationVM(); 
    //etc 

Answer 1

당신은 '엄격한 사용'에서 자바 스크립트를 사용하기 때문에 개체를 복제 할 필요가 없습니다; 모드는 this Error을 던질 것입니다. 그래서 내가 찾은 해결책은 빈 개체 즉 {}를 두 번째 또는 후속 tinymce 지시문 속성에 다음과 같이 전달하는 것입니다.

<textarea ui-tinymce="{}"> </textarea>