I've been messing around with this for a while now but I can't seem to get it the way I want. I basically have a table with links in the rows of a table. How would I get each table item to copy the text that's in the row using ZeroClipboard? Do I really need to put some invisible dom over each one?
http://code.google.com/p/zeroclipboard/wiki/Instructions
Zeroclipboard will make the invisible flash block that goes over your regular DOM elements and does the copy. You have to tell it where it should be positioned (there are a bunch of different ways to tell it where to go) and you have to give it the text that should go on the clipboard when clicked. It will handle all the rest. The instructions are fairly good if you follow them. Feel free to ask more specific questions about it if you get stuck.
In direct answer to you question - yes, you do have to put an invisible element over each page element that you want to copy something to the clipboard. But the zeroclipboard library will do most of the work for you if you follow the directions.
Related
I'm looking for something like this
<p>This website is open source. Made by ...</p>
But having all the text in one same tag/line and specify the link with css or javascript or maybe an even better html usage. I'm in react if that changes anything.
The reason I want to do this is because I am using i18next, to create a multilingual website and if I have 3 text elements (before, link and after) I unnecessarily need 3 entries to my translation json file, which when scaling up is impractical and also screams bad practice.
Think about the text as an incoming variable that needs to filter out the text to select as a link. I can only think of really dirty javascript ways of doing it, ideally I'm looking for a reusable solution.
Thanks!
I have a contenteditable div:
<div class="one" contenteditable="true">A</div>
If the user enters HTML, CSS or Javascript tags into that contenteditable div, how would I make it syntax highlighted?
So as the user types in variables, tags, etc, they are colour coded
This is not as easy as it might seem at first.
You can create your own solution using some existing highlighting library like PrismJS or HighlightJS and then implement a custom re-render functionality which saves the current cursor position -> parses the content & updates the look (this would be the task of the syntax highlighting lib), and then sets the cursor to the previous position again.
There is one "tutorial" by bililite which can help you with this task.
You can find it here.
TBH: I'm surprised that there (correct me if I'm wrong) seems to be no open source solution for this. Would there be a need for that?
I have an editable div. The content of that div looks e.g. like that:
This is a <ins>new</ins> chapter.
(The tags are not visible, they are for styling)
If you set the text cursor in front of the "new" everything is fine. But if you set the text cursor behind the "new", the cursor is inside the < ins >-tag and new typed text is also inside the tag:
This is a <ins>new and very interesting</ins> chapter.
But it should look like that:
This is a <ins>new</ins> and very interesting chapter.
How can I set the text cursor behind the tag and prevent that new text is written inside the tag?
OK. The first idea was to made the
<ins contenteditable="false">new</ins>
Inside the contenteditable="true" element. Further reading (contenteditable=false inside contenteditable=true block is still editable in IE8) tells that this is not as always interpreted good in IE. In this post there is a hack answer (https://stackoverflow.com/a/7522910/1125465) but I really do not agree. It is just a mistake which will probably be repaired in the next versions of browsers.
Next I followed this link (HTML contenteditable with non-editable islands) and I haven;t got good news. There is no way of blocking the ins tag from editing so simple. First of all a little note:
If this isn't an additional functionality You must be sure it works as it should. As You wrote The user isn't allowed to write inside the -tag, so all the options:
working in almost every browser...
working with a little bug...
working but if someone...
must be rejected. So if someone turns the javascript off, it should work too. In that case I've come to the first conclusion (as always): server side verification MUST BE DONE.
This will prevent the user from destroying Your database and doing things he can't.
After server side verifying (and showing notification if something is wrong of course) it is going to be additional functionality. So we should do all we can now, to make it work (but now there is no obligation).
NICE LECTURE :)
https://stackoverflow.com/a/7232871/1125465
http://jsfiddle.net/X6Ab8/
**SOLUTION **
I propose something like... I know this sounds a little bit more like old days with milion tags, but really this will work and will be great.
Make an additional span element between the ins elements (for example using php:
$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);
Make this span editable, and only this span editable (not the block container). That's all. Solution is simple, clean, much more efficient and almost 100% safe. And nice...
ADDITIONAL SAFETY when using javascript hacks
If You need it to be done fully with javascript (maybe someone has idea how?), for total safety I would propose additionaly something like this:
Add data-noneditable-id="id" to each non editable element inside the main block editable container. Now every non editable element has it own unique id (can be done using jQuery for example using selector $("div#editable ins")).
Run a javascript that will run through all the objects that has attribute "data-noneditable-id" and save their innerHTML in array (for example: 1 => 'new', 2=> 'added', 3=> 'inserted', ...).
Now if someone edit any of them, You can easily repair them.
PS. This should also help a little... (https://stackoverflow.com/a/4979828/1125465).
Hope it helps! Best regards.
Been trying to find a good solution for this, but I haven't discovered anything. I've found plenty of plugins that turn an input into a taggable text entry field, but nearly all of them are for adding "only" tags. The closest I've found is this: http://daniel-zahariev.github.com/jquery-textntags/
The problem with that, though, is editing. If you type 10 sentences and put a tag in each one, then click back up to, say, the 5th sentence and decide you want to add another tag, the styling gets all out of whack for several of the existing tags... Ultimately I would love to write a patch for this, but I need something quick and easy to implement.
What I ultimately need to end up with is a plugin that allows me to edit paragraphs of text, adding and deleting tags wherever in that text that our editors want without breaking the existing tags... make sense? Thoughts?
In another question, I asked why it takes so long to remove HTML content from a page with jQuery.
Apparently when removing HTML content from an element, jQuery has to march through each element and do... something.. I don't know exactly what. And this can take a vvery long time for large-ish HTML content.
In an effort to side-step the problem, I'm wondering:
Is there a way to add dynamic HTML content to a page, that uses jQuery, but NOT allow jquery to "adopt" the content?
In other words I want some subset of the HTML content in a page to be outside of the purview of active management by jQuery.
In this particular case, the content is within a jQuery accordion. So I want the accordion to work, but for everything beneath the divs for the accordion panels, I want jQuery to not be aware of those things. The goal is to short-circuit the very lengthy process it takes to remove that content, later.
Does this make sense?
possible?
What if, instead of doing something like $('#elementid').html(content), I just used the innerHTML property on the element itself, using document.getElementById() Would that keep jQuery out of the subcontent?
I guess I'll try it, but if anyone has any insight, I'd appreciate it.
If it is in the DOM, the jQuery knows about it.
It does sort of make sense but sidestepping it is going to be ugly.
The first thing that came to mind was embedding your content with iframes. I'll freely proffer that this is an absolute abomination of an idea, but it should work as it should be a whole new document and thus a whole separate DOM.
Is it important that this content be kept? If they are visible elements, you could simple hide() them instead.