Fix Editor.js plugin loading errors in blog admin
- Add multiple fallback global variable names for Editor.js plugins - Add debug logging to track plugin availability - Add error handling for editor initialization - Ensure at least paragraph tool is available before initializing - Fix ReferenceError: List is not defined when opening post modal
This commit is contained in:
@@ -280,74 +280,147 @@ function initEditor(savedContent = null) {
|
|||||||
editor.destroy();
|
editor.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if Editor.js and plugins are loaded
|
||||||
|
if (typeof EditorJS === 'undefined') {
|
||||||
|
console.error('EditorJS is not loaded');
|
||||||
|
showStatus('Editor failed to load. Please refresh the page.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Map plugin names to their global variables with multiple possible names
|
||||||
|
const HeaderClass = window.Header || window.EditorJSHeader;
|
||||||
|
const ParagraphClass = window.Paragraph || window.EditorJSParagraph;
|
||||||
|
const ListClass = window.List || window.EditorjsList || window.EditorJSList;
|
||||||
|
const LinkToolClass = window.LinkTool || window.Link || window.EditorJSLink;
|
||||||
|
const ImageToolClass = window.ImageTool || window.Image || window.EditorJSImage;
|
||||||
|
const EmbedClass = window.Embed || window.EditorJSEmbed;
|
||||||
|
const CodeToolClass = window.CodeTool || window.Code || window.EditorJSCode;
|
||||||
|
const QuoteClass = window.Quote || window.EditorJSQuote;
|
||||||
|
const TableClass = window.Table || window.EditorJSTable;
|
||||||
|
const MarkerClass = window.Marker || window.EditorJSMarker;
|
||||||
|
|
||||||
|
// Log available plugins for debugging
|
||||||
|
console.log('Editor.js plugins availability:', {
|
||||||
|
EditorJS: typeof EditorJS,
|
||||||
|
Header: typeof HeaderClass,
|
||||||
|
Paragraph: typeof ParagraphClass,
|
||||||
|
List: typeof ListClass,
|
||||||
|
LinkTool: typeof LinkToolClass,
|
||||||
|
ImageTool: typeof ImageToolClass,
|
||||||
|
Embed: typeof EmbedClass,
|
||||||
|
CodeTool: typeof CodeToolClass,
|
||||||
|
Quote: typeof QuoteClass,
|
||||||
|
Table: typeof TableClass,
|
||||||
|
Marker: typeof MarkerClass
|
||||||
|
});
|
||||||
|
|
||||||
|
// Build tools object dynamically, only including available plugins
|
||||||
|
const tools = {};
|
||||||
|
|
||||||
|
if (HeaderClass) {
|
||||||
|
tools.header = {
|
||||||
|
class: HeaderClass,
|
||||||
|
config: {
|
||||||
|
levels: [2, 3, 4, 5, 6],
|
||||||
|
defaultLevel: 2
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ParagraphClass) {
|
||||||
|
tools.paragraph = {
|
||||||
|
class: ParagraphClass,
|
||||||
|
inlineToolbar: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ListClass) {
|
||||||
|
tools.list = {
|
||||||
|
class: ListClass,
|
||||||
|
inlineToolbar: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (LinkToolClass) {
|
||||||
|
tools.link = {
|
||||||
|
class: LinkToolClass,
|
||||||
|
config: {
|
||||||
|
endpoint: '/api/fetch-url'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ImageToolClass) {
|
||||||
|
tools.image = {
|
||||||
|
class: ImageToolClass,
|
||||||
|
config: {
|
||||||
|
endpoints: {
|
||||||
|
byFile: '/api/admin/blogs/upload-image'
|
||||||
|
},
|
||||||
|
field: 'image',
|
||||||
|
types: 'image/*'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (EmbedClass) {
|
||||||
|
tools.embed = {
|
||||||
|
class: EmbedClass,
|
||||||
|
config: {
|
||||||
|
services: {
|
||||||
|
youtube: true,
|
||||||
|
vimeo: true,
|
||||||
|
twitter: true,
|
||||||
|
codepen: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (CodeToolClass) {
|
||||||
|
tools.code = {
|
||||||
|
class: CodeToolClass
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (QuoteClass) {
|
||||||
|
tools.quote = {
|
||||||
|
class: QuoteClass,
|
||||||
|
inlineToolbar: true,
|
||||||
|
config: {
|
||||||
|
quotePlaceholder: 'Enter a quote',
|
||||||
|
captionPlaceholder: 'Quote\'s author'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (TableClass) {
|
||||||
|
tools.table = {
|
||||||
|
class: TableClass,
|
||||||
|
inlineToolbar: true,
|
||||||
|
config: {
|
||||||
|
rows: 2,
|
||||||
|
cols: 2
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (MarkerClass) {
|
||||||
|
tools.marker = {
|
||||||
|
class: MarkerClass
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure at least paragraph tool is available
|
||||||
|
if (!tools.paragraph) {
|
||||||
|
console.error('No paragraph tool available');
|
||||||
|
showStatus('Editor tools failed to load. Please refresh the page.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const editorConfig = {
|
const editorConfig = {
|
||||||
holder: 'editor',
|
holder: 'editor',
|
||||||
tools: {
|
tools: tools,
|
||||||
header: {
|
|
||||||
class: Header,
|
|
||||||
config: {
|
|
||||||
levels: [2, 3, 4, 5, 6],
|
|
||||||
defaultLevel: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
paragraph: {
|
|
||||||
class: Paragraph,
|
|
||||||
inlineToolbar: true
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: List,
|
|
||||||
inlineToolbar: true
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
class: LinkTool,
|
|
||||||
config: {
|
|
||||||
endpoint: '/api/fetch-url' // Optional: for link previews
|
|
||||||
}
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
class: ImageTool,
|
|
||||||
config: {
|
|
||||||
endpoints: {
|
|
||||||
byFile: '/api/admin/blogs/upload-image'
|
|
||||||
},
|
|
||||||
field: 'image',
|
|
||||||
types: 'image/*'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
embed: {
|
|
||||||
class: Embed,
|
|
||||||
config: {
|
|
||||||
services: {
|
|
||||||
youtube: true,
|
|
||||||
vimeo: true,
|
|
||||||
twitter: true,
|
|
||||||
codepen: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
code: {
|
|
||||||
class: CodeTool
|
|
||||||
},
|
|
||||||
quote: {
|
|
||||||
class: Quote,
|
|
||||||
inlineToolbar: true,
|
|
||||||
config: {
|
|
||||||
quotePlaceholder: 'Enter a quote',
|
|
||||||
captionPlaceholder: 'Quote\'s author'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
class: Table,
|
|
||||||
inlineToolbar: true,
|
|
||||||
config: {
|
|
||||||
rows: 2,
|
|
||||||
cols: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
marker: {
|
|
||||||
class: Marker
|
|
||||||
}
|
|
||||||
},
|
|
||||||
placeholder: 'Start writing your post...',
|
placeholder: 'Start writing your post...',
|
||||||
data: savedContent || {
|
data: savedContent || {
|
||||||
blocks: [
|
blocks: [
|
||||||
@@ -362,7 +435,13 @@ function initEditor(savedContent = null) {
|
|||||||
readOnly: currentEditingPost?.source === 'repo'
|
readOnly: currentEditingPost?.source === 'repo'
|
||||||
};
|
};
|
||||||
|
|
||||||
editor = new EditorJS(editorConfig);
|
try {
|
||||||
|
editor = new EditorJS(editorConfig);
|
||||||
|
console.log('Editor.js initialized successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to initialize Editor.js:', error);
|
||||||
|
showStatus('Failed to initialize editor: ' + error.message, 'error');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle post form submission
|
// Handle post form submission
|
||||||
|
|||||||
Reference in New Issue
Block a user