Select specific text from content editable div - javascript

consider below content editable div
.editable-div div {
display: inline-block;
}
<div contenteditable="true" class="editable-div">
<div> This </div> <div> is a an example</div><div> for inline block</div> <div>elemenst </div>
</div>
Put mouse cursor on anywhere in the content
Press shift+home
It will select only inline-block div content
I want to select the whole content till beginning of the div
I can not change inline-block style of inner divs
Due to above reason(5) I am doing an custom implementation for shift+home and shift+ end, that is why I need to select specific text from a div
*Select as In text selection (user-select) of browser, I already have links for selecting whole content of a div Selecting text in an element (akin to highlighting with your mouse)
but here I want to select specific text only. please help

I think window.getSelection() is what you're looking for.
var selection = "";
function getText() {
if (window.getSelection) {
selection = window.getSelection().toString();
} else if (document.selection && document.selection.type !== "Control") {
selection = document.selection.createRange().text;
}
return text;
}

Related

Only apply styling to selected text in content editable <p>

Problem
Hi, I have some code that when a button is clicked, all of the content in a contentEditable <p> tag will have a font-weight of 600 (bold).
What I'm wondering is how can I make it so when the button is pressed, rather than style all the content in the p tag to 600 font weight, only style the selected text. For example, if you only highlight the first two words of the p tag and press the button, only the first two words will have their font-weight changed.
Image example
In the example, when the button is pressed, only the first two words would have their font-weight changed.
Link to the fiddle containing code: https://jsfiddle.net/AidanYoung/9tg4oas5/
here is your solution.
function changeBold() {
const text = window.getSelection().toString();
var btn = document.createElement('span');
btn.innerHTML = text;
btn.style.fontWeight = 'bold';
document.execCommand('insertHTML', false, btn.outerHTML);
}
<p contenteditable="true" id="contenttxt">
Some text in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
You can use the span label and add ID
function changeBold() {
document.getElementById("strongC").style.fontWeight = "600";
}
<p contenteditable="true" id="contenttxt">
<span id="strongC">Some text</span>
in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>

JavaScript execCommand("HiliteColor") unhighlight

JavaScript execCommand("HiliteColor") adds highlights really nicely by adding spans but I wanna be able to dynamically unhighlight text by checking to see if the selected text is in a span that is highlighted. Then there's the issue to wear of only half the selected text is in a span. I've tried adding the spans myself and trying to unhighlight them by:
document.getElementsByClassName('highlight').remove();
alert(window.getComputedStyle(document.getElementById("pages"), null).getPropertyValue('background-color'));
alert(document.getElementById("pages").style.backgroundColor);
Just to see if I could check the background and then highlight or if I could remove the class highlight.
My project is on codepen at: https://codepen.io/pokepimp007/pen/wxGKEQ
ANSWER
I created a function that takes a color parameter when a button is clicked. When delete highlight button is clicked it sends the parameter color "transparent":
function Highlight(color) {
document.designMode = "on";
var sel = window.getSelection();
sel.removeAllRanges();
var range = document.createRange();
range.setStart(editor.startContainer, editor.startOffset);
range.setEnd(editor.endContainer, editor.endOffset);
sel.addRange(range);
if (!sel.isCollapsed) {
if (!document.execCommand("HiliteColor", false, color)) {
document.execCommand("BackColor", false, color);
}
}
sel.removeAllRanges();
document.designMode = "off";
}
I saw you use jQuery so added the jQuery tag to your post.
This does the trick.
$('#removeHighlight').on('click', function(){
$('.highlight').each(function(){
$(this).replaceWith($(this).text());
})
})
.highlight {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a stupid bit of text with <span class="highlight">highlight_1</span> in it to display the power of jquery to do stuff like removing <span class="highlight">highlight_2</span> in a html document. Go on and press the button to see the <span class="highlight">highlight_3</span> magic.</p>
<button id="removeHighlight">Remove</button>
If you only want to remove one highlight do this.
$('#removeHighlight').on('click', function(){
$('.highlight').first().replaceWith($('.highlight').first().text());
})
.highlight {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a stupid bit of text with <span class="highlight">highlight_1</span> in it to display the power of jquery to do stuff like removing <span class="highlight">highlight_2</span> in a html document. Go on and press the button to see the <span class="highlight">highlight_3</span> magic.</p>
<button id="removeHighlight">Remove 1</button>
Or if you want to remove it on click
$('p').on('click', '.highlight', function(){
$(this).replaceWith($(this).text());
})
.highlight {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a stupid bit of text with <span class="highlight">highlight_1</span> in it to display the power of jquery to do stuff like removing <span class="highlight">highlight_2</span> in a html document. Go on and press the button to see the <span class="highlight">highlight_3</span> magic.</p>

hide/show text area with textEditor depends on dropdown value

I use the NicEdit(www.nicedit.com) text-editor on my Text Area which is working and the below code to hide and show text area after selecting a value in the drop down it will show the text area but this is what i need help with;
1) i want the text area to show even before you select any value from the drop down.
2) i want the Text editor(NicEdit) to show on all the text area after selecting a value from the drop down to show the text area.
Js For Text-editor(Nicedit):
<script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 200}).panelInstance('area');
});
</script>
Js to hide and show text area:
<script type="text/javascript">
function showHide()
{
if(document.getElementById("color_dropdown").selectedIndex == 1)
{
document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
}
if(document.getElementById("color_dropdown").selectedIndex == 2)
{
document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
}
if(document.getElementById("color_dropdown").selectedIndex == 3)
{
document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
}
}
</script>
Html drop down:
<select name="menu" id="color_dropdown" onchange="showHide()">
<option>Select Meun</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<textarea id="hidden1" name="area" display:none;" id="area">ggggggggggggggggg</textarea>
<textarea id="hidden2" name="area" display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
<textarea id="hidden3" name="area" display:none;" id="area">yyyyyyyyyyyyyyyyy</textarea>
Just a small note, you have more have multiple id attributes per text area and the second id's have the same value, this should be a class. The "display:none;" in your textareas are not in style tags(style="display:none;"), also try linking/loading the javascript at the bottom of the html page just before the the last html tag(or last body tag).
I am not sure if this will fix your problem, but these could be issues.

Mouse wheel scroll event

What I want is : when mouse points on a div, page's scroll bar doesn't scroll. Is this impossible? When I do this, the page's scroll bar always scrolls. Here is a piece of the javascript code:
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
How to do that?
Here you go:
var noscroll = document.getElementById('noscroll');
var locked, lockedX, lockedY;
noscroll.addEventListener('mouseover', function (){
locked = true;
lockedX = window.scrollX;
lockedY = window.scrollY;
}, false);
noscroll.addEventListener('mouseout', function (){
locked = false;
}, false);
window.addEventListener('scroll', function (e){
if(locked === true){
window.scrollTo(lockedX, lockedY);
e.preventDefault();
}
}, false);
Change the variable noscroll to whichever element you don't want to allow scrolling on.
Demo
You can basically achieve it through css by specifying width, height and overflow properties for your div:
<div style="width:100px; height:100px; overflow: auto;" >
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
</div>

Jquery: run code when text is selected

I have a HTML document which llokes like this:
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
I want text No text in the div above is selected to be changed to Some text in the div above is selected when, guess what, some of the text in the div above is selected :)
jQuery has a .select() event, that would make this rather easy to do, but seems, that it works when selected text is inside input or textarea.
Here is a code that I've tried:
$(document).ready(function()
{
//Some text inside div is selected
$('DIV.this_can_be_selected').select
(
function()
{
alert('Something is selected!');
$(this).next().html('Some text in the div above is selected');
}
);
}
);
Nothing is happening.
Is there a way to solve this problem?
jQuery core doesn't have anything for this, but there are some plugin options.
Your code would look like this:
$(function() {
$(document).bind('textselect', function(e) {
alert('Selected Text: ' + e.text);
});
});
You can test it out here.

Categories