源码地址:
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);