I am using ckeditor 5 for a text area in a popup, my configuration file is as follows:
import {
ClassicEditor,
Autoformat,
Bold,
Italic,
Underline,
BlockQuote,
Essentials,
FindAndReplace,
Font,
Heading,
Indent,
IndentBlock,
Link,
List,
Mention,
Paragraph,
PasteFromOffice,
Table,
TableColumnResize,
TableToolbar,
TextTransformation,
HtmlEmbed,
CodeBlock,
RemoveFormat,
Code,
SpecialCharacters,
HorizontalLine,
PageBreak,
TodoList,
Strikethrough,
Subscript,
Superscript,
Highlight,
Alignment,
FileRepository,
Image,
ImageToolbar,
ImageCaption,
ImageStyle,
PictureEditing,
ImageUpload,
BalloonToolbar
} from ‘ckeditor5’;
// CustomUploadAdapter sử dụng hàm uploadFiles
class MyUploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return this.loader.file
.then(file => {
return new Promise((resolve, reject) => {
// Tạo một input ảo để lấy file từ loader
const filesInput = {
files: [file]
};
debugger
// Gọi hàm upload và xử lý kết quả
Utils.uploadFiles(filesInput)
.then(data => {
if (data.length > 0) {
resolve({
default: data // URL của ảnh đã được upload
});
} else {
reject(‘Upload failed’);
}
})
.catch(error => {
reject(error);
});
});
});
}
abort() {
// Logic để hủy bỏ upload nếu cần
}
}
// Plugin tùy chỉnh để sử dụng CustomUploadAdapter
function MyCustomUploadAdapterPlugin(editor) {
editor.plugins.get(‘FileRepository’).createUploadAdapter = (loader) => {
return new MyUploadAdapter(loader);
};
}
ClassicEditor
.create(document.querySelector(‘#BlogContent’), {
plugins: [
Autoformat,
BlockQuote,
Bold,
Essentials,
FindAndReplace,
Font,
Heading,
Indent,
IndentBlock,
Italic,
Link,
List,
Mention,
Paragraph,
PasteFromOffice,
Table,
TableColumnResize,
TableToolbar,
TextTransformation,
Underline,
HtmlEmbed,
CodeBlock,
RemoveFormat,
Code,
SpecialCharacters,
HorizontalLine,
PageBreak,
TodoList,
Strikethrough,
Subscript,
Superscript,
Highlight,
Alignment,
FileRepository,
MyCustomUploadAdapterPlugin,
Image,
ImageToolbar,
ImageCaption,
ImageStyle,
PictureEditing,
ImageUpload,
BalloonToolbar
],
toolbar: {
items: [
‘undo’, ‘redo’, ‘|’, ‘bold’, ‘italic’, ‘|’, ‘|’,
‘heading’,
‘|’,
‘fontSize’, ‘fontFamily’, ‘fontColor’, ‘fontBackgroundColor’,
‘alignment’, ‘numberedList’, ‘bulletedList’, ‘|’, ‘insertTable’, ‘link’, ‘imageUpload’,
{
label: ‘Insert’,
icon: ‘plus’,
items: [‘highlight’, ‘blockQuote’, ‘mediaEmbed’, ‘codeBlock’, ‘htmlEmbed’]
},
],
shouldNotGroupWhenFull: true
},
image: {
toolbar: [
‘imageStyle:inline’,
‘imageStyle:block’,
‘imageStyle:side’,
‘|’,
‘toggleImageCaption’,
‘imageTextAlternative’,
],
},
link: {
addTargetToExternalLinks: true,
defaultProtocol: ‘https://’,
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
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’ },
{ model: ‘heading3’, view: ‘h3’, title: ‘Heading 3’, class: ‘ck-heading_heading3’ },
{ model: ‘heading4’, view: ‘h4’, title: ‘Heading 4’, class: ‘ck-heading_heading4’ },
{ model: ‘heading5’, view: ‘h5’, title: ‘Heading 5’, class: ‘ck-heading_heading5’ },
{ model: ‘heading6’, view: ‘h6’, title: ‘Heading 6’, class: ‘ck-heading_heading6’ }
]
},
table: {
contentToolbar: [‘tableColumn’, ‘tableRow’, ‘mergeTableCells’],
},
alignment: {
options: [‘left’, ‘center’, ‘right’, ‘justify’]
},
fontSize: {
options: [
8,
10,
12,
14,
16,
18,
20,
‘default’,
‘large’,
‘huge’
]
}
})
.then(editor => {
window.editor = editor;
const styleTag = document.querySelector(‘style’);
// Nếu thẻ tồn tại
if (styleTag) {
// Thêm dòng CSS mới vào nội dung của thẻ
styleTag.textContent += `
.ck-body-wrapper {
z-index: 10000;
}
`;
} else {
// Nếu thẻ không tồn tại, tạo một thẻ mới và thêm nó vào tài liệu
const style = document.createElement(‘style’);
style.type = ‘text/css’;
style.appendChild(document.createTextNode(`
.ck-body-wrapper {
z-index: 10000;
}
`));
document.head.appendChild(style);
}
})
.catch(error => {
console.error(error);
});
After running, it displays like this:
enter image description here
But when I press Merge cells, the escapeCssMeta command runs and gives the following error:
enter image description here
Can anyone help me fix this so I can merge the cells together?
Try to merge cells, it does not working
Hiếu lê is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.