Forum Moderators: open
$.fn.toggleClick = function(e) {
if (this.attr('id')) toggle.el = '#' + this.attr('id');
else toggle.el = this;
this.toggle();
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return this;
}
function changeSpan(command, val) {
// there's a bit here that I'm removing that only applies to inserting an image,
// so it's irrelevant for this discussion
document.execCommand(command, false, val);
return;
}
$('[data-fontname]')
.on('mousedown', function() {
changeSpan('FontName', $(this).data('fontname'));
$('#font_fam').toggleClick(event);
});
// HTML
<button id="fontfamily"
onClick="$('#font_fam').toggleClick(event)">
Select Font
</button>
<div id="font_fam" style="position: absolute; display: none">
<div data-fontname="Arial" style="font-family: Arial">
Arial
</div>
<div data-fontname="Georgia" style="font-family: Georgia">
Georgia
</div>
</div>$('[data-richbutton=Bold]')
.on('mousedown', function() {
changeSpan($(this).data('richbutton'), false)
});
// HTML
<div data-richbutton="Bold">
<b>B</b>
</div><div data-fontname="Arial" style="font-family: Arial">
Arial
</div><div data-richbutton="Bold">
<b>B</b>
</div>
// CSS
.sprite_em, .emoji {
background:url('https://images.example.com/emoticon.png');
width: 19px;
height: 19px
}
.AddEmoticons08011 {
background-position: 0 0
}
.emoji {
display: inline-block;
margin: 0 3px;
vertical-align: middle
}
// Javascript
function changeSpan(command, val) {
if (command == 'InsertImage') {
val = '<div class="emoji ' + val + '" ' +
"contenteditable='false' " +
"unselectable='on' " +
'></div>';
$('#comment').focus();
command = 'insertHTML';
}
document.execCommand(command, false, val);
return;
}
$('[data-emoji]')
.on('mousedown', function() {
changeSpan('InsertImage', $(this).data('emoji'));
});
// HTML
<div class="sprite_em AddEmoticons08011" data-emoji="AddEmoticons08011"></div>
$('[data-richbutton=Bold]')
.on('mousedown', function() {
changeSpan($(this).data('richbutton'), false)
});
<div data-richbutton="Bold">
<b>B</b>
</div>
event.preventDefault();
$('#comment').focus();
document.execCommand(command, false, val);
<meta name="viewport" content="width=device-width, initial-scale=1.0">// the image element
<img src='https://example.com/emoticons/AddEmoticons0801.gif' align='middle' border='0' unselectable='on' selectable='false' style='-moz-user-select: none' onSelectStart='return false' onDrag='return false' onDragStart='return false' onDragEnd='return false' onDblClick='return false' onFocus='blur()'>
// the DIV element
.emoji {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
display: inline-block;
margin: 0 3px;
vertical-align: middle
}
<div class="emoji" data-em="1" contenteditable="false" unselectable="on"></div>
1. when you click inside of the contenteditable, the iPhone zooms in for what appears to be no reason.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
// Removed
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);<img src="webkit-fake-url://35e268c3-4829-466a-b12a-ef216d6ca763/imagepng">// JavaScript
function editPaste() {
var a = $('#comment').html();
if (a.search(/<img src=("|')webkit-fake-url:[^>]+\1>/i)) {
alert("Sorry, you can't paste an image. Please use the Upload Image option instead");
a = a.replace(/<img src=("|')webkit-fake-url:[^>]+\1>/gi, '');
$('#comment').html(a);
}
}
// HTML
<div id="comment" contentEditable="true" onPaste="editPaste()"></div>
event.preventDefault();event.preventDefault ? event.preventDefault() : event.returnValue = false;
/* CSS */
font[size='1'] { font-size: 80% }
font[size='2'] { font-size: 100% }
font[size='3'] { font-size: 120% }
...# note that I had to send event; IE9 threw an error if I didn't
function changeSpan(event, command, val, selector) {
var ele = $('#' + selector);
// keeps the cursor where it belongs
event.preventDefault ? event.preventDefault() : event.returnValue = false;
ele.focus();
document.execCommand(command, false, val);
return;
}var range, sel;
if (document.selection && document.selection.createRange)
sel = document.selection.createRange();
else if (window.getSelection)
sel = window.getSelection();
if (command == 'fontsize') {
if (window.getSelection && sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
// not sure if this helped, I was trying to fix the IE9 error
sel.removeAllRanges();
sel.addRange(range);
}
else range = sel;
// generate unique marker, based on current time
var marker = (new Date).getTime();
// surround selected with <big>
var font = document.createElement('big-' + marker)
font.className = 'rel-' + val;
range.surroundContents(font);
var text = ele.html();
// remove parent <big-x> tags
var font_match = /(<(big-[0-9]+) [^>]*>)([\s\S]*)(<(big-[0-9]+) [^>]*>)([\s\S]*)(<\/\5>)([\s\S]*)(<\/\2>)/gim;
if (font_match.test(text))
text = text.replace(font_match, '$3$4$6$7$8');
// remove empty tags
var empty_font_match = /<(div|span|big-[0-9]+|font|b|i|u)(?: [^>])*>(<br>|\s)*<\/\1>/gi;
while (empty_font_match.test(text))
text = text.replace(empty_font_match, '$2');
ele.html(text);
}
<div data-em="1"></div><div data-em="1"><div data-em="1"></div></div>-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
// works for most browsers
if (window.getSelection)
insertHTML('b', 'foo');
// worst case scenario, just live with the trailing <br>
else
document.execCommand('insertHTML', false, '<b>foo</b>');
function insertHTML(node, val) {
var sel = window.getSelection().rangeCount;
var range = sel.getRangeAt(0);
var newVal;
range.collapse(true);
newVal = document.createElement(node);
newVal.textContent = val;
range.insertNode(newVal);
range.setStartAfter(newVal);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
var block = false;
$('#comment').on('keydown mouseup', function(e) {
// if they're within blockquote, block = true;
// else block = false;
if (block) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var endBlock = '</blockquote><br><br><br><blockquote data-quote>';
// I'm getting here and endBlock is right...
// console.log('block3 - ' + endBlock);
// ...but here it's plugging in <br><br><br><blockquote data-quote=""><br></blockquote>
if (document.selection)
document.selection.createRange().pasteHTML(endBlock);
else
document.execCommand('insertHTML', false, endBlock);
}
}
});
