vue 中 ckeditor5 如何隐藏工具条

ck4有toolbarStartupExpanded参数可以直接配置,但是ck5中这个参数无效,到处找资料,解决不了。于是爬梯看了官方文档,发现这个参数在ck5中已经放弃。

很不爽,于是直接粗暴修改css来解决。

就是这个css

方法如下:

<template>
  <div class="home">
    <div :class="inEditor">
      <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
export default {
  name: 'Home',
  data () {
    return {
      inEditor: 'in-editor',
      editor: ClassicEditor,
      editorData: '',
      editorConfig: {
        placeholder: '请输入内容....'
      }
    }
  }
}
</script>
<style>

.in-editor .ck-toolbar {
  display: none !important;
}

</style>

 然后通过控制data参数“inEditor”在控制什么时候显示工具条。另外,记得在ck外包一层div,然后仅对该div下的ck工具条进行样式修改。这样如果一个页面有多个ck创建,就不会影响其他,也可以单独设置。

当然,如果你不是用经典模式,可以使用内联模式,ck5就会嵌入一个扁平编辑器,在没有获得焦点的时候,就不显示工具栏。只是工具栏是浮动在编辑框上方了。

安装内联模式:npm install @ckeditor/ckeditor5-build-inline --save

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值