@mokette/ckeditor5-custom-build v0.0.6

Klood ckeditor5 custom editor build

Based on Ckeditor5 classic build from github, Ckeditor5 classic build from ckeditor doc

README.MD du ckeditor5-classic-build

Extract from package.json of ckeditor5-classic-build:

   {
    "author": "CKSource (http://cksource.com/)",
    "license": "GPL-2.0-or-later",
    "homepage": "https://ckeditor.com/ckeditor-5",
    "bugs": "https://github.com/ckeditor/ckeditor5/issues",
    "repository": {
      "type": "git",
      "url": "https://github.com/ckeditor/ckeditor5.git",
      "directory": "packages/ckeditor5-build-classic"
    },
  }

Based on Ckeditor5 classic build and add some base plugins : Alignment, Base64UploadAdapter, Code, Font, HorizontalLine, ImageResize, Strikethrough, Subscript, Superscript, Underline

and add some custom plugin of our own: Variable, Links, Buttons

Start in localhost environment :

• requirements : -- node >= 12.0.0 -- npm >= 5.7.1

1. Launch
2. Build
3. Publish
4. Config

Launch

go to custom-editor repository

$ cd klood/wysiwyg/custom-editor

launch npm script to run builder with watcher activate

$ npm run build-dev

open sample/index.html file in your browser for testing editor

Build

only if one or many custom-plugin has been update

pull the custom-plugin repository from gitlab

then go to the custom-plugin repository and copy the needed custom-plugin folder to the src folder of the custom-editor repository

if you add a new custom-plugin, remember to add it in the src/ckeditor.js file and initiate it (load, toolbar declaration, config, ...)

if only need a build launch

$ npm run build

Publish

before publishing package you'll need to be log in to npm (if you don't have an account, create one at npmjs.org) then log in to npm

$ npm login

and enter your credentials

before publish don't forget to modify the package.json file :

• modify the name section by replacing @used_username by @your_username
• update the version section because can't publish an already existing version

then publish the package

$ npm publish --access=public

then the package will be accessible using npm "@your_username/ckeditor5-custom-build" :

$ npm install @your_username/ckeditor5-custom-build

or

$ npm install @your_username/ckeditor5-custom-build:version

or using package.json file :

"@your_username/ckeditor5-custom-build": "version",

Config

config custom plugin :

• Variable , simple configuration object, used to insert custom data from backend to editor :

{
    variableConfig: {
		types: [
			{
				name: 'name', //item name in dropdown menu from toolbar
				label: 'label' //item label display in editor

			},
			...
		],
		label: 'Variable label' //label in toolbar
	}
}

• Links , simple configuration object, used to insert custom link from backend to editor :

{
    linksConfig: {
		types: [
			{
				name: 'join', //item name in dropdown menu from toolbar
				label: 'label' //item label display in editor and used for href attribute

			},
			...
		],
		label: 'Links label' //label in toolbar
	},
}

• Buttons , simple configuration object, used to insert custom link from backend to editor with additional class to make it look like a block button :

  {
     buttonsConfig: {
  		types: [
  			{
  				name: 'welcome', //item name in dropdown menu from toolbar
  				label: 'label', //item label display in editor and used for href attribute
  				kind: 'app/booking' //item kind used for additional class to get proper color
  
  			},
  			...
  		],
  		label: 'Buttons label'
  	},
  }