invisi/tinymce-docs-4x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grammar edits

Browse Source
This commit is contained in:
Shikha
2018-08-01 11:18:32 +10:00
committed by GitHub
parent bc6385dfa0
commit c1f58388c9
1 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
general-configuration-guide/upload-images.md
+21 -25
View File
@@ -7,15 +7,15 @@ keywords: uploader uploadImages image handler
{% include pardot-px-moxiemanager.html %}
> Please note, this image upload feature is available for TinyMCE version 4.3 and above. Alternatively, the [PowerPaste plugin]({{ site.baseurl }}/plugins/powerpaste/) is capable of this functionality in versions of TinyMCE 4.0 and above.
> Note: Please note, this image upload feature is available for TinyMCE version 4.3 and above. Alternatively, the [PowerPaste plugin]({{ site.baseurl }}/plugins/powerpaste/) is capable of this functionality in versions of TinyMCE 4.0 and above.
The image uploader is designed to complement the new image editing functionality of TinyMCE 4.3. Images that are edited within TinyMCE can be uploaded using this function. Local images that are added through other means. For example drag and drop when using the [paste_data_images]({{ site.baseurl }}/plugins/paste/#paste_data_images) configuration property is one way or using Ephox's PowerPaste Plugin can also be used.
The image uploader is designed to complement the new image editing functionality of TinyMCE 4.3. Images that are edited within TinyMCE can be uploaded using this function. Local images that are added through other means, for example drag and drop when using the [paste_data_images]({{ site.baseurl }}/plugins/paste/#paste_data_images) configuration property, or using Tiny's PowerPaste Plugin.
Once uploaded, TinyMCE will automatically update the `<image>` src attribute with the new path to the remote image.
Once uploaded, TinyMCE automatically updates the `<image>` src attribute with the new path to the remote image.
Local images can be uploaded to TinyMCE through the use of the new `editor.uploadImages()` function. This functionality is handled asynchronously, meaning that it is possible for users to save their content before all images have completed uploading. If this occurs, no server path to the remote image will be available and the images will be stored as Base 64.
Local images can be uploaded to TinyMCE through the use of the new `editor.uploadImages()` function. This functionality is handled asynchronously, meaning that it is possible for users to save their content before all images have completed uploading. If this occurs, no server path to the remote image is available, and the images are saved as Base 64.
To avoid this situation, it is recommended that the `editor.uploadImages()` function be executed prior to submitting the editor contents to the server. Once all images have been uploaded, a success callback can be utilized to execute code. This success callback can be used to save the editor's content to the server through a `POST`.
It is recommended that the `editor.uploadImages()` function be executed before submitting the editor contents to the server, to avoid saving content as Base 64. Once all the images are uploaded, a success callback can be utilized to execute the code. This success callback can be used to save the editor's content to the server through a `POST`.
##### Using uploadImages with jQuery
@@ -37,24 +37,20 @@ tinymce.activeEditor.uploadImages(function(success) {
## Image uploader requirements
In order to upload local images to the remote server, you will need a server-side upload handler script that accepts the images on the server, stores them appropriately, and returns a JSON object containing the location that they were uploaded to.
To upload local images to the remote server, you need a server-side upload handler script that accepts the images on the server, saves them appropriately, and returns a JSON object containing the location of the saved images.
An example PHP upload handler implementation is available [here]({{ site.baseurl }}/advanced/php-upload-handler/).
Images will be sent to the Image Uploader via HTTP POST with each post containing a single image. The image handler at the URL referenced in the `images_upload_url` has to do whatever needs to be done to "store" the image in your application. Some examples would include:
Images are sent to the Image Uploader via HTTP POST with each post containing a single image. The image handler at the URL referenced in the `images_upload_url` takes care of the process required to "save" the image in your application. Some examples would include:
* Store the item in a folder on your web server
* Store the item on a CDN server
* Store the item in a database
* Store the item in an asset management system
When the image is uploaded it will have a standardized name in the post (e.g. `blobid0`, `blobid1`, `imagetools0`, `imagetools1`).
*You will need to ensure that your upload handler script takes each uploaded file and generates a unique name prior to storing the image*.
For example, you could append the current time (in milliseconds) to the end of the file name which would lead to file names like `blobid0-1458428901092.png` or `blobid0-1460405299-0114.png`. Take care to make sure that the file name is unique because you don't want to accidentally overwrite a previously uploaded image!
* Save the item in a folder on your web server
* Save the item on a CDN server
* Save the item in a database
* Save the item in an asset management system
When the image is uploaded it has a standardized name in the post (e.g. `blobid0`, `blobid1`, `imagetools0`, `imagetools1`).
> Note: You need to ensure that your upload handler script takes each uploaded file and generates a unique name before saving the image. For example, you could append the current time (in milliseconds) to the end of the file name which would lead to file names like `blobid0-1458428901092.png` or `blobid0-1460405299-0114.png`. Take care to make sure that the file name is unique because you don't want to overwrite a previously uploaded image accidentally!
This server-side upload handler must return a JSON object that contains a "location" property. This property should represent the remote location or filename of the newly uploaded image.
@@ -64,9 +60,9 @@ This server-side upload handler must return a JSON object that contains a "locat
## Image uploader options
There are multiple configuration options that will affect the operation of this feature. These options are detailed below.
Multiple configuration options that affect the operation of this feature. These options are listed below.
**Please note, for image uploads to function correctly, either the `images_upload_url` or `images_upload_handler` options must be set.**
> Note: Please note, for image uploads to function correctly, either the `images_upload_url` or `images_upload_handler` options must be set.
| Image Upload Handling Option | Description |
|----------------------------------|----------------------|
@@ -86,9 +82,9 @@ tinymce.init({
});
```
## Rolling your own image handler
## Rolling your image handler
If the default behavior of TinyMCE's image upload logic is not right for you, you may set your own behavior by using the images_upload_handler configuration property.
If the default behavior of TinyMCE's image upload logic is not right for you, you may set your behavior by using the images_upload_handler configuration property.
Please note that while using this option, other image uploader options are not necessary. Additionally, if you would like TinyMCE to replace the <image> tag's src attribute with the remote location, please use the success callback defined in the image_upload_handler function with the returned JSON object's location property.
@@ -126,17 +122,17 @@ tinymce.init({
## CORS considerations
You may choose for your web application to upload image data to a separate domain. If so, you will need to configure [Cross-origin resource sharing (CORS)](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) for your application to comply with JavaScript "same origin" restrictions.
You may choose for your web application to upload image data to a separate domain. If so, you need to configure [Cross-origin resource sharing (CORS)](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) for your application to comply with JavaScript "same origin" restrictions.
CORS has very strict rules about what constitutes a cross-origin request. The browser can require CORS headers when uploading to the same server the editor is hosted on, for example:
CORS has stringent rules about what constitutes a cross-origin request. The browser can require CORS headers when uploading to the same server the editor is hosted on, for example:
* A different port on the same domain name
* Using the host IP address instead of the domain name
* Swapping between HTTP and HTTPS for the page and the upload script
The upload script URL origin must exactly match the origin of the URL in the address bar, or the browser will require CORS headers to access it. A good way to guarantee this is to use a relative URL to specify the script address, instead of an absolute one.
The upload script URL origin must exactly match the origin of the URL in the address bar, or CORS headers should be provided to the browser to access it. A good way to guarantee this is to use a relative URL to specify the script address, instead of an absolute one.
All supported browsers will print a message to the JavaScript console if there is a CORS error.
All supported browsers print a message to the JavaScript console if there is a CORS error.
The [PHP Upload Handler Script]({{ site.baseurl }}/advanced/php-upload-handler/) provided here configures CORS in the `$accepted_origins` variable. You may choose to configure CORS at the [web application layer](http://www.w3.org/wiki/CORS_Enabled#At_the_Web_Application_level...) or the [HTTP server layer](http://www.w3.org/wiki/CORS_Enabled#At_the_HTTP_Server_level...).