Im using the tinyMCE editor plugin with react js. Im trying to upload files from my local machine to the editor and then to s3. I can drag and drop photos into the editor, however, when I click insert photo button i cannot gain access to my file system. Any suggestions?
class Editor extends React.Component{
handleEditorChange = (e) => {
console.log('e',e);
console.log('Content was updated:', e.target.getContent());
}
render(){
return(
<TinyMCE
content="<p>This is the initial content of the editor</p>"
config={{
height:600,
paste_data_images: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace wordcount visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', file_picker_types: 'file image media',
paste_data_images:true,
file_browser_callback_types: 'image',
images_upload_handler: function (blobInfo, success, failure) {
console.log('blobInfo',blobInfo);
},
selector: 'textarea', // change this value according to your HTML
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'file') {
//callback('mypage.html', {text: 'My text'});
}
if (meta.filetype == 'image') {
}
if (meta.filetype == 'media') {
//callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
}
}
}}
onChange={this.handleEditorChange}
/>
)
}
}
export default Editor
Im using the tinyMCE editor plugin with react js. Im trying to upload files from my local machine to the editor and then to s3. I can drag and drop photos into the editor, however, when I click insert photo button i cannot gain access to my file system. Any suggestions?
class Editor extends React.Component{
handleEditorChange = (e) => {
console.log('e',e);
console.log('Content was updated:', e.target.getContent());
}
render(){
return(
<TinyMCE
content="<p>This is the initial content of the editor</p>"
config={{
height:600,
paste_data_images: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace wordcount visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', file_picker_types: 'file image media',
paste_data_images:true,
file_browser_callback_types: 'image',
images_upload_handler: function (blobInfo, success, failure) {
console.log('blobInfo',blobInfo);
},
selector: 'textarea', // change this value according to your HTML
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'file') {
//callback('mypage.html', {text: 'My text'});
}
if (meta.filetype == 'image') {
}
if (meta.filetype == 'media') {
//callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
}
}
}}
onChange={this.handleEditorChange}
/>
)
}
}
export default Editor
3 Answers
Reset to default 6I wrote a hack for a workaround. Put an input in the html and then grabbed it with an onlick handler
import React from 'react';
import TinyMCE from 'react-tinymce';
class Editor extends React.Component{
handleEditorChange = (e) => {
console.log('e',e);
console.log('Content was updated:', e.target.getContent());
}
render(){
return(
<div>
<input id="my-file" type="file" name="my-file" style={{display:"none"}} onChange="" />
<TinyMCE
content="<p>This is the initial content of the editor</p>"
config={{
// selector: '.post-article #' + editorId,
height: 400,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace wordcount visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_css: '//www.tinymce./css/codepen.min.css',
file_browser_callback_types: 'image',
file_picker_callback: function (callback, value, meta) {
if (meta.filetype == 'image') {
var input = document.getElementById('my-file');
input.click();
input.onchange = function () {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function (e) {
console.log('name',e.target.result);
callback(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
}
},
paste_data_images: true,
}}
onChange={this.handleEditorChange}
/>
</div>
)
}
}
export default Editor
This is my updated code. version "@tinymce/tinymce-react": "^3.13.0"
import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
export default function App() {
const editorRef = useRef(null);
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};
return (
<>
<div style={{ marginTop: 20 }}>
<Editor
apiKey="your api key"
onInit={(evt, editor) => {
editorRef.current = editor
}}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 300,
menubar: true,
/* enable title field in the Image dialog*/
image_title: true,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste image code help wordcount",
],
toolbar:
"undo redo | formatselect | " +
"bold italic backcolor | alignleft aligncenter " +
"alignright alignjustify | bullist numlist outdent indent | " +
"removeformat | help",
file_picker_callback: function (cb, value, meta) {
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = "blobid" + new Date().getTime();
var blobCache = editorRef.current.editorUpload.blobCache;
var base64 = reader.result.split(",")[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
content_style:
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
}}
/>
<button onClick={log}>Log editor content</button>
</div>
</>
);
}
class Editor extends React.Component{
handleEditorChange = (e) => {
console.log('e',e);
console.log('Content was updated:', e.target.getContent());
}
render(){
return(
<TinyMCE
content="<p>This is the initial content of the editor</p>"
config={{
image_advtab: true,
height:600,
paste_data_images: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace wordcount visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', file_picker_types: 'file image media',
paste_data_images:true,
file_browser_callback_types: 'image',
images_upload_handler: function (blobInfo, success, failure) {
console.log('blobInfo',blobInfo);
},
selector: 'textarea', // change this value according to your HTML
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'file') {
//callback('mypage.html', {text: 'My text'});
}
if (meta.filetype == 'image') {
}
if (meta.filetype == 'media') {
//callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
}
}
}}
onChange={this.handleEditorChange}
/>
)
}
}
export default Editor
you needed image_advtab: true, it allows you to open file explorer or drag to its input in tinymce docs