Question

我对材料设计和 ckeditor 有疑问。

我的网络项目包含一个对话框，用于撰写包含一些元数据和文本内容的文档。对于文字内容，我使用CKEDITOR作为richtexteditor。

我的设计如下，

写了一个包含许多html标签和材料设计指令的模板，命名为“NewDocument.html”（对话框包含选项卡和选项卡包含不同类型的数据和模板 600行）
按下按钮以显示对话框
在对话框的 onComplete 事件中，将textarea替换为ckeditor。

以下是代码示例

$scope.createNewDocument = function (ev) {
            $myService.setEditorState(false);
            $mdDialog.show({
                controller: $scope.NewDocumentDialogController,
                templateUrl: 'PageTemplates/ViewTemplates/NewDocument.html',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: false, 
                escapeToClose: false,
                onComplete: function () {
                    CKEDITOR.replace('documentEditor', $scope.editorConfig);

                    angular.element(document.querySelector(".sidenav-metadata")).css('height', window.innerHeight * 0.73 + 'px');
                    angular.element(document.querySelectorAll(".contentScrollable")).css('height', window.innerHeight * 0.5 + 'px');
                    angular.element(document.querySelectorAll(".searchableGrid")).css('height', window.innerHeight * 0.4 + 'px');

                    CKEDITOR.on('instanceReady', function (evt) {
                        $myService.setEditorState(true);
                    });
                },
                fullscreen: true
            });
        };

此功能显示对话框，此处为editorConfig：

$scope.editorConfig = {
            width: "100%",
            height: window.innerHeight * 0.53,
            enableTabKeyTools: true,
            removePlugins: 'elementspath',
            resize_enabled: false,
            language: "tr",
            extraAllowedContent: 'img[src,alt,width,height];*[id];table(*);*(*);*{*}',
            toolbar: [
                    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellCheck'] },
                    { name: 'insert', items: ['OCUpload', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'] },
                    { name: 'colors', items: ['TextColor', 'BGColor', '-', 'Bold', 'Italic', 'Underline', '-', 'RemoveFormat'] },
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
                    { name: 'justify', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
                    { name: 'justify2', items: ['BidiLtr', 'BidiRtl'] },
                    { name: 'justify3', items: ['Font', 'FontSize'] },
                    { name: 'styles', items: ['appendDistribution', 'appendRelated', 'appendSignature', 'appendAttachment', 'appendCoordination', 'appendVacationRequest', 'appendDocumentDate'] }
            ]
        };

这是对话框控制器;

$scope.NewDocumentDialogController = function ($scope, $mdDialog, $myService, $controller) {
            $scope.isReady = false;
            $scope.hide = function () {
                $mdDialog.hide();
            };
            $scope.cancel = function () {
                $mdDialog.cancel();
            };
            $scope.setCurrentTab = function (index) {
                $scope.currentTabIndex = index;
            };
            $scope.getCurrentTab = function () {
                return $scope.currentTabIndex;
            };
            $scope.$watch(function () {
                return $myService.getEditorState();
            }, function (newVal) {
                $scope.isReady = newVal;
            });
        };

我刚刚发布了一些代码部分，因为我在 plunker 和 codepen 中找不到对ckeditor的任何支持。

我的问题是，对话框出现的textarea不会替换为ckeditor。几秒钟后，textarea用ckeditor替换。

我尝试使用contentElement进行preRendering对话和onShowing事件，但这对我不起作用。

目前，作为临时解决方案，我将加载指示符置于对话框中，并在textarea替换为ckeditor时显示加载指示符。但是这个解决方案对我来说没有意义。是否有任何建议，或任何不同的解决方案。谢谢你的帮助。

材料设计md-Dialog和CKEDITOR

0 个答案: