I have a simple v-textarea
<v-textarea v-model="text"/></v-textarea>
Is there a way to detect that a link has been inserted and make it change color and be clickable?
Such as this https://stackoverflow.com/.
You cannot make clickable links inside textareas (v-textarea is just a wrapper around a native one). They are for plain text only.
As a possible workaround you can you can make a div, copy formatted content from the textarea to this div with the appropriate wrapping of links into the tags and then switch the textarea and div on blur event or maybe a custom switcher
Related
I need to hide and show the editor based on event.
I initiate the editor. then, i try to hide using the code:
$('#textare').hide();
but it doesn't work, since it as I think initiate iframe
so how can I show and hide editor
Update: I'm sorry forget to add editor name.. I use wysihtml5.
I think the way that editor work is hide the textarea and make iframe
so the above text couldent hide the editor.
The textarea should already be hidden since it will only be used as a fallback. The editor itself is contained in an iframe with class wysihtml5-sandbox. So this should toggle the editor
$(".wysihtml5-sandbox").hide()
Flow:
My code adds a div with resizable and sortable features on button click.
And I enter the text in text field and I'll add that text to that particular div on
click.
Facing problems:
Everthing goes good, but resizable is not working after text insertion. I dont know why. I got the solution also, like before appending text i'm destroying the resizable feature to that particular div and attaching after append is over, I think this is not proper solution. Can any one tell why it is happening like that.
Would I be shooting myself in the foot by using a div with attribute contentEditable="true" as a text field rather than a textarea?
It would work fine, but it'd be a little bit more difficult than a form, simply because you're going to have to wire up your own logic to make the button's click event track down the correct div, get its content, and then perform the submission. The advantage of a textarea is that the browser takes care of all that for you.
It's not the same thing. First semantically, the purpose of a textarea is to write/edit plain text whereas with contentEditable you can edit list for instance (see: htmldemo)
Second the behavior is also different. For example, in chrome when you test the link below and that you delete all the content you loose the focus (the div element disappear) which is not the expected behavior, or if it is it's idiot.
The Gmail's mail edit box is also a div with contenteditable="true". The major benefit is it has auto-adjust height as user input text/content. Also it supports rich text inside. You can mimic the Textarea by setting a max height if need.
On the other hand if you want auto height in Textarea, you might have to use js to bind some listener to the oninput hook.
In divs with contenteditable="true" the content can be html formatted, e.g. text with different colors.
See also https://stackoverflow.com/a/40898337/11769765.
I'd like to take the selected text on screen (text highlighted with the mouse) and when a button is pushed wrap that text in a tag. I'd like to use jquery but if it can be done in another framework that would be fine too.
I haven't been able to figure out how to do this yet, so any thoughts are appreciated. Also I know you can run into issues if the text goes across several elements so for now case just assume the text highlighted is all contained in a tag.
Thanks!
Highlighting the selected text doesn't necessarily require you to wrap it. In fact, trying to wrap it is difficult if the range of the selection spans multiple tags (i.e. doesn't surround nicely closed tags).
Here's an answer that highlights the current selection without wrapping it: Javascript Highlight Selected Range Button.
He uses execCommand to let the browser highlight the current document selection for you. Pretty sweet.
Here is a post on working with selected text. The getSelection() method can be used to get the selected text, then you should be able to replace that text with text wrapped in a tag.
The jquery autocomplete provided by http://docs.jquery.com/Plugins/Autocomplete can work on a INPUT field or a TEXTAREA field. I have a use-case to make a DIV element act as a TEXTAREA by setting its attribute to contenteditable="true". Can I use the DIV's DOM handle for the autocompleter to behave as a textarea for the autocompleter. Currently the plugin 'as is' is not working for the DIV. What changes should I do for the plugin to work for all the above elements?
How to make jquery autocomplete to work for a contenteditable DIV instead of just INPUT, TEXTAREA fields.
Tags on a page matter. If your div wants to act like a textarea, maybe it should be a textarea styled to look like a div. You can render your html in a separate div and position it on top of the text area.