ckeditor5 全屏功能

RT 在ckeditor4的时候我们可以在配置中添加一个属性 ‘maximize’ 就可以有个全屏或者缩小成默认的的按钮.
但是在ckeditor5的时候,这个功能被废弃了,笔者也找了一大堆资料

前两个都是开发者关于这个问题的解答

在此使用的时候,也会遇到在一个编辑器里使用多种文本模式报错的问题,详情解决方法可以看我上一篇文章这里不再过多赘述.

准备工作

1.下载一份源码

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
npm i

2.在src下新建一个文件名字随便取

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ImageFullBig from '../icons/fullscreen-big.svg';
import ImageFullCancel from '../icons/fullscreen-cancel.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import '../css/style.css';export default class FullScreen extends Plugin {init() {const editor = this.editor;editor.ui.componentFactory.add( 'fullScreen', locale => {const view = new ButtonView( locale );let etat = 0; //view.set( {label: '全屏',icon: ImageFullBig,tooltip: true} );view.on( 'execute', () => {if ( etat == 1 ) {editor.sourceElement.nextElementSibling.removeAttribute( 'id' );document.body.removeAttribute( 'id' );view.set( {label: '全屏',icon: ImageFullBig,tooltip: true} );etat = 0;} else {editor.sourceElement.nextElementSibling.setAttribute( 'id', 'fullscreeneditor' );document.body.setAttribute( 'id', 'fullscreenoverlay' );view.set( {label: '默认',icon: ImageFullCancel,tooltip: true} );etat = 1;}} );return view;} );}
}

将这份代码复制进去注意上面引用的包不用继续下载不然会报错他在npm中已经有了
都完成就可以npm打包了
上面的css以及图标我已经传入gitee里了
点击跳转gitee

ckeditor5 全屏功能相关推荐

vue点击网页全屏_vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能方式一:js实现全屏代码如下: 全屏 export default { name: "index", data(){ return{ fullscr ...
android中布局全屏,怎么在Android 应用中实现一个全屏与非全屏功能
怎么在Android 应用中实现一个全屏与非全屏功能发布时间:2020-12-04 17:31:45 来源:亿速云阅读:135 作者:Leah 怎么在Android 应用中实现一个全屏与非全屏功能 ...
Fiori应用全屏功能的实现 - fullscreen
Sent: Friday, June 12, 2015 2:57 PM Subject: Full Screen Button on Chart Container Chart上的全屏功能不是UI5提 ...
浏览器的全屏功能小结
原文地址: 浏览器的全屏功能小结背景浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求. 对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击 ...
全屏功能-实现全屏-图标切换
目标:添加一个按钮,实现全屏网页全屏切换实现方法:浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen(),不过有兼容性问题,所以改用 ...
浏览器全屏功能 icon图标设置
如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器f11. 一.icon图标选择: 这里偷懒使用的阿里巴巴矢量图标库,当然也可以自己找ui设计一个,地址:icon图标库,icon相关代码如下 ...
js 控制浏览器实现全屏和退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
设置浏览器横屏可行性测试，附带浏览器全屏功能
输入法问题: 1.QQ浏览器.UC浏览器可通过标签设置横屏(这种模式下输入法也是横屏状态) <meta name='full-screen' content='true' /><me ...

ckeditor5 全屏功能

准备工作

1.下载一份源码

2.在src下新建一个文件名字随便取

ckeditor5 全屏功能相关推荐

最新文章

热门文章

ckeditor5 全屏功能

准备工作

1.下载一份源码

2.在src下新建一个文件 名字随便取

ckeditor5 全屏功能相关推荐

最新文章

热门文章

2.在src下新建一个文件名字随便取