・CDNのverで入れる

・クラシックを利用

・simpleUploader

・Config設定

・importmap

・simpleUplode

・JS、非同期通信

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css">

initialData: `<?php echo $txts['value']; ?>`, // PHPから初期データを渡す

simpleUpload: {

uploadUrl: '<?= base_url("/upload/image_upload/$room_id01") ?>',//ここでアップロード処理を書いたコントローラに飛ぶ
withCredentials: true,

headers: {
'X-CSRF-TOKEN': 'CSRF-Token',
Authorization: 'Bearer <JSON Web Token>'
}

<script type="importmap">
{
"imports": {
"react": "/node_modules/react/umd/react.production.min.js",
"react-dom": "/node_modules/react-dom/umd/react-dom.production.min.js"
}
}
</script>

import React from 'react';
import ReactDOM from 'react-dom'; というように使える

<script type="importmap">
{
"imports": {
"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js",
"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.0.0/"
}
}
</script>

・使わなくてよい

<link rel="stylesheet" href="//cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.css">

$page_contents['value']=set_value('page_contents', isset($result['page_contents']) ? htmlspecialchars_decode($result['page_contents']) : '少々お待ちくださいませ',false);

<script type="importmap">
{
"imports": {
"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.0.0/ckeditor5.js",
"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.0.0/"
}
}
</script>

const editorConfig01 = {

...

..

initialData: `<?php echo $page_contents01['value']; ?>

...

ClassicEditor.create(document.querySelector('#editor01'), editorConfig01)
.catch(error => {
console.error('通信に失敗しました', error);
});

$page_contents01['id'] = 'editor01';

<script type="module">


import {
ClassicEditor,
AccessibilityHelp,
Autoformat,
AutoImage,
Autosave,
BalloonToolbar,BlockQuote,BlockToolbar,
Bold,CloudServices,
Essentials,
FullPage,
GeneralHtmlSupport,
Heading,
HtmlComment,HtmlEmbed,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
Paragraph,
SelectAll,
ShowBlocks,
SourceEditing,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
TodoList,
Underline,
Undo,
SimpleUploadAdapter
} from 'ckeditor5';

import translations from 'ckeditor5/translations/ja.js';

const editorConfig = {
toolbar: {
items: [
'undo',
'redo',
'|',
'bold',
'uploadImage',
'insertImageViaUrl',
'link',
'|',
'sourceEditing',
'showBlocks',
'|',
'heading',
'|',
'insertTable'
],
shouldNotGroupWhenFull: false
},
plugins: [
SimpleUploadAdapter,
AccessibilityHelp,
Autoformat,
AutoImage,
Autosave,
BalloonToolbar,
BlockQuote,
BlockToolbar,
Bold,
CloudServices,
Essentials,
FullPage,
GeneralHtmlSupport,
Heading,
HtmlComment,
HtmlEmbed,
ImageBlock,
ImageCaption,
ImageInline,
ImageInsertViaUrl,
ImageResize,
ImageStyle,
ImageTextAlternative,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Italic,
Link,
LinkImage,
List,
ListProperties,
Paragraph,
SelectAll,
ShowBlocks,
SourceEditing,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
TextTransformation,
TodoList,
Underline,
Undo
],
balloonToolbar: ['bold', 'italic', '|', 'link', '|', 'bulletedList', 'numberedList'],
blockToolbar: ['bold', '|', 'link', 'insertTable', '|',],
heading: {
options: [
{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph'
},

{
model: 'heading3',
view: 'h3',
title: 'Heading 3',
class: 'ck-heading_heading3'
},

]
},
htmlSupport: {
allow: [
{
name: /^.*$/,
styles: true,
attributes: true,
classes: true
}
]
},
image: {
toolbar: [
'toggleImageCaption',
'imageTextAlternative',
'|',
'imageStyle:inline',
'imageStyle:wrapText',
'imageStyle:breakText',
'|',
'resizeImage',
'imageStyle:full',
'imageStyle:side'
],

upload: {
types: ['jpg','jpeg', 'png', 'gif', 'bmp', 'webp'],
panel: {
items: [
'insertImage',
'resizeImage'
]
}
}
},

simpleUpload: {
// The URL that the images are uploaded to.

uploadUrl: '<?= base_url("/upload/image_upload/$ataiwokaku") ?>',//ここでアップロード処理を書いたコントローラに飛ぶ

// Enable the XMLHttpRequest.withCredentials property.
withCredentials: true,

// Headers sent along with the XMLHttpRequest to the upload server.
headers: {
'X-CSRF-TOKEN': 'CSRF-Token',
Authorization: 'Bearer <JSON Web Token>'
/*'room_id': '//php echo $room_id01 ?>' // Pass room_id dynamically*/
}
},
beforeSend: (xhr, formData) => {
formData.append('room_id', '<?= $room_id01 ?>'); // formDataに`room_id`を追加
},

initialData: `<?php echo $tuyomi_txts['value']; ?>`, // PHPから初期データを渡す
language: 'ja',

link: {
addTargetToExternalLinks: true,
defaultProtocol: '',
decorators: {
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
menuBar: {
isVisible: true
},
placeholder: 'テキストを入力してください',
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
},
translations: [translations]
};

ClassicEditor.create(document.querySelector('#editor'), editorConfig)
.catch(error => {
console.error('通信に失敗しました', error);
});

</script>

upload: {
types: ['jpg','jpeg', 'png', 'gif', 'bmp', 'webp'],

simpleUpload: {
//アップロード先のURL
uploadUrl: '<?= base_url("/upload/image_guide_upload") ?>',//ここでアップロード処理を書いたコントローラに飛ぶ

// Enable the XMLHttpRequest.withCredentials property.
withCredentials: true,

// Headers sent along with the XMLHttpRequest to the upload server.
headers: {
'X-CSRF-TOKEN': 'CSRF-Token',
Authorization: 'Bearer <JSON Web Token>'
}
},

...

..

uploadUrl: '<?= base_url("/upload/image_upload/$ataiwokaku") ?>',

upload: {
types: ['jpg','jpeg', 'png', 'gif', 'bmp', 'webp'],

ClassicEditor.create(document.querySelector('#editor'), editorConfig)
.catch(error => {
console.error('通信に失敗しました', error);
});

const editorConfig = {
toolbar: {
items: [ 'undo', 'redo', '|', 'bold', 'uploadImage', ],