Develop Reference

How to insert text with "< >" characters into TinyMCE as plain text, without it being considered a HTML tag

In my project, I have used a TinyMCE text editor. I also have a button that, when clicked, my javascript code will copy the value from the button into the text editor.
For example : If the button value is [first_name], clicking the button will put the text [first_name] (short code format in wordpress) into the text editor.
That works, but now I have changed my button value from [first_name] to <<first_name>>. When I click the button it should put <<first_name>> into the text editor, but it is only putting <>. It is not putting the full value because the text editor considers <<first_name>> as a HTML tag.
Also, I have tried with HTML entities such as < and > but it doesn't work either.
Note: it should not be a source code editor. It must be a simple text editor.
Can anyone please guide me on how to solve this problem?
My HTML Code:
Button Part -
<div class="panel-body">
<div class="col-md-6" style="margin-bottom: 10px;">
<a class="btn btn-primary sInput_netadvimage" href="<<first_name>>" style="width: 100%">FIRST NAME</a>
</div>
<div class="col-md-6" style="margin-bottom: 10px;">
<a class="btn btn-primary sInput_netadvimage" href="<<company_name>>" style="width: 100%">COMPANY NAME</a>
</div>
</div>
</div>
Text Editor Part
<textarea name="content[]" id="tedit-1" class="tmeditor contentfield" name="area"></textarea>
Jquery Part
$(document.body).on('blur', '.contentfield', function() {
currentreplaceelement = $(this);
});
$(document.body).on('click', ".sInput_netadvimage", function(e) {
e.preventDefault();
var code = $(this).attr('href');
alert(code);
if (currentreplaceelement != '') {
if (currentreplaceelement.hasClass('subjectfield')) {
var a = currentreplaceelement.val();
var output = [a.slice(0, currentreplaceposition), code, a.slice(currentreplaceposition)].join('');
currentreplaceelement.val(output);
// currentreplaceelement = '';
// currentreplaceposition = '';
} else {
tinymce.activeEditor.execCommand('mceInsertContent', false, code);
}
} else {
tinymce.activeEditor.execCommand('mceInsertContent', false, code);
}
});

As you've noticed, everything between <> is being interpreted as a html tag in tinymce.
In you change the string in the href itself to use < and > it is also getting converted to < and > before it is inserted into the editor.
However you can insert < and > directly into the editor, and it will work as you require.
Add this function to convert the < and > to < and >:
function convertCode(code) {
return String(code).replace('<', '<').replace('>', '>');
}
and then call it when you are inserting code into tinymce like this:
tinymce.activeEditor.execCommand('mceInsertContent', false, convertCode(code));
That has worked for me before so I'm sure it will work here too.

Adding icons to pseudo elements

I'm trying to add icons to my navigation (which dynamically changes) via JavaScript.
Here is my code (or JSFiddle):
var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');
#icon:after {
content: attr(data-icon);
}
<div id="icon" data-icon="">
Icon
</div>
But it is not working, why? When tried to edit data-icon attribute manually, icon appears. Otherwise just unicode of icon.

HTML entities don't have any meaning in CSS. If you want to follow that path you need to decode it first:
var icon = document.querySelector('#icon');
var tmp = document.createElement("span");
tmp.innerHTML = '†';
icon.setAttribute('data-icon', tmp.innerText);
#icon:after {
content: attr(data-icon);
}
<div id="icon" data-icon="">
Icon
</div>
... or, alternatively, just type character as-is (as long as your application is written in UTF-8):
var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', '†');
#icon:after {
content: attr(data-icon);
}
<div id="icon" data-icon="">
Icon
</div>
Last but not least, CSS also accepts escape sequences but you need to use the appropriate syntax. This approach, however, does not seem to work for your specific character:
var icon = document.querySelector('#icon');
// Brackets added for visibility, not part of the syntax
icon.setAttribute('data-icon', '(\u0086)(\u2020)');
#icon:after {
content: attr(data-icon);
}
<div id="icon" data-icon="">
Icon
</div>
I presume it's related to the fact that U+2020 'DAGGER' (that works fine) is a regular character but the one you're using U+0086 'START OF SELECTED AREA' (which doesn't show) is a control character. As you mention in a follow-up comment, you're using FontAwesome and such libraries provide custom fonts that map certain code points to display icons (though they normally use private areas to avoid conflicts).

That is obviously because setAttribute is escaping your special characters...and anyway you need to use CSS encoded icons and not an HTML entity. use this convertor:
† → \0086
I would suggest working with meaningful names instead of hard-coded writing the icon's code into an attribute.
For example:
var icon = document.querySelector('#icon');
icon.setAttribute('data-icon', 'icon-heart');
[data-icon=icon-heart]{
content:'\2764';
}
(better that all your icons elements will have a shared class which shared properties)

Encoding minefield
See this StackOverflow answer for more details.
Answer updated (see comments and edits).
In short, I recommend using the character instead of any method of encoding it. It will be vital in this case that your HTML files are correctly encoded and that they properly inform browsers what the encoding is.
var js = document.querySelectorAll( ".js" );
js[ 0 ].setAttribute( "data-icon", "\u0086" );
js[ 1 ].setAttribute( "data-icon", "†" );
.css:after {
content: "\86";
color: red;
}
.css.char:after {
content: "†";
color: blue;
}
.data:after {
content: attr( data-icon );
}
.js:after {
content: attr( data-icon );
}
.red:after {
color: red;
}
.blue:after {
color: blue;
}
<div class="css">hard coded css content</div>
<div class="css char">hard coded css content char</div>
<br>
<div class="data red" data-icon="†">hard coded data-icon</div>
<div class="data blue" data-icon="†">hard coded data-icon char</div>
<br>
<div class="js red">data-icon by js</div>
<div class="js blue">data-icon by js char</div>

Is It Possible to get text of undo in javascript

Is it possible to get the 'text' which I will get back on undo. For Example: I have two paragraphs
Para1
Para2 <--- deleting para2 using backspace
When I will do ctrl+z or undo , para2 will be retrieved back. Is there any way in javascript to get that 'para2' will be returned in the undo option (I want to get 'para2' in some js variable. I know it will come in editor automatically) ? Search a lot but didn't get any solution. Any help will be highly appreciated
P.S: I need this because I want to remove some attributes in my html on undo.

UPDATE 2
Due to OP's question changes, I will address this one last time.
P.S: I need this because I want to remove some attributes in my html on undo.
Undo Retrieves deleted text
Delete Removes text
If you have a ton of attributes in your html, use the text editor's replace feature. What text editor do you use?
UPDATE 1
Added a new function getUndone(). Do the following to test it:
Delete some text.
click the ⤺ button.
click the Get button.
The undone portion of text will be back as expected.
The undone text is also stored in a variable (i.e. sel).
The undone text is also in clipboard.
The undone text is displayed as well.
Used execCommand('undo') to undo.
Used execCommand('copy') to store in clipboard.
Used window.getSelection() to retrieve selected text and store in sel.
Used .toString() to display undone text.
execCommand API is made for creating text editors. It has a ton of methods and properties. The following Snippet has bold, italics, underline, and undo.
document.execCommand( 'undo',false,null);
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
body {
font: 400 16px/1.4'serif';
}
#editor1 {
border: 3px inset grey;
height: 100px;
width: 381px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 358px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<div id="editor1" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</div>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button>
<button class="fontStyle" onclick="document.execCommand( 'undo',false,null);"><b>⤺</b>
</button>
<button class="fontStyle" onclick="getUndone()">Get</button>
<br/>
<label for='data'>Data:
<input id="data">
</label>
</fieldset>
<script>
function getUndone() {
var data = document.getElementById('data');
var sel = window.getSelection();
document.execCommand('undo', false, null);
document.execCommand('copy', false, null);
data.value = sel.toString();
}
</script>

How can I hide a specific element that is outside of .each() Jquery

By Sharepoint a bunch of tds get generated with a few elements inside of them. So just to be clear I cant edit or change elements since it gets generated.
What I want to accomplish is to iterate throught all '.js-contentFollowing-itemLink' and then if the .text() contains the specific text I am looking for the '<span> Stop following</span>' should become hidden with '.hide()'.
I cant seem to accomplish this I have tried many ways.
Here is the jsfiddle:
http://jsfiddle.net/QXwyk/3/
Also take notice that I cant grab a id that is unique and many of these elements are generated with different values and texts.
HTML:
<span class="ms-contentFollowing-itemTitle">
test
</span>
<br>
<div class="js-contentFollowing-itemUrlDiv">
<span class="ms-metadata ms-contentFollowing-itemUrl"></span>
<input type="text" readonly="readonly" class="ms-metadata ms-contentFollowing-itemUrl ms-contentFollowing-itemFullUrl" style="visibility: visible; border-color: transparent; background-color: transparent;">
</div>
<span>Stop following</span>
My JS:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
$(this).closest("span").hide();
});
Note: I know it hides wrong element but the If statement works its the code inside the if statement that I cant accomplish I need to hide ' Stop following'. This JS is just one of the examples I have done that is not working.
I tried with $('.ms-secondaryCommandLink span').hide(); inside the if statement but that removed all <span> with "Stop following" :/
Thanks a bunch!

Several issues in your code:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
var text = $(this).parent().parent().parent().hide); <-- hide not closed properly
} <--- Extra bracket here..
});
Working code:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test") {
var text = $(this).parent().parent().parent().hide();
}
});

Html
<div class="ms-content">
<span class="ms-contentFollowing-itemTitle">
test
</span>
<br>
<div class="js-contentFollowing-itemUrlDiv" id="contentFollowingUrl_18" url="http://dev/socialsites/Utförsåkning">
<span class="ms-metadata ms-contentFollowing-itemUrl"></span>
<input type="text" readonly="readonly" class="ms-metadata ms-contentFollowing-itemUrl ms-contentFollowing-itemFullUrl" style="visibility: visible; border-color: transparent; background-color: transparent;">
</div>
<span>Stop following</span>
</div>
JS
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
var text = $(this).closest('.ms-content').find('.ms-secondaryCommandLink').hide();
});
http://jsfiddle.net/QXwyk/4/

You can select the object containing specific text by following way,based on which you can can do remaining actions ...
Example: $('.js-contentFollowing-itemLink:contains(test)').hide(); will hide "test"

How to bold label on click?

So the labels are populated from the database. Once the label is clicked, the label need to turn red and bold. when clicked on another label, the first label need to come back to original state and the new label should be activated and it needs to be bold and red. for some reason, the changeActiveStates() only works for the first 2 labels, i.e., when first label is clicked it turns red and when the second label is clicked the first label is turned black and the second label is turned red. when the third label is clicked, the second label remains red and the third one turns red. How do i fix this??
Here is the code:
<html>
<span>
<input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
<div>
<label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal"
onClick ="clearLiabFilter();
document.getElementById('idLib<%=liabkey%>').checked = true;
changeActiveStates(this);">
<%=liab.getName() %>
</br>
</label>
</div>
</span>
<style type="text/css">
.activate { font-weight: bold; color:#e40000;}
.visited{ font-weight: normal; color: #000000;}
</style>
<script>
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = '';
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</html>

Are you averse to JQuery?
If not, this should work.
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
EDIT: Example on jsFiddle
EDIT: A little more detail as the questioner hasn't used JQuery before.
JQuery is a javscript library and so must be loaded by the browser before you can do all the nifty stuff.
Add the following between the <head></head> tags on your page:
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
(Why let google host JQuery for you?)
Then add the following, also between the tags but after the script tag given above:
$(document).ready(function() {
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
});
(What does $(document).ready() do?)

Maybe not the best of solutions, but have you considered using jQuery? It's generally not too much of a dependency , and will solve these sort of issues quite elegantly and easily for you. Plus. Cross-browser compatibility.