如何更改 CKEditor 的编辑器大小？-JavaScript中文网-JavaScript教程资源分享门户

介绍

CKEditor 是一个广泛使用的 WYSIWYG 文本编辑器，但是默认情况下它的编辑器大小可能并不适合所有的应用场景。因此，本文将介绍如何更改 CKEditor 的编辑器大小。

步骤

打开 CKEditor 的配置文件

在 HTML 页面中，找到 CKEditor 的初始化代码。这通常包括一个或多个 JavaScript 文件。一般而言，你可以在这些文件中找到 CKEditor 的默认配置。

更改编辑器高度和宽度

在 CKEditor 的配置文件中，你可以找到 config.height 和 config.width 这两个属性。通过更改这两个属性的值，你可以调整编辑器的高度和宽度。

CKEDITOR.replace('editor', {
  height: 500, // 设置编辑器高度为 500 像素
  width: 800, // 设置编辑器宽度为 800 像素
});

调整 CKEditor 样式

如果你更改了编辑器的大小，那么你可能还需要调整 CKEditor 的样式以使其看起来更协调。你可以在 CSS 文件中添加以下样式：

.cke_wrapper {
  height: 500px; /* 设置编辑器包装器的高度 */
  width: 800px; /* 设置编辑器包装器的宽度 */
}

指导意义

通过更改 CKEditor 的编辑器大小，你可以在不改变其功能的前提下，适应各种应用场景。此外，这也是学习如何调整和自定义 CKEditor 的一步。

示例代码

以下是一个完整的示例代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  --------------- ---------------
  ------- --------------------------------------------------------------
  -------
    ------------ -
      ------- ------
      ------ ------
    -
  --------
-------
------
  --------- -------------------------
  --------
    -------------------------- -
      ------- ----
      ------ ----
    ---
  ---------
-------
-------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/30988