自定义图片上传 Jodit 编辑器中的 URL

huangapple
go评论145阅读模式
英文:

custom url in image upload jodit editor

问题

我已经实现了Jodit编辑器（react）https://github.com/jodit/jodit-react中的“插入图片”选项，您可以在其中上传图片，然后保存到编辑器的默认选项中。

我想知道如何使用自定义URL并将图片插入到编辑器中。

Jodit的默认行为是：

  1. config: {
  2.   readonly: false,
  3.   enableDragAndDropFileToEditor: true,
  4.   uploader: { url: "https://xdsoft.net/jodit/connector/index.php?action=fileUpload" }
  5. }

期望的方式是：

  1. config: {
  2.   readonly: false,
  3.   enableDragAndDropFileToEditor: true,
  4.   uploader: { url: "www.xyz.com/upload" }
  5. }
英文:

I have implemented Jodit Editor (react)https://github.com/jodit/jodit-react, Insert Image option, in which can you upload the image, which saves to the default option by the Editor,

I would like to know how to use custom url and insert the image in editor

Jodit default behaviour

  1. config:{
  3.  readonly: false,
  4.         enableDragAndDropFileToEditor: true,        
  5.         uploader: { url: "https://xdsoft.net/jodit/connector/index.php?action=fileUpload"}
  7. }

Expected
How to do adding custom url

  1. config:{
  3.  readonly: false,
  4.         enableDragAndDropFileToEditor: true,        
  5.         uploader: { url: "www.xyz.com/upload"}
  7. }

答案1

得分: 3

在这个存储库中，https://github.com/GilianMoa/jodit-editor-react
我正在使用Cloudinary API上传图像。
希望我可以帮助你处理这段代码。

我创建了一个自定义按钮：

  1. uploadImageButton = () => {
  2.     Jodit.defaultOptions.controls.uploadImage = {
  3.         name: '上传图像到Cloudinary',
  4.         iconURL: "https://www.kindpng.com/picc/m/261-2619141_cage-clipart-victorian-cloud-upload-icon-svg-hd.png",
  5.         exec: (async (editor) => {
  6.             await this.imageUpload(editor);
  7.         })
  8.     };
  9. }

然后，我创建了一个方法来打开一个对话框，以选择图像并将其发送到一个服务，该服务将使用图像文件的formData发送POST请求到Cloudinary。

  1. // 对话框方法
  2. imageUpload = (editor) => {
  3.     
  4.     const input = document.createElement('input');
  5.     input.setAttribute('type', 'file');
  6.     input.setAttribute('accept', 'image/*');
  7.     input.click();
  9.     input.onchange = async function () {
  11.         const imageFile = input.files[0];
  13.         if (!imageFile) {
  14.             return;
  15.         }
  17.         if (!imageFile.name.match(/\.(jpg|jpeg|png)$/)) {
  18.             return;
  19.         }
  21.         const imageInfo = await FileUpload(imageFile);
  23.         this.insertImage(editor, imageInfo.url);
  25.     }.bind(this);
  26. }
  28. // 这个方法在上传完成后将图像插入编辑器中。
  29. insertImage = (editor, url) => {
  30.     const image = editor.selection.j.createInside.element('img');
  31.     image.setAttribute('src', url);
  32.     editor.selection.insertNode(image);
  33. }
  35. // 这个方法将图像发送到Cloudinary
  36. export const FileUpload = async (file) => {
  37.     let result = null;
  39.     let formData = new FormData();
  40.     formData.append('file', file);
  41.     formData.append('upload_preset', `${process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET}`);
  43.     await fetch(`https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUDINARY_CLOUD_NAME}/image/upload`, {
  44.         method: 'POST',
  45.         body: formData
  46.     })
  47.         .then((response) => response.json())
  48.         .then((data) => {
  49.             result = data;
  50.         })
  51.         .catch((error) => {
  52.             console.error('错误:', error);
  53.         });
  55.     return result;
  56. }
英文:

In this repository, https://github.com/GilianMoa/jodit-editor-react
I'm uploading images with Cloudinary api.
Hope I can help you with this code.

I create a custom buttom:

  1. uploadImageButton = () => {
  2. Jodit.defaultOptions.controls.uploadImage = {
  3. name: 'Upload image to Cloudinary',
  4. iconURL: "https://www.kindpng.com/picc/m/261-2619141_cage-clipart-victorian-cloud-upload-icon-svg-hd.png",
  5. exec: (async (editor) => {
  6. await this.imageUpload(editor);
  7. })
  8. };
  9. }

Then I create a method to open a dialog to pick the image and send to a service which send a post with the image file formData to cloudinary.

  1. //dialog method
  2. imageUpload = (editor) => {
  3. const input = document.createElement('input');
  4. input.setAttribute('type', 'file');
  5. input.setAttribute('accept', 'image/*');
  6. input.click();
  7. input.onchange = async function () {
  8. const imageFile = input.files[0];
  9. if (!imageFile) {
  10. return;
  11. }
  12. if (!imageFile.name.match(/\.(jpg|jpeg|png)$/)) {
  13. return;
  14. }
  15. const imageInfo = await FileUpload(imageFile);;
  16. this.insertImage(editor, imageInfo.url);
  17. }.bind(this);
  18. }
  19. //this method insert the image inside the editor after the upload is done.
  20. insertImage = (editor, url) => {
  21. const image = editor.selection.j.createInside.element('img');
  22. image.setAttribute('src', url);
  23. editor.selection.insertNode(image);
  24. }
  25. // this method send the image to cloudinary
  26. export const FileUpload = async (file) => {
  27. let result = null;
  28. let formData = new FormData();
  29. formData.append('file', file);
  30. formData.append('upload_preset', `${process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET}`);
  31. await fetch(`https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUDINARY_CLOUD_NAME}/image/upload`, {
  32. method: 'POST',
  33. body: formData
  34. })
  35. .then((response) => response.json())
  36. .then((data) => {
  37. result = data;
  38. })
  39. .catch((error) => {
  40. console.error('Error:', error);
  41. });
  42. return result;
  43. }

答案2

得分: 3

我使用了 jodit-react 并成功上传了图片！以下是代码，希望能帮助您。

  1. <JoditEditor
  2.     ref={this.editor}
  3.     value={this.state.content}
  4.     config={{
  5.         language: 'zh_cn',
  6.         toolbarButtonSize: 'large',
  7.         uploader: {
  8.             url: '/manage/upload',  // 你的上传 API 地址
  9.             insertImageAsBase64URI: false, // 不要插入 base64 图片
  10.             imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
  11.             filesVariableName: function (t) {
  12.                 return 'files[' + t + ']';
  13.             },
  14.             withCredentials: false,
  15.             pathVariableName: 'path',
  16.             format: 'json',
  17.             method: 'POST',
  18.             prepareData: function (formdata) {
  19.                 return formdata;
  20.             },
  21.             isSuccess: function (e) {
  22.                 debugger;
  23.                 return e.success;
  24.             },
  25.             getMessage: function (e) {
  26.                 return void 0 !== e.data.messages && Array.isArray(e.data.messages)
  27.                     ? e.data.messages.join('')
  28.                     : '';
  29.             },
  30.             process: function (resp: any) {
  31.                 let files = [];
  32.                 files.unshift(resp.data);
  33.                 return {
  34.                     files: resp.data,
  35.                     error: resp.msg,
  36.                     msg: resp.msg,
  37.                 };
  38.             },
  39.             error: function (this: any, e: Error) {
  40.                 this.j.e.fire('errorMessage', e.message, 'error', 4000);
  41.             },
  42.             defaultHandlerSuccess: function (this: Uploader, resp: IUploaderData) {
  43.                 const j = this;
  44.                 debugger;
  45.                 if (resp.files && resp.files.length) {
  46.                     const tagName = 'img';
  47.                     resp.files.forEach((filename: string, index: number) => {
  48.                         const elm = j.createInside.element(tagName);
  49.                         elm.setAttribute('src', filename);
  50.                         j.s.insertImage(elm as HTMLImageElement, null, j.o.imageDefaultWidth);
  51.                     });
  52.                 }
  53.             },
  54.             defaultHandlerError: function (this: any, e) {
  55.                 this.j.e.fire('errorMessage', e.message);
  56.             },
  57.             contentType: function (e) {
  58.                 return (
  59.                     (void 0 === this.jodit.ownerWindow.FormData || 'string' == typeof e) &&
  60.                     'application/x-www-form-urlencoded; charset=UTF-8'
  61.                 );
  62.             },
  63.         },
  64.     }}
  65. />

我已经测试通过了。

英文:

I use jodit-react and upload img success ! the code is here hope to help you.
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.  &lt;JoditEditor
  2. ref={this.editor}
  3. value={&#39;this.state.content&#39;}
  4. config={{
  5. language: &#39;zh_cn&#39;,
  6. toolbarButtonSize: &#39;large&#39;,
  7. uploader: {
  8. url: &#39;/manage/upload&#39;,  //your upload api url
  9. insertImageAsBase64URI: false, not inster base64
  10. imagesExtensions: [&#39;jpg&#39;, &#39;png&#39;, &#39;jpeg&#39;, &#39;gif&#39;],
  11. //headers: {&quot;token&quot;:`${db.token}`},
  12. filesVariableName: function (t) {
  13. return &#39;files[&#39; + t + &#39;]&#39;;
  14. }, //&quot;files&quot;,
  15. withCredentials: false,
  16. pathVariableName: &#39;path&#39;,
  17. format: &#39;json&#39;,
  18. method: &#39;POST&#39;,
  19. prepareData: function (formdata) {
  20. return formdata;
  21. },
  22. isSuccess: function (e) {
  23. debugger;
  24. return e.success;
  25. },
  26. getMessage: function (e) {
  27. return void 0 !== e.data.messages &amp;&amp; Array.isArray(e.data.messages)
  28. ? e.data.messages.join(&#39;&#39;)
  29. : &#39;&#39;;
  30. },
  31. process: function (resp: any) { //success callback transfrom data to defaultHandlerSuccess use.it&#39;s up to you.
  32. let files = [];
  33. files.unshift(resp.data);
  34. return {
  35. files: resp.data,
  36. error: resp.msg,
  37. msg: resp.msg,
  38. };
  39. },
  40. error: function (this: any, e: Error) { 
  41. this.j.e.fire(&#39;errorMessage&#39;, e.message, &#39;error&#39;, 4000);
  42. },
  43. defaultHandlerSuccess: function (this: Uploader, resp: IUploaderData) { // `this` is the editor.
  44. const j = this;
  45. debugger;
  46. if (resp.files &amp;&amp; resp.files.length) {
  47. const tagName = &#39;img&#39;;
  48. resp.files.forEach((filename: string, index: number) =&gt; { //edetor insertimg function
  49. const elm = j.createInside.element(tagName);
  50. elm.setAttribute(&#39;src&#39;, filename);
  51. j.s.insertImage(elm as HTMLImageElement, null, j.o.imageDefaultWidth);
  52. });
  53. }
  54. },
  55. defaultHandlerError: function (this: any, e) {
  56. this.j.e.fire(&#39;errorMessage&#39;, e.message);
  57. },
  58. contentType: function (e) {
  59. return (
  60. (void 0 === this.jodit.ownerWindow.FormData || &#39;string&#39; == typeof e) &amp;&amp;
  61. &#39;application/x-www-form-urlencoded; charset=UTF-8&#39;
  62. );
  63. },
  64. },
  65. }}
  66. /&gt;

<!-- end snippet -->
I have test ok.

huangapple
  • 本文由 发表于 2020年1月3日 18:16:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/59576741.html
  • image-uploading
  • javascript
  • jodit
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定