如何在Angle 5 Tiny MCE组件中处理图像上传? [英] How to handle image upload in angular 5 Tiny MCE component?
问题描述
我在我的angular 5项目中使用了TinyMCE编辑器,并且想处理图像上传,而我目前无法执行.这是我当前的代码:
I am using TinyMCE editor in angular my angular 5 project, and want to handle image uploads, which I am currently not able to do. Here is my current code:
<editor
name="questionStatement"
apiKey="somekey"
[init]='{
plugins : [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
past_date_images: true,
external_plugins: { tiny_mce_wiris: "https://www.wiris.net/demo/plugins/tiny_mce/plugin.js" },
toolbar: "tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry"
}'
</editor>
我正在遵循此代码示例 https://codepen.io/nirajmchauhan/pen/EjQLpV,以处理图像上传.我不明白,如何将 file_picker_callback
函数传递给angular的编辑器?
I am following this code sample https://codepen.io/nirajmchauhan/pen/EjQLpV , to handle image uploads. I don't understand, how do I pass the file_picker_callback
function to the editor in angular ?
还有其他方法,我应该如何处理图像上传?
Is there any other way, how should I handle the image uploads ?
我尝试阅读文档,但找不到任何内容.我在这个问题上困扰了很长时间,如果有人能够帮助我,那将是非常不错的事情.
I have tried reading the documentation, but couldn't find anything. I have been stuck on this problem for a long time and it would be really great, if someone is able to help me with it.
推荐答案
这对我有用(我正在使用 @ tinymce/tinymce-angular
):
This is what worked for me (I am using @tinymce/tinymce-angular
):
<editor [(ngModel)]="source" [init]="tinymceInit"></editor>
在构造函数或Init中:
In the Constructor or Init:
...
this.tinymceInit = {
plugins : [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar : 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
image_advtab : true,
file_picker_callback : function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
// Note: In modern browsers input[type="file"] is functional without
// even adding it to the DOM, but that might not be the case in some older
// or quirky browsers like IE, so you might want to add it to the DOM
// just in case, and visually hide it. And do not forget do remove it
// once you do not need it anymore.
input.onchange = function() {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function () {
// Note: Now we need to register the blob in TinyMCEs image blob
// registry. In the next release this part hopefully won't be
// necessary, as we are looking to handle it internally.
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.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();
}
}
要添加,您也可以使用functino上传文件.我宁愿拥有我正在研究的特定项目的base64数据.
To add, you can use that functino to upload files as well, as you know. I would much rather have the base64 data for the particular project I am working on.
这篇关于如何在Angle 5 Tiny MCE组件中处理图像上传?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!