Javascript 带有React的TinyMCE编辑器无法访问本地文件
我将tinyMCE编辑器插件与react js一起使用。我试图将文件从本地机器上传到编辑器,然后再上传到s3。我可以将照片拖放到编辑器中,但是,当我单击“插入照片”按钮时,我无法访问我的文件系统。有什么建议吗Javascript 带有React的TinyMCE编辑器无法访问本地文件,javascript,reactjs,tinymce,tinymce-4,Javascript,Reactjs,Tinymce,Tinymce 4,我将tinyMCE编辑器插件与react js一起使用。我试图将文件从本地机器上传到编辑器,然后再上传到s3。我可以将照片拖放到编辑器中,但是,当我单击“插入照片”按钮时,我无法访问我的文件系统。有什么建议吗 class Editor extends React.Component{ handleEditorChange = (e) => { console.log('e',e); console.log('Content was updated:
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
类编辑器扩展React.Component{
handleEditorChange=(e)=>{
console.log('e',e);
log('内容已更新:',e.target.getContent());
}
render(){
返回(
)
}
}
导出默认编辑器
我写了一个解决方法。将输入放入html中,然后使用onlick处理程序获取它
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.com/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
从“React”导入React;
从“react TinyMCE”导入TinyMCE;
类编辑器扩展了React.Component{
handleEditorChange=(e)=>{
console.log('e',e);
log('内容已更新:',e.target.getContent());
}
render(){
返回(
)
}
}
导出默认编辑器
我写了一个解决方法。将输入放入html中,然后使用onlick处理程序获取它
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.com/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
从“React”导入React;
从“react TinyMCE”导入TinyMCE;
类编辑器扩展了React.Component{
handleEditorChange=(e)=>{
console.log('e',e);
log('内容已更新:',e.target.getContent());
}
render(){
返回(
)
}
}
导出默认编辑器