Question

我正在使用javascript ckEditor，我有一个调整大小的问题，这个问题在过去的几天里一直存在问题。我有一个名为ckEditorConfig的角度对象，我存储了ckEditor的配置。目前我可以看到一些属性被设置（所以我知道它在某种程度上有效）。但是，当我尝试调整我的编辑器大小时，它不会调整到我想要的级别。

以下是html和js代码的片段，以便为我所说的内容增添更多亮点：

这包含在我的控制器中

$scope.ckEditorConfig = {
    uiColor : '#FFFFFF',
    toolbarGroups: [
        { name: 'undo' }
    ],

    removeButtons: '',
    extraPlugins: 'font,sourcedialog,sourcearea,stylescombo,colorbutton, colordialog',
    contentsCss: '/path/to/css',
    customConfig: '/path/to/js',
    width: 561,
    height: 150
};


 websiteApp.directive('ckEditor', ['$timeout', function ($timeout) {
return {
    require: '?ngModel',
    link: function ($scope, elm, attr, ngModel) {
        var ck = CKEDITOR.replace(elm[0]);
        if($scope.ckEditorConfig){
            $.each($scope.ckEditorConfig, function(key, value){
                ck.config[key] = value;
            });
        }

        var height = ck.config.height; var width = ck.config.width;
        if(height && width){
            ck.on('instanceReady', function(event){
                var editor = event.editor;
                console.log('ck height: '+ height+', ck width: '+width);
                console.log('editor config height: '+ editor.config.height+', editor config width: '+editor.config.width);
                editor.resize(editor.config.width, editor.config.height, false, false);
            });
            // ck.resize(height, width, true, false);
        }
    }
};

}]）;

我的html中有这个

> <textarea id="fflFieldLabel" class="txtArea" rows="1"
> ng-model="{{ngmodel}}" ck-editor></textarea>

Answer 1

试试这个：

<textarea id="fflFieldLabel" ></textarea>
     CKEDITOR.replace('#myfield',{customConfig :'',width:'700px',height:'700px'});

或更改textarea标签的宽度和高度。希望它能奏效。

Answer 2

如果您使用的是config.width和config.height，则无需调用editor.resize，编辑器本身应在初始化时根据配置自动设置大小。

适用于

<textarea name="editor1" id="editor1" rows="1" cols="80">  
    <p>Foo Bar Baz</p>
</textarea>

和

CKEDITOR.replace( 'editor1', { width: 450, height: 150 } );

那么可能存在一些集成问题，或者在其他地方覆盖/更新维度？

Javascript调整CK编辑器无法正常工作

2 个答案: