I am using Summernote but replicating the Medium editor.
When inserting images, I only allow them to be inserted into their own paragraph tag. No text can be mixed in side paragraph tags with an image.
I give each paragraph with an image inside a class of 'has-image'. What I now want to do it not allow the user to enter any text inside of the paragraph if it has that class.
If they try to click inside the tag it will instead focus to the next paragraph.
Any help how to do this? I have tried triggering a click on the next paragraph but no luck:
$(document).on('click', '.has-image', function() {
$(this).next('p').click();
});
I can set the text of the next paragraph so I know its selecting fine but cant think of a way to actually place the cursor inside.
JSFiddle as example: http://jsfiddle.net/vXnCM/5583/
U may need to work with Range
$(document).on('click', '.has-image', function() {
r = document.createRange()
r.setStart($(this).next('p')[0],0);
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
});
NOTE: It only works for most modern browsers except IE.
For IE capability, Check https://code.google.com/archive/p/ierange/
Related
I need to change the text that appears in the status bar of Chrome. Since it's not possible to use status.text anymore (for security reasons) I am wrapping an <a> tag over <body> so my code is <body>...</body> .
It's working as expected cause every time the user moves the mouse inside the page the status bar shows exactly what is inside the href attr of <a>. The problem: I did not realize till now that I cannot select any text inside the page cause if it's treated as link. I am using return false onclick event of and it works great cause the user is never redirected however it's not possile to select text inside the <a>.
Is there a CSS property that allows me to change that behaviour? It only occurs if <a> tag.
For the sake of hacking. This is invalid markup and bad code, but as a proof of concept (at least for Chrome).
One could use various combinations of mouse events, range selection and editable. Tricky part is to calculate what and where to select.
Sample code should give you selection of the first words in a paragraph; as in: click on the start of each paragraph like somewhere in "Lorem ipsum" or "Duis posuere" to select some of the words. This could then be combined with mousedown, mousemove, mosueup etc. to select correct text.
Chrome only Fiddle
You can try the CSS property pointer-events.
a{pointer-events:none} would disable the mouse event for that element.
But a better approach would be to add the URL in data-attribute and on click event you can navigate to those URL with location.href.
Will that help?
Ok, just for fun, and this is not the real hack but it something close:
Do like this:
<body>
<div class=container>bla bla bla</div>
<a href="my custom text" id=the_hack></a>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(".container").hover(function(e){
$("#the_hack").trigger("focus");
});
</script>
Of course it will have some limitations, when you select text the status bar will disappear, also if you highlight text move the mouse out of the div than back in, the selection will be lost, but hey it's a hack.
See here what I mean.
Usually, when a marked piece of text is dragged and dropped into a HTML input element, the marked text is copied at the cursor location (and added to any existing text) in that input field. I would like to change that behavior using jQuery such that it resembles the behavior of (e.g.) the Firefox address field, that is:
Text can be added and modified by typing (as usual).
When text is dragged from outside and dropped into the input element, all existing text within the input is replaced by the dragged text.
When text is dragged and dropped within the input filed, then the dragged text is moved at the cursor's location. (nice-to-have feature, but not that important)
Does anyone know of a way to achieve this? Any help is appreciated.
It seems to me that to this end, I need to recognize some kind of "drag-and-drop" event and access the dragged text, although I don't know if this is even possible. A (non-functional) mock-up of the scenario I have in mind would look like the following:
HTML:
<p>drag-and-drop text into this:</p>
<input id="giveittome" value="some text"></input>
<p>other text</p>
<p>more text</p>
<p>whatever</p>
JavaScript:
$('#giveittome').on('drag-and-drop' , function (event) {
$(this).val(event.getDraggedText());
});
source # jsFiddle.
Try this: (it will work in most modern browsers)
$('input').on('keydown change paste drop',function(event) {
var _this = this;
setTimeout(function() {
console.log(_this.value, event.type);
}, 0); //this timeout is necessary to get the value
});
Fiddle: http://jsfiddle.net/maniator/7skY7/
This is a followup question to Removing <span> tag while leaving content intact, with just javascript
If I use spans to highlight text in a page, it breaks up the content into new nodes. And then, when I remove the highlight spans using replaceChild, the nodes remain separated. I would like to have the original text merged back into a single text node, instead of three text nodes - the text before the highlighting started, the text that was previously highlighted, and the text after the highlighting ended. Is this possible to do?
You could try something like
containerElement.innerHTML = containerElement.textContent;
Not sure that will work on IE prior to 9 though because of textContent.
Similar to Jim's suggestion but accommodates IE:
containerElement.innerHTML = containerElement.textContent || containerElement.innerText;
Or a much longer version:
var text = containerElement.textContent || containerElement.innerText;
while (containerElement.firstChild) {
containerElement.removeChild(containerElement.firstChild);
}
containerElement.appendChild(document.createTextNode(text));
I think the first is simpler.
I'm trying to design a simple rich text editor using the contenteditable feature and need some help with this function that wraps the selection with tags (eg: <em>)
Example:
I start with this
<div contenteditable="true" id="editor">123<strong>abc</strong>xyz</div>
Selects a some text
3<strong>abc</strong>x
and then click on the button that executes the tag wrapping function.
<div contenteditable="true" id="editor">12<em>3<strong>abc</strong>x</em>yz</div>
How can I find the starting and ending of the selection to insert the opening and the closing tags?
I've been stuck for hours, any help would be great.
Try this:
var italicize = function () {
document.execCommand('italic');
};
Just call this method whenever you wish to italicize the selected text.
See fiddle - http://jsfiddle.net/UdPAC/12/
If you have a paragraph of normal text, you can click anywhere inside the text and drag your mouse to highlight it. However, if the text is inside an anchor/link tag, it won't allow you to click and drag -- the link catches the mouse and prevents it from happening.
To see what I mean, find a text link on this page and try to click inside it and drag to select it. It won't let you -- you'll have to click outside the link and drag around it.
What do you need to do in JavaScript/JQuery to temporarily disable the link long enough for you to drag and highlight it?
The reason I can't just start outside the link is because every word in the paragraph is within a hyperlink -- it's a video transcript and each link is synced to a segment in the video.
My first thought was to do something like this:
$("a").each(function() {
$(this).replaceWith("<span class='link' data-href='" + $(this).attr("href") + "'>" + $(this).text() + "</span>");
});
$(".link").click(function() {
window.location = $(this).data("href");
});
However, there may be a much better way of doing this. The code above converts all a elements into span elements, keeping the href attribute value, and then makes the span elements with class "link" function as links. You could style the span elements to look like a elements currently do on your page.
Here's an example of the above in action.
You could try this solution, loading the original text into variables and then restore them.
But that seems too messy. Sometimes a simpler solution is better.
Why not have two paragraphs and set visibiltiy='hidden' when the user clicks on a button to hide the paragraph with links and show the paragraph without links?
Page weight doesn't seem to be an issue, since you're anyway loading video.