Upload media/images on aws3 using tinymce editor in React js - reactjs

I'm trying to implement TinyMCE rich text editor in react, all the setup is done. I don't know how can I upload media/images on AWS-3 using TinyMCE in react. If anybody has done it before please share

By default, TinyMCE does not upload images on the server. It converts them into base64 and adds them as blobs. To upload these images to the server, you will need to set up automatic_uploads and add a custom upload handler (check other options in the configuration reference, like images_upload_url, images_upload_base_path, images_upload_credentials, etc).
Since automatic_uploads isn't one of the default options for React, you will need to set up the additional editor options via init.

Related

How to use image upload adapters as extra plugins with CKEditor 5 Classic Editor? Or, how to use CKEditor custom builder in React JS?

I was trying to integrate CKEditor5 in my MERN Stack Application. Its a kind of blog site which requires a fully functioned rich text editor. I integrated the editor and all other things are working fine except the file upload button.
I am using the predefined Classic Editor, which has all the basic functions. But when I click on the Image button to upload an image from local storage, it shows the error :
filerepository-no-upload-adapter
I tried to add Base64UploadAdapter plugin but then it shows the error :
Uncaught CKEditorError: ckeditor-duplicated-modules
Because of this error, I had to remove that plugin, but I still do not have the file upload function.
I also need some other buttons on my text editor, but I am always getting some kind of errors.
I also tried the CKEditor Custom build editor, but when I imported it to my page, it again gives me ckeditor-duplicated-modules error. I used the following code for importing:
import { CKEditor } from '#ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
And yes, I also added the custom builder's folder to my package.json before importing this.
I want all the features that I added in my Custom builder, but that's not working in my case. Can anyone please help me with this? Or else, if that is not possible, please give me a solution for file upload which I need for sure, even if I don't get other buttons except the predefined Classic Editor buttons.
But, if there is any way to fix this ckeditor-duplicated-modules error and use the Custom build only, that would be the best solution for me..!
Thanks in advance.

URL link preview issue in react JS

We are having one problem while generating a link preview for our react application URL's. Actually we have the requirement to display the dynamic link preview for different URLs.
We are able to add the link preview by using open graph tags in our index.html file placed under the public folder.
But once we tried to add dynamic metadata using the "react-meta" or "helmet" package. it is successfully changing the title of the application. but links preview are not working after making these changes.
so I kindly let me know if there is any way that we can different link preview for different urls for react application. Thanks in advance.

How to create PDF file and dowload in react js

I am working on react ja project which is contains pdf file download. I have list view which is contains some get service data from the api, exactly on the list view I have download button. If I click on the download button the list view should download as pdf file.
I have no idea how to that, so how to generate pdf file in react js?
There are two older answers for this in stackoverfow.
First one is this.
How to make PDF from React?
Second one is how to use jsPDF properly. And there is a working jsfiddle example allso. Refer them.
How to properly use jsPDF library

use a file-upload in a wysiwyg editor

I'm looking for a wysiwyg editor that can use the ng-file-upload module. Is there someone who can give some feed-back about a such use ?
Or any other angularjs text editor that can be customized to define a file upload management.
thanks
Edit: I would need a crop image tool for upload

Uploading images for inline content without an html editor

I've got a client with a D7 site in which all content is created by a single employee who knows html and css, but never accesses the back end. Is there a way to let them upload images to embed in content (not a field) without installing an html editor? No styles are used or needed. The images are created just as they need to use them.
Have you already looked at the IMCE module?
IMCE is an image/file uploader and browser that supports personal directories and quota.
https://drupal.org/project/imce

Resources