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?
Related
I use SimpleMDE on my website for simplifying the usage of <textarea> as a text editor.
When trying to customize it, I ran into one problem: I don't know how to resize the text editor.
For example, when inspecting the result of the SimpleMDE code on my website, I found out the default height for the text editor is 20rem. I want it to be more than that.
I came up with one solution, but I consider it to be unreliable, since it is a method of my own, not a built-in one. I simply changed the CSS attributes for the CodeMirror class (as it is the container class for the text editor).
As you could probably guess though, I am looking for a built-in way to do this to avoid any problems and have it the intended way. So how do I do this?
Asked before but not really same. You guys said it's impossible to switch specified Color in a textarea. So I have seen some. I would like to make an BBCode editor highlight. Between the "[" and the "]" will be colored in any color, the rest will be normal. I am currently only starting learning javascript. Thanks for coming help!
And what is difference between JQuery and JavaScript?
first javascript is the main scripting language of the web.
And JQuery one of the librairie write in javascript to help developper to code faster and go forward with the language.
you can't do what you want directly in the textarea. For that you will need to add class in css in your text to render it as you want. You will need to externalize your text rendering.
What you will need to do what you want it's :
1- recover the textarea value in javascript (or JQuery it depend if you used it)
2- create a parser for you text that take each [] and apply a specific css class to render the color
3- display it in the dom. in javascript you will need to manipulate the site structure to make appear your text with your color where you want
I am a fan of using HTML placeholders, as it helps describe to the user what sort of content they need to input. However, sometimes you need to give the user more information than just a simple sentence. Basically I'd like to be able to add line breaks, tabs, etc. into my textarea placeholder. I've heard of using special coding to do this (And have written pieces of code using these), but I find it rather unreliable. For example, certain browsers will display different amounts of white space for the codes. An example of this code would be like the following:
<textarea name="parts" id="parts" placeholder="Some-Part
..."></textarea>
Thus, my thought at a solution would be to have the ability to put actual HTML elements into the placeholder. I have been researching on how I might accomplish this, but have been unable to find anything on it. Do you have any idea where I might go to find functionality similar or the same as this? Or, do you have an alternative of what I might be able to do to accomplish the same thing?
The placeholder attribute has plain text as its value, by definition. No tags are recognized. Character references are recognized, but the effects of characters like TAB U+0009 ( ) are defined to be implementation-dependent.
So no, you can’t have HTML markup there. Your ultimate problem might have a solution, but you have not described that problem. As a rule, if you need placeholder value that is not a short plain text string, you are trying to use the attribute against its definition. It is meant to be a hint that augments the field label and description, instead of replacing them. Normally, any descriptions that are needed should precede the field, and there you can use HTML markup as desired.
HTML is not allowed inside a textarea tag. I'd recommend a different UI/implementation, but you could do something like this:
<div contenteditable="true" class="myarea">
<em>Placeholder</em>
</div>
And then mimic a text area with a css class. Then you could clear the contents on focus
var firstFocus = true;
$('#myarea').focus(function() {
if (firstFocus) {
$('#myarea').html('');
firstFocus = false;
}
});
As you can see, it starts getting pretty ugly. This won't behave exactly the same way as the placeholder attribute either, so you'd have to manage text cursors and change events, etc. Generally I feel placeholder text is a rather poor UI since the info disappears as soon as you start typing :p
I was able to find this answer which uses js to insert line breaks.
Insert line break inside placeholder attribute of a textarea?
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.
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.