动态创建多个 ui tinymce 编辑器 angularjs 中的问题答案

【问题标题】：Issue in dynamically create multiple ui tinymce editor angularjs动态创建多个 ui tinymce 编辑器 angularjs 中的问题
【发布时间】：2017-05-15 06:58:46
【问题描述】：

我正在为每个选定的用户创建多个 tinymce 编辑器。如果用户数量较少（低于 10），则可以正确创建编辑器。如果用户限制超过 10 个，则编辑器将仅应用于少数文本区域，而不应用于少数文本区域。

Please refer this image for my issue.

请参考上图。 我的看法是：

<div ng-repeat="selnominee in pepsicoNomination.selectedNomineesforContribution track by $index">
<textarea class="contri_txtarea"
                                      ng-model="selnominee.NomineeDetails.Contribution" ui-tinymce="tinymceNominee.options" rows="13" cols="80" required></textarea>
</div>

根据 "pepsicoNomination.selectedNomineesforContribution" 的长度，将创建文本区域的数量，并且需要将编辑器应用于这些文本区域。

我的脚本是：

$scope.tinymceNominee = {
            cmtsCharLength: 0,
            options: {
                height: 175,
                theme: 'modern',
                plugins: [
                    "advlist autolink lists link image  hr anchor charcount  autoresize"
                ],
                toolbar1: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link",
                menubar: false,
                browser_spellcheck: true,
                gecko_spellcheck: true,
                content_css: [
                    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                    '//www.tinymce.com/css/codepen.min.css'
                ],
                resize: true,
                elementpath: false,
                autoresize_min_height: 175,
                autoresize_max_height: 600,
                setup: function (ed) {

                   ed.on('resizeeditor', function (e) {
                        $('.mce-tinymce').width("100%");
                    });

                   ed.on('keydown', function (e) {
                        var allowedKeys = [8, 35, 36, 37, 38, 39, 40, 45, 46];
                        if (allowedKeys.indexOf(e.keyCode) != -1) return true;

                       var txtLength = CountCharacters(ed.id);
                        if (txtLength >= $scope.pepsicoNomination.Band.ContributionCharCount) {
                            e.preventDefault();
                            e.stopPropagation();
                            return false;
                        }
                        $scope.cmtsCharLength = txtLength;
                        return true;
                    });

                   ed.on('keyup', function (e) {
                        var count = CountCharacters(ed.id);
                        $scope.cmtsCharLength = count;
                    });
                },
                mode: 'exact'
            }
        };

【问题讨论】：

我提供了加载该 div 的超时时间。'

'我已经在页面加载的特定条件下显示了这个 div。在那个地方只决定了用户的数量。在这种情况下，我尝试使用如下超时：'$timeout(function () {$scope.showContribution = true;}, 500);'在创建时，所有文本编辑器都正确显示。但在编辑时，同样的问题发生了。

标签： angularjs tinymce-4

【解决方案1】：

TinyMCE 的某些版本存在错误。指令生成的 Id 有时具有相同的名称。打开您的 ui-tinymce.js 文件并更改以下行：

attrs.$set('id', ID_ATTR + '-' + (new Date().valueOf()));

到：

attrs.$set('id', ID_ATTR + '-' + (new Date().getTime().valueOf()));

这将确保所有 ID 都是唯一的。

【讨论】：