ckeditor5でfontを使いたかったが、npmではうまく出来なかった。
というわけで、builderで作ったjavascriptをローカルに保存する方法にした。
というか、こっちの方が良い気がする。
CKEditor 5 online builder | Rich text editor of tomorrow
欲しい機能をクリックしてダウンロードをする。
ダウンロードしたファイル群の中の build の中にある ckeditor.js をサーバ上に配置して読み込んでやるだけ。
具体的にはCDNのjavascriptを読み込んでいた箇所を、
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>ダウンロードした ckeditor.js に変えるだけ。
あとは、
ClassicEditor
.create( ), {
}
の中の toolbar に欲しいものを加えるだけ。
ClassicEditor
.create( document.querySelector( '.editor' ), {
toolbar: {
items: [
'bold',
'italic',
'underline',
'strikethrough',
'fontSize',
'fontColor',
'fontBackgroundColor',
'highlight',
'removeFormat',
'|',
'blockQuote',
'codeBlock',
'code',
'specialCharacters',
'subscript',
'superscript',
'MathType',
'ChemType',
'|',
'-',
'insertTable',
'alignment',
'outdent',
'indent',
'horizontalLine',
'bulletedList',
'numberedList',
'|',
'link',
'imageUpload',
'mediaEmbed',
'|',
'undo',
'redo'
],
shouldNotGroupWhenFull: true
},
language: 'ja',
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: g4j6quoe3246-u3o8g07r4afz' );
console.error( error );
} );
// ]]>
