React js: Image upload is not working in CKEditor - javascript

CKEditor image upload is not working and below is the code
<CKEditor
editor={ ClassicEditor }
data={this.state.miscNotesData.miscnote}
onInit={ editor => {
// You can store the "editor" and use when it is needed.
console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
this.handleChange(data);
console.log( { event, editor, data } );
} }
/>
Error:
backend.js:6 filerepository-no-upload-adapter: Upload adapter is not defined.
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

As provided in documentation https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html
there are 4 options to upload images in CKEDitor: Easy Image(proprietary), CKFinder(needs connector on PHP or ASP.net), Simple adapter, Base64 adapter
I use Simple adapter for this purpose with Node js server:
First, I installed SimpleUploadAdapter in ClassicEditor, then I set up config in CKEditor:
<CKEditor
data={input.value}
editor={ ClassicEditor }
config={{
simpleUpload: {
uploadUrl: 'https://myserver.herokuapp.com/image-upload'
},
toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo']
}}
/>
And create url on my server /image-upload

Related

NextJs dynamic rendering (blinking)

I have some issues with dynamic import of the component in my NextJs app. I'm trying to import Froala text editor and it's supported for React. But, when I try to import it, I have errors that window is not defined, so I'm importing it with next/dynamic.
So the problem is, this editor should not reload on every change on page. Whatever I do, ex. change state, it will rerender the component. It's only blinking, but still cannot show like so to the client. Is there any other way I could use component and not "blink"?
Here is my component:
import FroalaEditor from 'react-froala-wysiwyg';
const Froala = (props: {model: any, onChanged: any}) => {
return (
<div>
<FroalaEditor model={props.model} onModelChange={props.onChanged} config={{
toolbarButtons: ['fullscreen', 'bold', 'italic', 'textColor', 'backgroundColor', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'color', 'inlineClass', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', 'print', 'getPDF', 'spellChecker', 'help', 'html', 'undo', 'redo'],
toolbarButtonsXS: ['bold', 'italic', 'fontFamily', 'fontSize', 'undo', 'redo'],
placeholderText: 'Edit Your Content Here!',
charCounterCount: false,
theme: 'dark',
imageUploadParam: 'image_param',
fileUploadMethod: 'POST',
fileUploadURL: 'http://127.0.0.1:8000/upload_file',
// Set the image upload URL.
imageUploadMethod: 'POST',
imageUploadURL: 'http://127.0.0.1:8000/api/upload/image',
// Set request type.
// Set max image size to 5MB.
imageMaxSize: 5 * 1024 * 1024,
// Allow to upload PNG and JPG.
imageAllowedTypes: ['jpeg', 'jpg', 'png'],
}}/>
</div>
)
}
export default Froala
And importing to other components would be:
const FroalaEditor = dynamic(() => import('../Froala'), {
ssr: false
});
It's not important what I change on the page... dispatch, state, or whatever that can cause rerendering, it will blink. How can I prevent this?
Btw, if component is directly imported, it's giving an error of undefined window!

cant remove list dot in draft js on backspace react-draft-wysiwyg

I use draftJS to edit text in my project, and at the moment I'm faced with such a problem that if you include a list with dots or numbers in an empty editor, then it cannot be deleted with the backspace key
my editor
```<Editor
editorState={description}
toolbarStyle={editorStyles.toolbarStyle}
editorStyle={editorStyles.editorStyle}
onEditorStateChange={onChangeDescription}
placeholder={placeholder}
toolbar={toolbar}
/>```
I just study draft.js. you can handle the key command by RichUtils.handleKeyCommand.
The code below is that i create a function handleKeyCommandEn.then it can handle backspace to remove list
import { EditorState, convertToRaw, ContentState,RichUtils } from "draft-js";
...
const [editorStateEn, setEditorStateEn] = useState<EditorState>(EditorState.createEmpty());
const handleKeyCommandEn = (command) => {
const newState = RichUtils.handleKeyCommand(editorStateEn, command);
if (newState) {
setEditorStateEn(newState);
return true;
}
return false;
};
...
<Editor
editorState={editorStateEn}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
onEditorStateChange={setEditorStateEn}
toolbar={{
options:['inline','blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'remove', 'history'],
textAlign: { inDropdown: true },
inline :{options:['bold', 'italic', 'underline', 'strikethrough','superscript','subscript']}
}}
localization={{
locale: 'en',
}}
stripPastedStyles={true} // disable paste style
handleKeyCommand={handleKeyCommandEn}
placeholder={intl.formatMessage({ id: "editorPlaceholder" })}
/>

How to get deleted Image url in react-quill editor

I am using react-quill and I wan't to know how to select an image after being inserted into the editor and how to get the delted image url after being delted.
Here is my Editor Component
import React,{useState} from 'react'
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const modules = {
toolbar:{
container: [
[{ 'header': [1, 2, false] }],
['bold', 'italic', 'underline','strike', 'blockquote'],
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
['link', 'image'],
['clean']
],
handlers:{
'image': async function(){
const editor=this.quill
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.addEventListener('change',(e)=>{
const url=awiat uploadFile(e.target.files[0))
const range = editor.getSelection(true);
editor.insertEmbed(range.index, 'image', url;
editor.setSelection(range.index + 1)
})
}
}
}
}
const formats = [
'header', 'font', 'size',
'bold', 'italic', 'underline', 'strike', 'blockquote',
'list', 'bullet', 'indent',
'link', 'image', 'color',
]
function Editor() {
const [editorData,setEditorData]=useState(" ")
const handleChange=(value)=>{
setEditorData(value)
}
return (
<div>
<ReactQuill formats={formats} modules={modules} value={editorData}
onChange={(data)=>handleChange(data)} />
</div>
)
}
export default Editor
So, how can i select a image inside the editor after being inserted and get the url after being deleted from the editor.
First, you should store your uploaded image URL inside an array like:
const [addresses, setAddresses] = useState([])
addresses.push(url)
Then when you submit the form, check if these addresses exist in your editor content save them, else any of them not exists delete it.
addresses.map(async (a) => {
if (!yourEditorValue.includes(a)) {
/* here you can add your method according to your backend, I am
using strapi */
const deletePhoto = await axios.delete(
`${yourServerUrl}/upload/files/${id}`,
{
//this one is not necessary if you don't need
headers: {
Authorization: `Bearer ${yourToken}`,
},
},
)
}
return true
})

How to make "Ckeditor-5 document editor" disabled or readOnly

I'm using CKeditor5 document editor in reactjs. And i want to make it disabled or readonly. I'm sending parameter in config but not working.
<CKEditor2
editor={DecoupledEditor}
data="<p>Hello from CKEditor 5!</p>"
onInit={editor => {
editor.ui.view.editable.element.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.view.editable.element
);
}}
config={
{
toolbar: ['bold', 'italic', 'bulletedList', '|', 'numberedList', 'alignment'],
removePlugins: ['Heading', 'Link'],
isReadOnly: true,
}
}
/>
Ok I think I found out what you're looking for:
Here you have a description of the component properties. On the last one you can see "disabled"
So you're code would look something like this:
<CKEditor2
editor={DecoupledEditor}
data="<p>Hello from CKEditor 5!</p>"
disabled=true
onInit={editor => {
editor.ui.view.editable.element.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.view.editable.element
);
}}
config={
{
toolbar: ['bold', 'italic', 'bulletedList', '|', 'numberedList', 'alignment'],
removePlugins: ['Heading', 'Link'],
isReadOnly: true,
}
}
/>
Also, I think you probably meant <CKEditor instead of <CKEditor2.
Use editor.enableReadOnlyMode("editor"); Docs
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
</head>
<body>
<div id="editor">Test</div>
<script>
ClassicEditor.create(document.querySelector("#editor"), {
toolbar: [],
}).then(editor => {
editor.enableReadOnlyMode("editor");
console.log(editor);
}).catch(error => {
console.error(error);
});
</script>
</body>
</html>

Multiple Ckeditor inline editors with custom toolbar

I currently have a page with about 13 text area boxes and each has their inline editor defined. The default tool bar is full but I would like the change the default toolbar layout for all my inlines, to only keep the needed buttons/functionality.
Here is my script, how would I be able to reference to a custom toolbar?
<script>
CKEDITOR.inline( 'inline_editor1' );
CKEDITOR.inline( 'inline_editor2' );
CKEDITOR.inline( 'inline_editor3' );
CKEDITOR.inline( 'inline_editor4' );
CKEDITOR.inline( 'inline_editor5' );
CKEDITOR.inline( 'inline_editor6' );
CKEDITOR.inline( 'inline_editor7' );
CKEDITOR.inline( 'inline_editor8' );
CKEDITOR.inline( 'inline_editor9' );
CKEDITOR.inline( 'inline_editor10' );
CKEDITOR.inline( 'inline_editor11' );
CKEDITOR.inline( 'inline_editor12' );
CKEDITOR.inline( 'inline_editor13' );
</script>
You can give each CKEDITOR instance a different config object as can be seen at http://docs.ckeditor.com/#!/api/CKEDITOR-method-inline and you can define a custom toolbar for each configuration option as seen here: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar
So, you could have something like this untested code:
<script>
var cfg1 = { toolbar: 'Basic' };
var cfg2 = { toolbar: 'Full' };
var cfg3 = {
uiColor: '#FF69B4',
toolbar: [
[ 'Source', '-', 'Bold', 'Italic' ]
]
};
CKEDITOR.inline( 'inline_editor1', cfg1 );
CKEDITOR.inline( 'inline_editor2', cfg2 );
CKEDITOR.inline( 'inline_editor3', cfg3 );
</script>

Categories

Resources