开胃菜

CKEditor 5 为 nuxt apps 编辑器. 组件包括所有免费的插件( CKFinder 除外, 而是使用的简单上传适配器)

所需资源

yarn add nuxt
npm i nuxt

构成部分整合

yarn add @blowstack/ckeditor-nuxt
npm install --save @blowstack/ckeditor-nuxt

包含的插件列表

• 对齐,
• 自动图像,
• 自动格式化,
• 自动链接,
• 块引文,
• 大胆,
• 云服务,
• 代码,
• 密码锁,
• 要点,
• 字体背景颜色,
• 字体颜色,
• 字体家庭,
• 字体大小,
• 标题,
• 重点,
• 水平线,
• 图像,
• 图像标题,
• 图像插入,
• 图像回复,
• 图像样式,
• 图像工具栏,
• 图像加载,
• 缩进,
• 缩进Block,
• 意大利语,
• 链接,
• 链接图像,
• 名单,
• 李斯泰尔,
• 马蒂,
• 媒体Embed,
• MediaEmbed工具栏,
• 页面崩溃,
• 段落,
• 从办公室粘贴,
• 删除格式,
• 简单装入Adapter,
• 特别嘉宾,
• 特种战士箭头,
• 特殊特点,
• 特殊特征,
• 拉丁语特辑,
• 数学,
• 特别章节文本,
• 突破,
• 下标,
• 上标,
• 表格,
• 表单收益,
• 表财产,
• 桌子工具栏,
• 文本转换,
• 标题,
• 托多莱斯特,
• 下划线,
• 单词

使用量

<template>
  <client-only placeholder="loading...">
    <ckeditor-nuxt v-model="contentHolder" :config="editorConfig"  />
  </client-only>
</template>

<script>
export default {
  components: {
    'ckeditor-nuxt': () => { if (process.client) { return import('@blowstack/ckeditor-nuxt') } },
  },
  data() {
    return {
      editorConfig: {
        simpleUpload: {
          uploadUrl: 'path_to_image_controller',
          headers: {
            'Authorization': 'optional_token'
          }
        }
      },
      contentHolder: ""
    }
  }
}
</script>

自定义

用于定制编辑器 Config 对象 . 它和默认的ckeditor 5.一样有效. 更多信息 https://ckeditor.com/docs/ckeditor5/latest/api/module core editor editorconfig-EditorConfig.html 互联网档案馆的存檔,存档日期2014-12-22

例如, 如果您想要禁用标题插件 :

editorConfig: {
    removePlugins: ['Title'],
}

您也可以改变任何插件的行为 。 对于标题插件, 您可以更改例如占位符 :

editorConfig: {
    title: {
        placeholder: 'h1'
    }
}