@kukejs/kkeditor-build-all

@kukejs/kkeditor-build

自定义构建编辑器的包

集成开源插件的预定义编辑器

本地调试

// 执行一个脚本
lerna exec --scope @kukejs/kkeditor-build-all -- yarn run start
或
// 执行 npm 命令
lerna run --scope @kukejs/kkeditor-build-all start

使用方式

此插件中集成了不同的编辑器类型

经典编辑器

// 引入编辑器
import { ClassicEditorAll } from ‘@kukejs/kkeditor-build-all

// 链接引入
<script src="https://kuke-utils.kuke99.com/common/js/ckeditor/35.2.0/all/ckeditor.js" defer></script>

const { ClassicEditorAll } = CustomEditor

// 创建编辑器在 plugins 中引入插件
ClassicEditorAll
    .create( document.querySelector( '#editor' ))
    .then( editor => {
			window.editor = editor;
		})
		.catch( error => {
		});

内联编辑器

// 引入编辑器
import { InlineEditorAll } from ‘@kukejs/kkeditor-build-all

// 链接引入
<script src="https://kuke-utils.kuke99.com/common/js/ckeditor/35.2.0/all/ckeditor.js" defer></script>

const { InlineEditorAll } = window.CustomEditor

// 创建编辑器在 plugins 中引入插件
InlineEditorAll
    .create( document.querySelector( '#editor' ))
    .then( editor => {
			window.editor = editor;
		})
		.catch( error => {
		});

多根编辑器

// 引入编辑器
import { MultiRootEditorAll } from ‘@kukejs/kkeditor-build-all

// 链接引入
<script src="https://kuke-utils.kuke99.com/common/js/ckeditor/35.2.0/all/ckeditor.js" defer></script>

const { MultiRootEditorAll } = window.CustomEditor

// 创建编辑器在 plugins 中引入插件
InlineEditorAll
    .create({
      header: document.getElementById('header')
      main: document.getElementById('main')
      footer: document.getElementById('footer')
    })
    .then( editor => {
			window.editor = editor;

      // 把工具栏挂在到 DOM 节点上
      const toolbarContainer = document.getElementById('toolbar')!
      toolbarContainer.appendChild(element)

      // 添加新的节点
      editor.addRoot('content', { data: '<p>content</p>' })
      // 监听添加节点的事件回调
      editor.on('addRoot', ( evt, root ) => {
        const editableElement = editor.createEditable( root )

        document.getElementById('editor')!.appendChild( editableElement )
      })
		})
		.catch( error => {
		});

工具栏配置

defaultConfig = {
  toolbar: {
    items: [
      'heading',
      '|',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
      'emphasis',
			'...'
    ],
    shouldNotGroupWhenFull: true
  },
  language: 'zh-cn',
	// 图片
  image: {
    toolbar: [
      'imageTextAlternative',
      'imageStyle:inline',
      'imageStyle:block',
      'imageStyle:side',
      'linkImage',
      'verticalAlign'
    ]
  },
	// 表格
  table: {
    contentToolbar: [
      'tableColumn',
      'tableRow',
      'mergeTableCells',
      'tableCellProperties',
      'tableProperties'
    ]
  },
	// 字体
  fontSize: {
    options: [
      'default',
      {
        title: '12',
        model: '12px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '14',
        model: '14px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '16',
        model: '16px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '18',
        model: '18px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '20',
        model: '20px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '24',
        model: '24px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '36',
        model: '36px',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      }
    ],
    supportAllValues: true
  },
  fontFamily: {
    options: [
      'default',
      {
        title: '微软雅黑',
        model: 'Microsoft YaHei, Helvetica Neue, PingFang SC, sans-serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '苹果苹方',
        model: 'PingFang SC, Microsoft YaHei, sans-serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '宋体',
        model: 'simsun, serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '仿宋',
        model: 'FangSong, serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: '黑体',
        model: 'SimHei, sans-serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: 'Arial',
        model: 'Arial, Helvetica, sans-serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      },
      {
        title: 'Verdana',
        model: 'Verdana, Geneva, sans-serif',
        upcastAlso: [],
        view: {
          name: 'span',
          priority: 7
        }
      }
    ],
    supportAllValues: true
  },
  fontColor: {
    colors,
    columns: 9
  },
  wordCount: {
    container: document.getElementById('word-count')!,
    displayWords: false
  }
}