欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > 【element-tiptap】如何将编辑器初始化为全屏显示?

【element-tiptap】如何将编辑器初始化为全屏显示?

2025/2/9 3:41:57 来源:https://blog.csdn.net/weixin_45855469/article/details/142787444  浏览:    关键词:【element-tiptap】如何将编辑器初始化为全屏显示?

源码地址:
https://github.com/Leecason/element-tiptap
我们在学习一个项目的代码的时候,最好的学习方式就是带着问题学习。就像题目的这个小问题,今天就一起来探索这一课题吧!
首先看下项目启动后的页面
在这里插入图片描述
这个小符号明显就是控制编辑器缩放的。
当前的路由是这个 demos/views/Simple.vue
其中有一个 Fullscreen 配置项,看名字咱们就能看出来是缩放控制
我们点进去看一下它的定义

import type { Editor } from '@tiptap/core';
import { Extension } from '@tiptap/core';
import FullscreenCommandButton from '@/components/MenuCommands/FullscreenCommandButton.vue';const Fullscreen = Extension.create({name: 'fullscreen',addOptions() {return {...this.parent?.(),button({ editor }: { editor: Editor }) {return {component: FullscreenCommandButton,};},};},
});export default Fullscreen;

它是使用了tiptap 提供的 Extension.create 方法,创建出来的扩展,对应的组件呢,就是 FullscreenCommandButton。这个组件的定义稍微有点长,主要看控制缩放的属性是怎么来的

const isFullscreen = inject('isFullscreen', false);
const toggleFullscreen = inject('toggleFullscreen');

可以看到,这个属性是通过 inject 注入的,inject 是 Vue3 中,接收祖先组件数据的方法,发出数据的祖先组件需要使用 provide 发出数据。那么我们就在全局搜一下 isFullscreen 属性还在哪里出现好了
就是在 src/components/ElementTiptap.vue 里面

// provide定义子组件可以访问的数据
provide('isFullscreen', isFullscreen);
provide('toggleFullscreen', toggleFullscreen);

那么我们只需要,把 isFullscreen 的默认值改为 true,即可实现编辑器初始化就显示全屏效果啦

const isFullscreen = ref(true);

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com