ckeditorのインストールがエラーになる。
$ composer require unisharp/laravel-ckeditor
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Root composer.json requires unisharp/laravel-ckeditor ^4.7 -> satisfiable by unisharp/laravel-ckeditor[4.7.2].
- unisharp/laravel-ckeditor 4.7.2 requires illuminate/support ~5.0 -> found illuminate/support[v5.0.0, ..., 5.8.x-dev] but these were not loaded, likely because it conflicts with another require.
Installation failed, reverting ./composer.json and ./composer.lock to their original content.
これでいけた。
not install in laravel 7x · Issue #48 · UniSharp/laravel-ckeditor · GitHub
$ composer require ckeditor/ckeditor
publicの下にコピーする
【Laravel7,8】リッチエディタ(ckeditor)を導入 | Zakkuriブログ
$ cp -rp vendor/ckeditor/ckeditor/ public/
これだけでいけた。
要るものだけ残す。
Laravel で エディタ(ckeditor)を実装する ①｜NANASE｜note
例
<script>
CKEDITOR.replace('description',{
extraPlugins:'codesnippet',
codeSnippet_theme:'dark',
height:'370px',
//以下を追加する
removeButtons:'Unlink,Anchor, NewPage,DocProps,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Find,Replace,SelectAll,Scayt,RemoveFormat,Outdent,Indent,Blockquote,Styles,About'
});
</script>
Class Config (CKEDITOR.config) - CKEditor 4 API docs
というか、CDNで1行でいける。
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script> <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace('send_expound_data');
</script>
これでカスタマイズできる
CKEditor4の導入とカスタマイズ方法 - ryotaku's Tech Blog
CKEditorをCDNから利用する時のカスタマイズ方法 - Scrapdiary
サンプル
'''
<script src="//cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.config.width = 600;
CKEDITOR.config.height = 500;
CKEDITOR.replace( 'id_no_namae', {
toolbarGroups: [
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] },
'/',
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] }
],
removeButtons:
'Save,NewPage,ExportPdf,Preview,Print,Templates,Cut,Copy,Find,SelectAll,Scayt,' +
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CopyFormatting,' +
'RemoveFormat,BidiRtl,BidiLtr,Language,Link,Unlink,Anchor,Flash,PageBreak,Iframe,About,Source,' +
'Paste,PasteText,PasteFromWord',
});
</script>
''''
ただ、なんとckeditor5だと、これだけでいける
しかも今っぽいデザイン
<script src="https://cdn.ckeditor.com/ckeditor5/27.0.0/classic/ckeditor.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/27.0.0/classic/ckeditor.js"></script> <script> ClassicEditor .create( document.querySelector( '#id_no_namae' ) ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } ); </script>
Class ClassicEditor (editor-classic/classiceditor~ClassicEditor) - CKEditor 5 API docs
高さの変え方
ckeditor5 - How to set the height of CKEditor 5 (Classic Editor) - Stack Overflow
.ck-editor__editable_inline {
min-height: 400px;
}
インストールしたパッケージを削除しておく
$ composer remove ckeditor/ckeditor
無問題 Composer でパッケージの削除は composer remove で問題ない | Bulblub
brタグは諸悪の根源らしい
customize enterMode to BR · Issue #617 · ckeditor/ckeditor5 · GitHub
ボタンの表示制御オプション
WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説 | エス技研
Configuration - CKEditor 5 Documentation
表示したいやつを toolbar で指定、
<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
} )
.catch( error => {
console.log( error );
} );
</script>
または表示したくないやつをこれで指定
ClassicEditor
.create( document.querySelector( '#editor' ), {
removePlugins: [ 'Heading', 'Link' ],
toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
} )
.catch( error => {
console.log( error );
} );
サンプル
ckeditor5-custom-build-with-code-block - npm
toolbar: { items: [toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'indent', 'outdent', '|', 'codeBlock', 'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo', ] }, image: { toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ] }, table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ] },
removePlugins が効かないと思ったら、依存関係にあるやつをすべて削除しないといけないみたい
html - CKEDITOR 5 - Remove "Insert Media" option from ClassicEditor - Stack Overflow
removePlugins: [ 'Link','CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
ちなみに、以下で自分が使えるプラグインを確認できる。
console.log(ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName));
(24) ["Essentials", "CKFinderUploadAdapter", "Autoformat", "Bold", "Italic", "BlockQuote", "CKFinder", "CloudServices", "EasyImage", "Heading", "Image", "ImageCaption", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "Link", "List", "MediaEmbed", "Paragraph", "PasteFromOffice", "Table", "TableToolbar", "TextTransformation"]
0: "Essentials"
1: "CKFinderUploadAdapter"
2: "Autoformat"
3: "Bold"
4: "Italic"
5: "BlockQuote"
6: "CKFinder"
7: "CloudServices"
8: "EasyImage"
9: "Heading"
10: "Image"
11: "ImageCaption"
12: "ImageStyle"
13: "ImageToolbar"
14: "ImageUpload"
15: "Indent"
16: "Link"
17: "List"
18: "MediaEmbed"
19: "Paragraph"
20: "PasteFromOffice"
21: "Table"
22: "TableToolbar"
23: "TextTransformation"
length: 24
