首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CKEDITOR 4:切换工具栏时保持编辑器高度

CKEDITOR 4是一个流行的富文本编辑器,它提供了丰富的功能和工具栏选项,可以方便地进行文本编辑和格式化。在使用CKEDITOR 4时,有时需要切换工具栏选项,但同时要保持编辑器的高度不变。

为了实现这个功能,可以按照以下步骤进行操作:

  1. 首先,需要在CKEDITOR 4的配置中设置resize_enabled参数为false,这将禁用编辑器的自动调整大小功能。这样,无论切换工具栏选项,编辑器的高度都将保持不变。
  2. 其次,需要在切换工具栏选项时,通过CKEDITOR 4的API来动态更新工具栏配置。可以使用config.toolbar属性来设置不同的工具栏选项。根据需要,可以创建多个不同的工具栏配置,并在切换时使用相应的配置。

下面是一个示例代码,演示如何切换工具栏时保持编辑器高度:

代码语言:javascript
复制
// CKEDITOR 4配置
CKEDITOR.replace('editor', {
  resize_enabled: false,  // 禁用编辑器的自动调整大小功能
  toolbar: 'Basic',  // 默认使用Basic工具栏选项
});

// 切换工具栏选项时的事件处理函数
function switchToolbar(toolbarName) {
  // 根据不同的工具栏选项,设置相应的工具栏配置
  var toolbarConfig;
  if (toolbarName === 'Basic') {
    toolbarConfig = [
      { name: 'document', items: ['Source', '-', 'NewPage', 'Preview', '-', 'Templates'] },
      { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
      { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
      { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'] },
      '/',
      { name: 'styles', items: ['Styles', 'Format'] },
      { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
      { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
      { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
      { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
      { name: 'others', items: ['-'] },
      { name: 'about', items: ['About'] }
    ];
  } else if (toolbarName === 'Advanced') {
    toolbarConfig = [
      // 高级工具栏选项的配置
      // ...
    ];
  }

  // 更新编辑器的工具栏配置
  CKEDITOR.instances.editor.destroy();  // 销毁原有的编辑器实例
  CKEDITOR.replace('editor', {
    resize_enabled: false,
    toolbar: toolbarConfig
  });
}

在上述示例中,通过调用switchToolbar函数并传入不同的工具栏选项名称,可以切换编辑器的工具栏选项。在切换时,会销毁原有的编辑器实例,并使用新的工具栏配置重新创建编辑器实例。

需要注意的是,上述示例中的工具栏配置仅为示意,实际应根据具体需求进行配置。另外,腾讯云提供了丰富的云计算产品,如云服务器、云数据库、云存储等,可以根据具体需求选择相应的产品进行部署和使用。

更多关于CKEDITOR 4的详细信息和使用方法,可以参考腾讯云的官方文档:CKEDITOR 4官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

新内容 - 构建文档 - ckeditor5中文文档

单击链接,首先您将看到一个气球,其中包含编辑链接或在新选项卡中打开链接的选项。 ? 在链接周围插入符号 在链接周围输入文字从未如此简单。 使用键盘移动光标以在键入链接和纯文本之间切换。 ?...自动格式化 键入列表,标题甚至粗体文本,无需使用工具栏按钮。 有关详细信息,请参阅自动格式化功能。 增强的经典编辑器 对于CKEditor 5,我们重新设计了“盒子”编辑器的概念。...全新的工具栏 当用户向下滚动页面工具栏现在总是可见。 内联内容 编辑器内容现在内嵌在页面中 - 因此更容易设计样式。 此外,编辑器会随着内容的增长而增长(或者不是,这取决于你的设置!)。...高度可定制 CKEditor 5 构建版本基于CKEditor 5 框架,提供了强大的可定制性和可扩展性。 自定义数据模型 为CKEditor 5设计了一个更高效的数据模型。...通过CKEditor云服务提供的协作服务,现在可以非常轻松地在应用程序中提供协作功能。 检查协作演示并阅读如何启用注释,用户状态列表等功能或在编辑器中显示其他用户的选择。

3.2K40

概览 - 构建文档 - ckeditor5中文文档

可用构建版本 下面是ckeditor 5当前可用的构建版本: Classic editor Classic editor 是大多数用户已经习惯的富文本编辑器 - 一个工具栏和一个编辑区域放在页面的某个位置...在ckeditor 5中,“盒子”编辑器的概念被修改了: 当用户向下滚动页面,工具栏现在总是可见的。 编辑器内容现在放置在页面内(并没有使用元素) - 它现在更易于去修改样式了。...Inline editor Inline 编辑器带有一个浮动的工具栏,当编辑器获取焦点(例如,点击编辑器它就会出现。...在下面这些用例中,应该使用ckeditor5框架,而不是构建版本: 当你想去创建你自己的文本编辑器并且拥有对它从ui到特性每个方面的控制权的时候 当构建版本的解决方案不适合你的特殊用途 在下面的用例中...,你应该使用ckeditor4: :需要做旧浏览器适配的时候 如果ckeditor4包含你需要的特性,但是ckeditor5还没有的时候 如果ckeditor4已经在你的应用中使用,并且你还没有准备好去用

8.2K30
  • php版本CKEditor 4和CKFinder安装及配置方法图文教程

    本文实例讲述了php版本CKEditor 4和CKFinder安装及配置方法。...分享给大家供大家参考,具体如下: 下载并解压CKEditor 4和CKFinder CKEditor 4下载地址:https://ckeditor.com/cke4/builder,选择自定义的版本,记得加上中文语言包...根据你的需求选择自定义工具栏,选好之后点击Get toolbar config,把这个配置代码复制,备用 在CKEditor 4同级目录新建index.html,和myconfig.js ?...= 3000; //改变大小的最小高度 //config.resize_minHeight = 250; //改变大小的最小宽度 //config.resize_minWidth = 750; //当提交包含有此编辑器的表单...编辑器走过的空格数,( ) 当值为0,焦点将移出编辑框 //config.tabSpaces = 4; //默认使用的模板 //config.templates = "default"; //用逗号分隔的模板文件

    2.7K10

    配置 - 集成 - 构建文档 - ckeditor5中文文档

    它们被定义为CKEditor的插件。 在某些情况下,您可能需要在应用程序中使用不同的编辑器设置,所有这些都基于相同的构建。 为此,您需要在运行时控制编辑器中可用的插件。...构建中删除插件要小心。...工具栏配置 在包含工具栏的构建中,为其定义了最佳默认配置。 但是,您可能需要不同的工具栏排列,这可以通过配置来实现。 每个编辑器可能有不同的工具栏配置方案,因此建议查阅其文档。...删除工具栏项不会从编辑器内部删除该功能。 如果您使用工具栏配置的目标是删除功能,那么正确的解决方案是同时删除各自的插件。 查阅删除功能以获取更多信息。...列出可用项目 您可以使用以下代码段检索编辑器中可用的所有工具栏项: Array.from( editor.ui.componentFactory.names() ); 其他配置选项 查阅 EditorConfig

    2.9K20

    安装插件 - 集成 - 构建文档 - ckeditor5中文文档

    在本指南中,您可以了解如何在两种最常见的场景中将插件添加到编辑器中: 当你使用一个编辑器构建版本 当你从源码构建你的编辑器 要求 为了开始开发CKEditor 5,你需要: Node.js 6.9.0...+ npm 4+ (注意:已知某些npm 5+版本会导致问题,特别是对于重复数据删除软件包; 有问题请升级npm) 添加插件到构建 通过自定义将插件添加到现有构建中。...ckeditor5-alignment 编辑src/ckeditor.js文件,将插件添加到将包含在构建中的插件列表中,并将功能的按钮添加到工具栏: // The editor creator to use...@ckeditor/ckeditor5-alignment 编辑初始化编辑器的配置文件: import ClassicEditor from '@ckeditor/ckeditor5-editor-classic...从源代码构建编辑器而不是使用构建作为基础,您还可以使用编辑器类的静态builtinPlugins和defaultConfig属性。

    4K20

    富文本编辑器之游戏角色升级ing

    状态栏是用来记录编辑的相关数据,可以隐藏。而工具栏则可以任意调整显示的位置、时机甚至切换至幕后操控(通过快捷键等方式触发)。...像是CKEditor、TinyMCE、Quill等都是有口皆碑的,大家在选型的时候不妨可以考虑下这些编辑器: 四、富文本编辑器如何扩展 选择合适的角色,仅仅只是游戏的开始。...以CKEditor与Tiny为例: CK5 class XXXCommand extends Command{ refresh(){} execute(){} } CK4 editor.addCommand...构建脱离于编辑器本身的工具栏组件。将主题修改涉及到的工具栏、菜单栏脱离编辑器,在项目中创建全新的工具栏组件、菜单栏组件。...富⽂本编辑器的技术演进 4. 开源富文本编辑器技术的演进(2020 1024) 5. 从流行的编辑器架构聊聊富文本编辑器的困境 6. Quill Editor 7. CKEditor 8.

    1.3K30

    在线文档技术揭秘开篇 - 富文本编辑器

    富文本编辑器 - 常见交互 内容输入区域 输入内容 选区 & 操作 操作栏 顶部工具栏 侧边栏 内嵌工具栏 右击菜单 富文本编辑器 - 分级 富文本编辑器通常会做3个分级:L0、L1 和 L2 L0...slate, lake),印象笔记(PromiseMirror),Confluence WIKI以及SAAS 产品内集成的知识库(Teambition Thoughts、Pingcode 等等);技术产品包括CKEditor...API 直接操作(CKEditor 4、TineMCE、UEditor) MVC模式 数据和渲染分离,数据模型发生变更后,数据才发生变更(Slate、CKEditor 5、Quil.js) L2 自定义输入和操作...富文本编辑器 - 技术选型 从团队规模角度 产品内容体验简单,并且缺乏编辑器开发者,推荐直接使用 Quill、 Slate.js、CKEditor、TIngMCE 进行二次开发。...编辑引擎 & 计算引擎 独立的文档模型,管理文档 Model 与 View 之间的映射 2.布局引擎 重新实现渲染布局引擎,代替浏览器默认布局实现 3.协同引擎 多人协作操作OT,支撑多人同时在线协作编辑 4.

    4.7K30

    ckeditor5-基础使用

    ckeditor5-基础使用 其实ckeditor是一个老项目了,但是相对于其他的编辑器,它是一直在保持更新的,目前最新的版本就是ckeditor 5,这里以经典编辑器样式(Classic Editor...]/[distribution]/ckeditor.js"> 其中的version.number,distribution需要替换成你要使用的版本号和编辑器类型,版本号请到官网查询,编辑器类型可以参照下面...-build-decoupled-document 3.zip包下载 点击下载ckeditor压缩包 二、基础使用 快速在自己的网页里放入编辑器还是比较简单的,只需要以下一个步骤: 1、html中添加一个元素用来放编辑器.../ckeditor5/11.1.1/classic/ckeditor.js"> 3、调用ClassicEditor.create方法,来初始化编辑器   ClassicEditor...( document.querySelector( '#editor' ) )  .catch( error => { console.error( error ); } );   4

    3.7K20

    FCK编辑器使用详解(PHP版本)

    前些日子(很久了),胡乱捣鼓了一番FCK编辑器的使用,结果还是没有捣鼓明白个所以然(今天又想起来fck的强大,我以前见到的只是它的冰山一角) 今天是按照一下过程完全配置了一遍,并且我也通过测试了。...我用的是fckeditor_2.6.6.0.zip(多国语言版本)(下载地址:http://ckeditor.com/) 一、解压fckeditor文件夹下除了: fckeditor.js fckeditor.php...fckconfig.js fckedtior_php4.phpfckeditor_php5.php fckstyles.xml fcktemplates.xml 和editor文件夹 其他的都删除...请选择小于1024K的图片并重新上传.” );break; 配置自己的特别的工具栏(fck功能太强大了,其实我们很多都没有用到,所有可以把工具栏精简一些) 找到fckeditor/fckeditorconfig.php...=400;          //*****************设置编辑器高度像素或者百分比 $FCK->Create();           //*****************创建一个实例

    2K60

    常见问题 - 构建文档 - ckeditor5中文文档

    为什么编辑器会过滤掉我的内容(样式,类,元素)? config.allowedContent = true在哪里? 不像CKEditor 4, CKEditor 5实现了自定义数据模型。...由于编辑器中使用的自定义数据模型,源代码模式在CKEditor 5中没有意义。...但是,要在安装CKEditor 5完全启用图像上传,你需要配置一个可用的上传适配器(Easy Image或CKFinder适配器)或实现并使用您自己的上传适配器。...如何获取一个全功能的编辑器构建版本(就像CKEditor 4的“Full Package”)? 我们相信每个编辑器都应该服务于它的目的。...包含未使用的功能毫无意义,因为它们会增加编辑器的大小并使网站变得更重。 这就是为什么我们不提供类似于我们在CKEditor 4中提供的完整编辑器包的原因。

    5.5K40
    领券