tinyMCE : how to enable image upload? - tinymce

I am trying to add image upload to tinyMCE:
I use that:
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init(
{ selector:'textarea',
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste image"
],
automatic_uploads: true,
images_upload_url: 'postAcceptor.php',
images_upload_base_path: '/some/basepath',
images_upload_credentials: true
});
</script>
<textarea>Hello world</textarea>
This options only gives me the opportunity to put link to HTTP images, no features of uploading image

Adding the images_upload_xxxx attributes will not auto-magically add a user interface/functionality to select images and insert into TinyMCE. What those attributes do is tell TinyMCE what to do with Base64 images that end up in the editor when you do things like drag/drop images into the editor or use the Image Editor to modify an image in the editor.
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
If you want a UI to select an image from your hard drive and insert it into the editor you have a couple of choices...
Use a 3rd party plugin to do this (e.g. MoxieManager or others like it)
Build your own code to handle this process
Of course the fastest answer is to use an existing 3rd party tool. MoxieManager is commercial so there is a fee but you get support. There are Open Source tools that do the same thing but the level of support for those will vary based on how active the projects are and how involved the community is for each project.

Related

How to get TinyMCE to always load its desktop mode

I have this page with a TinyMCE 5.10.4 Editor if I load the page at full desktop size, and then switch it to mobile sized, the text box appears as normal, I believe this is because while the screen is sized to a mobile device, TinyMCE recognizes it as a desktop screen.
However, if I load the page in mobile sizing it gives me a graybox that links to an external editor, and gives me this gross empty text area that has my background image behind it.
How do I get TinyMCE to always load desktop mode?
I'm not sure if this is what you are looking for, but have you tried overriding the mobile settings to match your existing settings when initializing TinyMCE? This would ensure that even if TinyMCE loaded in mobile mode, it would still look like desktop mode. Something like this:
tinymce.init({
selector: 'myTextArea',
mobile: {
menubar: true,
toolbar_mode: "wrap"
}
});
The docs also specify that you should include the following <meta> tag in your HTML document's <head> to ensure it can detect the correct mode to use.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the reference in the TinyMCE v5 doc where I found this info:
https://www.tiny.cloud/docs/mobile/#configuringmobile

TinyMCE file_picker_callback select image server directory of already uploaded images

I already have working script for uploading new images to the server which I access via:
INSERT > IMAGE > UPLOAD
however, sometimes I need to use image which I uploaded already, therefore Im looking for some file_picker_callback() script which would let me browse in the selected directory on the server (not hdd of user) where I upload images and let me choose the one I wish.
I havent find out any of the script which would do that, so I was hoping someone can point me out for anything free to use.
I load it like this:
<script>
tinymce.init({
selector: "#mytextarea",
language: "en",
plugins: "wordcount autolink link preview charmap directionality fullscreen emoticons media paste save spellchecker table searchreplace visualblocks quickbars image imagetool moxiemanager",
menubar: "file edit view insert format table tools",
image_advtab: true,
paste_data_images: true,
default_link_target: "_blank",
automatic_uploads: true,
file_picker_types: 'image',
relative_urls: false,
remove_script_host: false,
document_base_url: "http://www.somehost.com/",
images_upload_url: '../uploadChecker.php',
images_upload_credentials: true,
file_picker_callback: function(callback, value, meta) {
},
});
</script>

Add Image to GitHub Readme.md from Google Drive

I have the image in Drive, How could it be added to the Readme.md so as to display the image in readme.
I had tried with the shared link, but it isn't working.
For example, I have a.jpg on the google drive.
Right click the image and click Share...
Click Advanced and change the Who can access option to Public on the web - Anyone on the Internet
Copy the link to share and you will have something like
https://drive.google.com/file/d/<FILE_ID>/view?usp=sharing
Copy the <FILE_ID> to make a link like this:
https://drive.google.com/uc?export=view&id=<FILE_ID>
Insert image in Markdown as ususal using the link from step 4. For example:
![image](https://drive.google.com/uc?export=view&id=<FILE_ID>)
Example: I have this octocat image in google, and its file id is 1913oZeBZPBNiUuk8gu3ZSbLBA2l_VQtG. You can try ![image](https://drive.google.com/uc?export=view&id=1913oZeBZPBNiUuk8gu3ZSbLBA2l_VQtG) in your markdown file or even in this answer.
Hope this helps.
How to insert an Image in a github-flavoured markdown format and be able to adjust its size
Upload the image image.jpg to your Google Drive
Click the get link button at the top right corner
Change the permission type to Anyone with the link
Copy (to clipboard) only the file ID <FILEID> from the full link as shown (highlighted in blue) and click Done. At the time of writing the shareable link takes the form:
https://drive.google.com/file/d/``/view?usp=sharing
Insert Image in markdown using the copied file id <FILEID> and anchor tag as shown:
<a href="https://drive.google.com/uc?export=view&id=<FILEID>"><img src="https://drive.google.com/uc?export=view&id=<FILEID>" style="width: 650px; max-width: 100%; height: auto" title="Click to enlarge picture" />
Note that the brackets '<' and '>' are not to be present with the file ID.
The size of the image can be adjusted in the style attribute by adjusting the width and the height as needed. Clicking the rendered image will open it to its original size

Dropdown list for Insert/edit video

I am integrating TinyMCE in my CMS and want to have a feature to choose a video/audio by selecting media icon instead of typing the path in Source field.
[https://i.stack.imgur.com/1zmlD.png]
I was able to achieve this for choosing images through image_list
but, did not have luck using external_media_list_url
You are referencing documentation for TinyMCE 3.x which is no longer being updated. Your screenshot appears to be TinyMCE 4.x so you should look at the documentation for that release:
https://www.tinymce.com/docs/
There are APIs to create your own file picker for TinyMCE 4:
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback
...and example of that is here:
https://www.tinymce.com/docs/demo/file-picker/

Inserting and Displaying images within the TinyMCE content editor in PHP site

I am currently using tinyMCE to edit content within my site and I am looking for a way display an image within the tinyMCE once it has been uploaded to the site.
Note: I am not looking for a means to upload an image directly into tinyMCE. I am looking for the tinyMCE command which would allow me to display an image within the content in the editor after I have uploaded it.
Thanks
You could insert a regular img-tag inside tinymce using a custom plugin or using the setup parameter in your tinymce init. The src should refer to the html location of the image to be uploaded. As soon as the image is available the image will become visible on next reload of the editors content. If you need further assistance feel free to ask.
After successfull uploaded you have the source of the image (img_src). Now you need to add it to the editor like this
tinymce.activeEditor.insertContent('<img alt="photo" src="' + img_src + '"/>');