tinyMCE supports dragging images from a website (not local file browser) to the rich text editor field. They get converted to and <img src=''>...</img> tag and are immediately displayed as images.
I would like to change the src url of the image tag when it is inserted that way. I tried using the urlconverter_callback handler and the paste_preprocess handler from the paste plugin but neither of them get triggered when I drop the image to the editor field.
Which callback can I use to react on an image drag&drop to the editor? Or is there another way to change the image src when it's dropped?
(urlconverter_callback works when I add the image with the 'Insert Image' button but that's not what I'm looking for.)
The key relies on what's already told: Drag-n-Drop events belong to the browser domain, so TinyMCE knows nothing about them unless we bind them, which in this case it's not necessary.
It's also important to have in mind the way Drag-n-Drop interactions share information between the different events: reading and writting the dataTransfer property via getData and setData functions.
That said, this is my aproach (note I'm using jquery for selection and event binding):
Bind the dragstart event to the image, so it fires when we start the interaction. Make the string replacement and store the result on dataTransfer.
https://gist.github.com/3040473
Useful links:
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
Related
I am creating and displaying a PDF file which happens after I click a certain button. This all happens in a new tab (target="_blank"), and is all coded server-side.
How can I put a "loading image" when the new tab opens to show that yes a PDF file is being created, please wait.
Thank you and all suggestions are welcomed.
Rather then link directly to the PDF, create an HTML "wrapper" in which you put an object tag whose style allows it to cover the entire window. You can then put a standard loading gif (or whatever) on top. Using the object onload event, hide the loading image when the PDF is loaded. Then use JavaScript to set the data property of the object tag to the PDF.
How can I show documents created with Ckeditor in read only so that they as much as possible like in the editing mode but without having to create the editor for each message?
In my project users can send messages to each other among many other things and they create the messages using Ckeditor. I would to render message threads in readonly mode without having to create the Ckeditor for each message. Doing that would be slow and would consume a lot of vertical space. Another problem with that approach is that removing the toolbar removes formatting. I would like to just have the messages in div tags and add a class to them and then include Ckeditor css file. Or also acceptable would be to have one element with certain class whose children would get the Ckeditor styles. Before putting the messages in the html response I do whitelisting on the server so the docs are safe to put inside for example a div tag.
I solved this by wrapping the message in an iframe element and added dynamically a style element that links to the Ckeditor style sheet. Now the message gets Ckeditor styles and I don't need to create the editor at all in the read only state and the rest of my page unaffected by the Ckeditor styles.
I'm modifying a website, built with AngularJS, and in one page I have a WYSIWYG editor.
The whole widget that includes the editor, is a div that has 'ng-controller="TextsController"'.
In this div I have a button, clicking on it displays the editor. And the initializing of the editor happens in a directive - "richTextEditor".
So - I'm making a popup in this editor, that has to show some images from the server. I put the code for pulling the images in the controller ... and there I set
$http.get('/url/to/files').success(function(data) {
$scope.imagesFromServer = data;
});
and in the view I have
'ng-repeat="image in imagesFromServer"'
And the problem is that the ngRepeat doesn't see any items.
I have two ideas:
The view, containing the ngRepeat (the HTML for the editor, and the popup with the images as well) loads with AJAX, and at that very moment the scope variable is not set.
I'm initializing the scope variable in the wrong place. (Eventually has to be in the directive instead of the controller? ... but all examples I've seen and done so far - pull every data in the controller, and the view sees it directly.)
Hope I've described the situation clearly.
Thanks in advance.
Fairly new to CKEditor here. I'm aware that you need to call the updateElement() method for CKEditor to send the current editor content to the related textarea element. From there, you can call the getData() function to get the content. (Although I don't understand why there are two steps to get the editor content, instead of one.)
However, I want to get the current content directly from the editor, without changing the related textarea content. Is there a CKEditor method to achieve that, or is it a case of using jQuery to find the editor content?
The getData method will return the raw HTML from the editor.
I want to design a web album with every image in the album having it's own title, and description. So, at a time only one set of image, title and description would be visible. And on clicking next button, the next set of image, title and description would appear,and so on.
So am wondering, what would be the best way to design with? HTML or AJAX?
I don't want to use the ready to use tools such as lightbox.
Do you want the browser's back button to work? If so, then you should make your life simple
and use html (since you will only be displaying one image at a time either way).
Ajax implies using html. On the other hand, using html does not necessarily imply that you need to use AJAX to load content dynamically.
What is the purpose of this project? If you are doing it for the learning experience you should go on with AJAX (from scratch). If you want speed and quality use an existing web image gallery. If you need to write it yourself use plain html (or an ajax framework such as dojo, jquery, etc. this will save you a lot of pain solving cross-browser quirks).
In addition, if you want to be able to click a button to take you to the next (previous) image
and you don't know how many images you will have beforehand, then you are looking for dynamic behavior. You can code dynamic logic either on the client side (javascript), or on the server side (let's say "php" to start with).
Also, how do you plan to keep the corresponding (image, title, description) together?
If you only have a 3 images, say you could hard code each of this into its corresponding html file. eg. 1.html, 2.html, 3.html. Then you would have to point the forward button from a.html to point to b.html. etc...
If you didn't want this boring static behavior and wanted something smarter, say you decided for AJAX. Then you would only have 1.html file and from there (using javascript) you would ask your server for the (image, title, description) and load all that (dynamically, without refreshing the browser) into the same page. The easiest way to get this from the sever is by just reading a a static (XML, or JSON) file which contains all the info (image urls, titles, descriptions). Then with javascript and using DOM manipulation you would remove the old image, and add the new one.
However, this would all be a lot simpler with server-side processing (and it's worth learning). In this case you could have a url which takes a parameter with the image number. eg. http://example.com/gallery/index.php?image=X
then before the server responds to the client with the html, it would realize that you want to load image X so it would get it's corresponding description, title, and url. and "embed" those into the file. Of course, depending on the number, it would also add the right links for the previous and next buttons. Eg. If the currently displaying image was 9 then forward button would "dynamically" be determined to link to (X+1) : http://example.com/gallery/index.php?image=10