Tinymce - Convert image url to html image url - tinymce

This is question about tinymce... Current image editor is slow for because it demands opening popup for every new picture I want to add. I have my own external image gallery where each image contains it's url so copy-paste of url's is very easy and fast...
I would like to have button similar to Bold that does following:
To editor I paste url of image (for example: www.site.com/image.jpg) and when i select this url and click on my new button it converts image url to <img src='www.site.com/image.jpg'> and shows image in editor.
I searched plugins and found nothing similar to this.
Any ideas?
Thanks in advance!
Ilija

solved!
In documentation there is example how to manipulate text in editor from external commands... end even set them as button

Related

How to add an image to a pdf using Capacitor pdf-generator plugin

I’m using capacitor pdf-generator plugin to create a pdf. I managed to do so as long as the html code is limited to non image tag, code in which I inject some dynamic data by nesting variable using ${ }.
Now, my aim is to bind the src attribute of an ```img`` tag to a variable so that I can change the logo displayed in the created PDF.
Where I fail: what appears on the PDF is a white space with dashed borders (check picture attached). So I guess that the path must be correct because if not it would show the missing icon (issue I went through before I could format correctly the path).
Anyone who already had that trouble?
Finally bypassed this issue by storing the base64 data when selecting a logo and using it directly in the img tag.
<img src="data:image/png;base64,${base64data} " />
You can convert the images to base64 here https://www.base64-image.de/
then add the codes directly to your image tag

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

How to stop tinymce convert an image url into img?

The queston is in the tittle. When I paste an image url into the textarea tinymce converts it into the image, How to force it leave only link?
Testing this on TinyMCE 4, on the full featured example given in the TinyMCE documentation, this does not seem to happen... When I paste an image URL there, the URL keeps there, no image replaces it.
What version of TinyMCE do you have? Do you have any custom plugin? Maybe this is being triggered by custom code?
You have to delete the plugin "paste"

ModX Evo: TinyMCE wont insert image path into image URL in selector

This is occuring on ModX Evo 1.0.15.
When I try to select an image (or file) using TinyMCEs image selector I can upload and browse for the image but when I select it to place within my text nothing happens - the image path area remains blank.
Heres a video demonstrating what happens: https://www.youtube.com/watch?v=VSgTsyj9B6k&feature=youtu.be&hd=1
Does anyone know how to fix this?
Weird, never had that problem.
Did you try update / reinstall of Evo? (or only tinymce and kcfinder)
Are config paths correct?
Try testing in Firefox, It's possible it's related to Chrome. If it doesn't work in Firefox, Reinstall the plugin.
Clear your cache and try selecting the image.
For a temporary solution if this doesn't work, just type in the image name into the box 'images/imagename.jpg' (minus quotes)
Good Luck

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 + '"/>');