Paste Image Into TinyMCE Editor - javascript

I am looking at ways to Paste an Image into TinyMCE editor, I have been googling it for a while, but couldn't find any related answer.
I can append an <img> with src content to the Editor(when i paste the image on the page other than inside the editor).
I am not able to paste it inside the Editor. I am using Javascript and jquery. Has anyone got an idea, how i could do this.

Enable paste_data_images
Setting paste_data_images to "true" will allow the pasted images,
while setting it to "false" will disallow pasted images.

You can't do that. TinyMCE and any other editor out there are giving you the functionality of creating rich text content. Displaying an image requires an URL and there is no URL to the image on your machine.
You need to upload the image to a server. You need to be able to access that image through a link. That link is what you insert into TinyMCE.

Related

I want to integrate Medium's.com text editor in my Django Blog where users can write articles thoroughly?

First of all use medium's editor thoroughly if you didn't before, I want as it is that of Editor, if user want to upload image then editor save image, video etc on its own server then provide us images videos link by img tag..
I've done this previously using TinyMCE. You need to add tinymce js link in you base html and initialize tinymce in template where user will be writing post. An example of template you can see.
This is how the post looks.

Get iframe element of current CKEDITOR instance

CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?
If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow
I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).

Edit Image/Image Details - Replace button missing

I have a strange problem. I am dynamically populating content into Wordpress' tinyMCE editor. Part of this content is a placeholder image, that the user can then replace. The issue is when I click the 'pencil' icon to edit, I am not given the "Replace" button like I would any other images.
This is what I see: http://imgur.com/Bjoencj
This is what I expect, and works on images imported from the media library: http://imgur.com/fra3PfX
Notice, the replace button is present in the second example. I guess because the image is hard-linked and wordpress has no way of knowing if the image exists in the media library. How can I dynamically import an image so this functionality is present?
Are you inserting the placeholder image with the setContent function?
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
Perhaps you can try adding the placeholder image to your media library.

HTML - how to display local data in img tag?

I have an editable div and a user can paste a picture copied from Office Word. After doing so an image-tag can be seen in the source code, but the path does not work anymore. If I just enter the source link into to the browser, I can see the image. How to modify the link to make it work?
HTML
<img src="file:///C:/Users/myname/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" v:shapes="Grafik_x0020_1">
You can't open local file in site without user interaction. Browser won't allow that, because it would be great security flaw.

CKeditor with a url-prefix for image tags

I am using CKeditor to allow users to add images to their textboxes in a CMS.
A possible scenario is this: I develop a new site for a customer at http://developer.com/customer/a. The base url is "/customer/a". But when I ship the finished site to their domain www.customer-a.com, base url is changed to "/" and all image links are broken.
I would like to CKEditor to save something like {base_url}/media/my-image.jpg, but still keep all the WYSIWYG-features of CKeditor. Is there a hook or event in CKeditor where I could replace for e g {base_url} before the html i viewed?
I would appreciate any hints.
The hard way would be to use CKEditor's html parser and traverse whole html text when its loaded into editor and check/correct url of img tags.
Second option, although im not sure if it can be applied on your case, would be to make all images dependant on CKEDITOR.basePath and determine just that when CKEDITOR is initializing.
Or just develop on http://developer.com/customer/a, but let images be placed on www.customer-a.com even for development :)

Categories

Resources