JavaScript execCommand("HiliteColor") unhighlight - javascript

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>

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>

RichEditor use execCommand('bold') twice append extra <span> label

I use execCommand('bold') to make the following text bold, but when I try it again to disable bold, then add other label like 'h' or something, It add extra label link this:
<h1><span style="font-weight: normal;">111</span></h1>
I wonder how to avoid this?
It should works
First of all if you really doing it correctly, it won't happen like that.
Please see the sample below, it should works.
document.designMode = "on";
function myFunction(event) {
if (event.keyCode == 16) {
// Press shift btn exec cmd for bold trigger
document.execCommand("bold");
//check in alert box when triggered
//alert( document.getElementById("thebody").innerHTML );
//check the updated code in console once triggered
console.log( document.getElementById("thebody").innerHTML );
}
}
<!DOCTYPE html>
<html>
<body onkeydown="myFunction(event)">
<div id="thebody">
<h1>Exec execCommand("Bold")</h1>
<p>Try to exec by pressing shift btn once highlighed</p>
<h2>Again execCommand("Bold")</h2>
<p>Select some text in this page, and press the SHIFT button to make the selected text toggle between bold and normal.</p>
</div>
<div id="preview">
</div>
</body>
</html>
Note/Advise:
However, if your problem persists in your version of code, please share with me the function that trigger this exec Cmd.
javascript code is just like this:
Editor.setHeading = function(heading) {
if(heading == 0){
document.execCommand('formatBlock', false, '<div>')
} else {
document.execCommand('formatBlock', false, '<h'+heading+'>');
}
}
Editor.setBold = function() {
document.execCommand('bold', false, null);
}
html is:
<body>
<div id="editor" contenteditable="true"></div>
<script type="text/javascript" src="editor.js"></script>
</body>

Select specific text from content editable div

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;
}

mouse over "a" element to display "p" element on page

could someone please write me some javaScript to show how I can mouse over an "a href" element to display a "p" element paragraph on the page.
I have the paragraph displayed:none with css; I want to associate the mouse over of a link to display the paragraph.
cheers
You dont need to use JS for this. You can do this using css also.
<a href="#link" class="hoverOn">
<p class="hoverContent">This is hover content</p>
</a>
<style>
p.hoverContent{
display:none;
}
a.hoverOn:hover p.hoverContent{
display:block !important;
}
</style>
You can use the jQuery .hover() method.
HTML
Link Hover
<p id="para">Hidden text goes here</p>
JS
$("#mousehoverhere").hover(
function() {
/* Effect during hover */
$("#para").slideDown(500);
}, function() {
/* Effect after un-hover */
$("#para").slideUp(500);
}
);
CSS
#para {
display: none;
}
Check the JSFiddle demo
I'm assuming you are not using jQuery, so you can use this piece of code to show the element when you hover the link.
document.getElementById("link").addEventListener("mouseover", function(){
document.getElementById("paragraph").style.display = "block";
});
You need to replace link and paragraph with the ID of your link and paragraph.
To also hide the paragraph again when your mouse leaves the link, add this code too:
document.getElementById("link").addEventListener("mouseout", function(){
document.getElementById("paragraph").style.display = "none";
});
I have made an example for you:
$(document).ready(function () {
var link = $('#myLink');
link.on('mouseover', function () {
$('.lorem').show();
})
})
.lorem {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my link
<p class="lorem">
lorem ipsum
</p>

Add class Remove class via jQuery...what am I missing?

I have an application that allows users to pick specific fonts for a textarea. Some fonts need to have different line-height attributes. I'm trying to make the line-height dependent on what font they clicked on. I can add the class 'larger-line' when they click on the id="larger-line", but I can't get it to remove the class when they click on 'standard-line'. I feel like I'm overlooking something very simple. Any thoughts? Also...I'm pretty new to coding.
HTML:
<textarea>
<div class="editable" id="standard-line">"Font A"</div>
<div class="editable" id="larger-line">"Font B"</div>
</textarea>
CSS:
textarea.editable {
line-height: 0.8em;
}
textarea.editable.larger-line {
line-height: 1em;
}
JS:
$("#larger-line").on("click", function (e) {
$("textarea.editable").addClass('larger-line');
});
$("#standard-line").on("click", function (e) {
$("textarea.editable").removeClass('larger-line');
});
$("#larger-line").on("click", function (e) {
$("textarea.editable").addClass('larger-line');
});
$("#standard-line").on("click", function (e) {
$("textarea.editable").removeClass('larger-line');
});
That code would match the following elements.
<textarea class="editable></textarea>
First off your code wont work because your putting html inside of a textarea. That converts the html into plaintext.
Look in this jsfiddle:
Jsfiddle
The following JS Code:
$("#larger-line").on("click", function (e) {
$("textarea.editable").addClass('larger-line');
});
$("#standard-line").on("click", function (e) {
$("textarea.editable").removeClass('larger-line');
});
The following markup:
<div id="standard-line">"Font A"</div>
<div id="larger-line">"Font B"</div>
<textarea class="editable"></textarea>
When you click on "Font A" or "Font B" it will add or remove the class "larger-line" from the textarea with class "editable"
I hope this helps you solve your problem.
You used "textarea.editable" which selects all textarea elements with the class editable. What I think you wanted to do was "textarea .editable" which selects all elements with the class editable inside of a textarea. However, textareas are meant to only contain text, so you'll get the html as text as output and it won't be selectable.

Categories