Question

找到angular-tinymce指令中可能存在的错误。我有一个解决方法，但它很难看，并寻找更好的解决方案来解决这个问题。

基本上，一切正常，除非您在页面上使用相同的配置需要多于1个textarea。例如：

@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是绑定第二个textarea的。我的解决方法是复制上面的内容并将每个textarea设置为拥有自己的配置：

    @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

您不必复制该对象，因为在＆＃39;中使用了严格的＆＃39 ;;将抛出this Error的模式。所以我找到的解决方案是将一个空对象，即{}传递给第二个或后续的tinymce指令属性，如下所示：

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

angular-tinymce可能存在错误

1 个答案: