I wrote a TinyMCE plugin for Wordpress that drops a prepared bit of HTML into the textarea when a button on the toolbar is clicked. This is to assist in formatting some relatively complicated elements.
I would like for this piece of HTML to be wrapped in some sort of container that TinyMCE recognizes and allows for easy selection or deletion if needed.
Currently, the only way to delete an individual element is by erasing all of the information each individual "sub element" contains. I can't seem to find any information in the API regarding manually assigning an element as a singular combined object. As far as behavior goes, think "resize frame" or something similar (only this won't need to have any resizing capabilities).
Any ideas?
If you want to wrap text/html inside an element of your choice (i used a span here) at the current cursor position of tinymce editor instance ed you can simply do
ed.execCommand('insertHTML', false, '<span class="custom_to_delete">My_Text</span>');
Related
I am working on a WYSIWYG editor (customising someone else's code) and have encountered a few problems that I just can't seem to overcome.
So far I have been able to get most custom divs working, but I am having some trouble with a few things:
Problem 1: If the cursor is before a div element, I am able to press delete and begin to remove the contents of the div without removing the actual div itself. This is how the element should look within the WYSIWYG for example:
But after pressing delete when the cursor is before the element, I get the following:
How can I check if the next element is this custom div and cancel a delete key press?
Problem 2: I am also able to press backspace after an element, which causes any text after the element to appear inside it, like so:
How can I check if the previous element is my custom div and cancel a backspace key press?
Problem 3: When inside a section (where the 'put content here' text is), I am using a div with the attribute contenteditable="true". Every time I press 'enter' within this div, a new <div> tag is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a div element?
I have looked far and wide on stackoverflow and have yet to find a proper solution to the problem that is cross-browser.
Disclaimer: I am a CKEditor core developer.
If you want to customise this there are three ways:
You can spend few months (or more) on learning about contenteditable, ranges, selection and all that stuff and trying to implement your custom handlers. You could of course spend only one week or month on that, but the result won't be great, believe me.
You can choose good, existing WYSIWYG editor.
You can lower your expectations regarding the expected behaviour ;).
Now, if you would decide to use CKEditor there's one new feature called Widgets which was introduced in recently released CKEditor 4.3 beta (4.3 stable is going to be released in max. 2-3 weeks). As far as I can see it may be very helpful in your case. Check out the Introduction to Widgets guide. In very short - it is possible to configure how enter key behaves in so called "nested editables" as well as to secure integrity of your custom markup.
I am using the KendoUI html editor, in inline mode. It works fine, but I have found some problems with the arranging of toolbar items. Namely:
I have added custom tools to the toolbar. They are not correctly 'tagged' with the k-group-start, or k-group-end classes, and thus thir edges, and margins are not correct.
I can't influence where the toolbar puts in the 'k-group-break' item (what makes a linebreak on the toolbar).
I have tried to modify these in the selection changed event (according to the demo page, that gets fired every time I click into the edited area), but the kendo built-in logic overwrites my changes after that.
Has anyone encountered this problem? What could be a good solution? I am pretty lost, since I haven't found anything on this topic in the kendo documentation, so some hack might be needed.
Just add a tool ".Separator()" in your tools list and it will create an empty "li" ..
<li class="k-separator k-group-start"></li>
you can than style this element to create the spaces, I have made this li as a block element so it pushed everything which follows down.
Hope this helps.
Cheers
I've had a horrible problem that I've been wracking my brain for the past two days for, and have yet to come up with a solution. As such, I think this needs someone smarter than I to accomplish.
What I'm trying to build is a textbox that simulates that of Facebook's; essentially, the tagging function.
Now if you've used Facebook, you'll have noticed that Facebook allows you to tag people in a comment/post, simply by typing in their name and selecting from a dropdown list. The name of the person you've selected then appears in highlighted text in that very textarea. I've successfully managed to create and populate the dropdown list a combination of JQuery and AJAX, but the tagging process itself is the stumper.
Once a dropdown item has been selected (by Enter or clicking), the query text will be replaced with the tagged name. Now, it's difficult to see how one can give text in a textarea any kind of a highlight, so I've discovered (by inspecting elements in Google Chrome and deleting the textarea node) that the textarea itself is transparent, and there is a white div below "simulating" the text. Highlighted words are placed in a tag with custom CSS, which gives it that blue background. All of this I've found out myself, and I have successfully simulated this - but I can only do one tag.
Now I've investigated further and found an input type="hidden" element, of class "mentionsHidden". This input element has a value attribute, which dynamically populates itself based on the content of the textarea. So if I typed "ABC", the value of the element becomes "ABC". If I included a tag, say "hi [Rei]!" (where the name in [] is the tag), the value of the element becomes "hi #[member_id:Rei]!".
So I HAVE done my homework. But here comes the part I can't figure out.
I can't figure out how exactly to dynamically populate the hidden input element with the value of the textbox. It's obvious that the underlying div giving the blue tag background is populated from the input element. But the input element is giving me a headache.
You see, I can't do the following:
-I can't simply "copy" the entire value of the current textarea and "paste" it into the input element's value, because that would override any previously tagged people in the input element (after all, the textarea can only possess plaintext).
-Even though I CAN locate the current index of the caret (the flashing black line in the textarea that tells you where you're going to be typing into), that's only for the textarea. Index position 10 in the textarea and in the input element's value might be different things, because this way of "tagging" people will result in adding additional characters to the value String.
-I can't simply do a "replace" of the text I am intending to replace, because there might be other instances of that same text in other parts of the value String.
I know it's a very long and confusing post, but I do hope you get what I mean. I really need a solution and I don't want to use contenteditable, because it's only for HTML5 and some older browsers might not support it.
Yours,
Rei
I hope you were able to come up with, or find, a solution to your problem. Since there doesn't seem to be one here, i'd like to offer one for and anyone who might stumble upon this (as well as you if my assumption was incorrect).
You are going to need to maintain explicit locational data of each existing mention in the textarea in the order in which they appear. If, after a modification of the content in textarea, the position of a mention in it is changed, you will need to determine which appearance of its value, if any, will be used to represent it, and appropriately update the locational data of the mention.
With such a collection of data, it becomes trivial to construct the value of mentionsHidden, though the existence of such data makes the element unnecessary.
Mentionator is an existing, robust solution which takes this approach in providing the functionality you are trying to recreate. Considering it is well-structured, easy to follow, and copiously commented, it should be of use to you as either out-of-the box solution or reference material to cite as you roll out your own. It is maintained by yours truly :) .
I want to make a webpage that allows a user to select and copy an HTML entity with a single click, and using ZeroClipboard should be good enough for this. I want to have tens, maybe even hundreds of copyable HTML entities on the page, so I would prefer not to have a ZeroClipboard client for each entity. The solution I came up with is to have a table of HTML entities where each td contains a different HTLM entity, and captures onmouseover, so I can determine which HTML entity the user wants. Then I glue the ZeroClipboard to this table to capture the onclick. By default the ZeroClipboard object has z-index 99 so it sits over the table. Unfortunately since the ZeroClipboard object has nothing to do with the table semantically the events can't propagate to the td which is hidden underneath.
Is there a way to capture the onclick on the ZeroClipboard object (embed) with a z-index of 99, and also capture the onmouseover on the td that sits underneath with a z-index of 1? Do I need to find the coordinates of the mouse cursor to do this? I would rather not do that because a) it's messy and b) technically impossible with the W3C specifications.
I've frozen two copies of my current code:
ZeroClipboard embed z-index=99 : http://www.aidansean.com/physics/symbols_static.php
(This can copy the "..." contents of the box in the upper left.)
ZeroClipboard embed z-index=-99: http://www.aidansean.com/physics/symbols_static_2.php
(This can change the "..." contents of the box in the upper left.)
I want to combine the functionality of both of these pages. Any help greatly appreciated!
Finally, there you go. Some other options I tried, didn't work. Is this a helpful solution? :)
JSFiddle: Click at embedded with lower z-index
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.