Last active
February 4, 2016 09:46
-
-
Save winhamwr/4611209 to your computer and use it in GitHub Desktop.
WYMeditor plugin for inserting "special" characters (HTML entities)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link rel="stylesheet" type="text/css" href="wymeditor/skins/default/skin.css" /> | |
</head> | |
<body> | |
<!-- Note: You'll need to put everything in a "plugins/special_chars" directory | |
and add your own "plugins/special_chars/char.gif" icon that will be used for the button. --> | |
<form> | |
<textarea class="my-wymeditor"></textarea> | |
</form> | |
<script type="text/javascript" src="jquery/jquery.js"></script> | |
<script type="text/javascript" src="wymeditor/jquery.wymeditor.min.js"></script> | |
<script type="text/javascript" src="wymeditor/plugins/special_chars/jquery.wymeditor.special_chars.js"></script> | |
<script> | |
$(document).ready(function() { | |
$('.my-wymeditor').wymeditor({ | |
postInit: function(wym) { | |
wym.specialChars({}); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Thanks to tinymce's (http://tinymce.moxiecode.com) charmap implementation for | |
//character definitions and layout inspiration | |
//Extend WYMeditor | |
(function($) | |
{ | |
//Wrap | |
WYMeditor.editor.prototype.specialChars = function(options) { | |
var specialChars = new SpecialChars(options, this); | |
this._specialChars = specialChars; | |
return specialChars; | |
}; | |
WYMeditor.INIT_SPECIAL_CHARS_DIALOG = function(index) { | |
var wym = window.opener.WYMeditor.INSTANCES[index]; | |
var sc = wym._specialChars; | |
sc._wdialog = window; | |
var options = sc._options; | |
$('body').append('<div id="special_chars_dialog" title="Insert a Symbol"></div>'); | |
$dialog = jQuery('#special_chars_dialog'); | |
if(sc._options.dialogClass.length > 0){ | |
$dialog.addClass(options.dialogClass); | |
} | |
$dialog.html(sc.getCharMapHtml()); | |
// Handle dialog click event | |
var chop_len = "charmap_".length | |
$dialog.find(sc._options.charsSelector).click(function(e) { | |
var target = $(e.target); | |
if (target.hasClass('wym_add_special_char')){ | |
var charmap_id = target.attr('id'); | |
var character = charmap_id.substring(chop_len); | |
sc.insertChar(character); | |
return false; | |
} | |
window.close(); | |
}); | |
} | |
function SpecialChars(options, wym) { | |
this.CHARS = { | |
nbsp: [' ', ' ', 'no-break space'], | |
amp: ['&', '&', 'ampersand'], | |
quot: ['"', '"', 'quotation mark'], | |
// finance | |
cent: ['¢', '¢', 'cent sign'], | |
euro: ['€', '€', 'euro sign'], | |
pound: ['£', '£', 'pound sign'], | |
yen: ['¥', '¥', 'yen sign'], | |
// signs | |
copy: ['©', '©', 'copyright sign'], | |
reg: ['®', '®', 'registered sign'], | |
trade: ['™', '™', 'trade mark sign'], | |
permil: ['‰', '‰', 'per mille sign'], | |
micro: ['µ', 'µ', 'micro sign'], | |
middot: ['·', '·', 'middle dot'], | |
bull: ['•', '•', 'bullet'], | |
hellip: ['…', '…', 'three dot leader'], | |
prime: ['′', '′', 'minutes / feet'], | |
Prime: ['″', '″', 'seconds / inches'], | |
sect: ['§', '§', 'section sign'], | |
para: ['¶', '¶', 'paragraph sign'], | |
szlig: ['ß', 'ß', 'sharp s / ess-zed'], | |
// quotations | |
lsaquo: ['‹', '‹', 'single left-pointing angle quotation mark'], | |
rsaquo: ['›', '›', 'single right-pointing angle quotation mark'], | |
laquo: ['«', '«', 'left pointing guillemet'], | |
raquo: ['»', '»', 'right pointing guillemet'], | |
lsquo: ['‘', '‘', 'left single quotation mark'], | |
rsquo: ['’', '’', 'right single quotation mark'], | |
ldquo: ['“', '“', 'left double quotation mark'], | |
rdquo: ['”', '”', 'right double quotation mark'], | |
sbquo: ['‚', '‚', 'single low-9 quotation mark'], | |
bdquo: ['„', '„', 'double low-9 quotation mark'], | |
lt: ['<', '<', 'less-than sign'], | |
gt: ['>', '>', 'greater-than sign'], | |
le: ['≤', '≤', 'less-than or equal to'], | |
ge: ['≥', '≥', 'greater-than or equal to'], | |
ndash: ['–', '–', 'en dash'], | |
mdash: ['—', '—', 'em dash'], | |
macr: ['¯', '¯', 'macron'], | |
oline: ['‾', '‾', 'overline'], | |
curren: ['¤', '¤', 'currency sign'], | |
brvbar: ['¦', '¦', 'broken bar'], | |
uml: ['¨', '¨', 'diaeresis'], | |
iexcl: ['¡', '¡', 'inverted exclamation mark'], | |
iquest: ['¿', '¿', 'turned question mark'], | |
circ: ['ˆ', 'ˆ', 'circumflex accent'], | |
tilde: ['˜', '˜', 'small tilde'], | |
deg: ['°', '°', 'degree sign'], | |
minus: ['−', '−', 'minus sign'], | |
plusmn: ['±', '±', 'plus-minus sign'], | |
divide: ['÷', '÷', 'division sign'], | |
frasl: ['⁄', '⁄', 'fraction slash'], | |
times: ['×', '×', 'multiplication sign'], | |
sup1: ['¹', '¹', 'superscript one'], | |
sup2: ['²', '²', 'superscript two'], | |
sup3: ['³', '³', 'superscript three'], | |
frac14: ['¼', '¼', 'fraction one quarter'], | |
frac12: ['½', '½', 'fraction one half'], | |
frac34: ['¾', '¾', 'fraction three quarters'], | |
// math / logical | |
fnof: ['ƒ', 'ƒ', 'function / florin'], | |
int: ['∫', '∫', 'integral'], | |
sum: ['∑', '∑', 'n-ary sumation'], | |
infin: ['∞', '∞', 'infinity'], | |
radic: ['√', '√', 'square root'], | |
sim: ['∼', '∼', false,'similar to'], | |
cong: ['≅', '≅', false,'approximately equal to'], | |
asymp: ['≈', '≈', 'almost equal to'], | |
ne: ['≠', '≠', 'not equal to'], | |
equiv: ['≡', '≡', 'identical to'], | |
isin: ['∈', '∈', false,'element of'], | |
notin: ['∉', '∉', false,'not an element of'], | |
ni: ['∋', '∋', false,'contains as member'], | |
prod: ['∏', '∏', 'n-ary product'], | |
and: ['∧', '∧', false,'logical and'], | |
or: ['∨', '∨', false,'logical or'], | |
not: ['¬', '¬', 'not sign'], | |
cap: ['∩', '∩', 'intersection'], | |
cup: ['∪', '∪', false,'union'], | |
part: ['∂', '∂', 'partial differential'], | |
forall: ['∀', '∀', false,'for all'], | |
exist: ['∃', '∃', false,'there exists'], | |
empty: ['∅', '∅', false,'diameter'], | |
nabla: ['∇', '∇', false,'backward difference'], | |
lowast: ['∗', '∗', false,'asterisk operator'], | |
prop: ['∝', '∝', false,'proportional to'], | |
ang: ['∠', '∠', false,'angle'], | |
// undefined | |
acute: ['´', '´', 'acute accent'], | |
cedil: ['¸', '¸', 'cedilla'], | |
ordf: ['ª', 'ª', 'feminine ordinal indicator'], | |
ordm: ['º', 'º', 'masculine ordinal indicator'], | |
dagger: ['†', '†', 'dagger'], | |
Dagger: ['‡', '‡', 'double dagger'], | |
// alphabetical special chars | |
Agrave: ['À', 'À', 'A - grave'], | |
Aacute: ['Á', 'Á', 'A - acute'], | |
Acirc: ['Â', 'Â', 'A - circumflex'], | |
Atilde: ['Ã', 'Ã', 'A - tilde'], | |
Auml: ['Ä', 'Ä', 'A - diaeresis'], | |
Aring: ['Å', 'Å', 'A - ring above'], | |
AElig: ['Æ', 'Æ', 'ligature AE'], | |
Ccedil: ['Ç', 'Ç', 'C - cedilla'], | |
Egrave: ['È', 'È', 'E - grave'], | |
Eacute: ['É', 'É', 'E - acute'], | |
Ecirc: ['Ê', 'Ê', 'E - circumflex'], | |
Euml: ['Ë', 'Ë', 'E - diaeresis'], | |
Igrave: ['Ì', 'Ì', 'I - grave'], | |
Iacute: ['Í', 'Í', 'I - acute'], | |
Icirc: ['Î', 'Î', 'I - circumflex'], | |
Iuml: ['Ï', 'Ï', 'I - diaeresis'], | |
ETH: ['Ð', 'Ð', 'ETH'], | |
Ntilde: ['Ñ', 'Ñ', 'N - tilde'], | |
Ograve: ['Ò', 'Ò', 'O - grave'], | |
Oacute: ['Ó', 'Ó', 'O - acute'], | |
Ocirc: ['Ô', 'Ô', 'O - circumflex'], | |
Otilde: ['Õ', 'Õ', 'O - tilde'], | |
Ouml: ['Ö', 'Ö', 'O - diaeresis'], | |
Oslash: ['Ø', 'Ø', 'O - slash'], | |
OElig: ['Œ', 'Œ', 'ligature OE'], | |
Scaron: ['Š', 'Š', 'S - caron'], | |
Ugrave: ['Ù', 'Ù', 'U - grave'], | |
Uacute: ['Ú', 'Ú', 'U - acute'], | |
Ucirc: ['Û', 'Û', 'U - circumflex'], | |
Uuml: ['Ü', 'Ü', 'U - diaeresis'], | |
Yacute: ['Ý', 'Ý', 'Y - acute'], | |
Yuml: ['Ÿ', 'Ÿ', 'Y - diaeresis'], | |
THORN: ['Þ', 'Þ', 'THORN'], | |
agrave: ['à', 'à', 'a - grave'], | |
aacute: ['á', 'á', 'a - acute'], | |
acirc: ['â', 'â', 'a - circumflex'], | |
atilde: ['ã', 'ã', 'a - tilde'], | |
auml: ['ä', 'ä', 'a - diaeresis'], | |
aring: ['å', 'å', 'a - ring above'], | |
aelig: ['æ', 'æ', 'ligature ae'], | |
ccedil: ['ç', 'ç', 'c - cedilla'], | |
egrave: ['è', 'è', 'e - grave'], | |
eacute: ['é', 'é', 'e - acute'], | |
ecirc: ['ê', 'ê', 'e - circumflex'], | |
euml: ['ë', 'ë', 'e - diaeresis'], | |
igrave: ['ì', 'ì', 'i - grave'], | |
iacute: ['í', 'í', 'i - acute'], | |
icirc: ['î', 'î', 'i - circumflex'], | |
iuml: ['ï', 'ï', 'i - diaeresis'], | |
eth: ['ð', 'ð', 'eth'], | |
ntilde: ['ñ', 'ñ', 'n - tilde'], | |
ograve: ['ò', 'ò', 'o - grave'], | |
oacute: ['ó', 'ó', 'o - acute'], | |
ocirc: ['ô', 'ô', 'o - circumflex'], | |
otilde: ['õ', 'õ', 'o - tilde'], | |
ouml: ['ö', 'ö', 'o - diaeresis'], | |
oslash: ['ø', 'ø', 'o slash'], | |
oelig: ['œ', 'œ', 'ligature oe'], | |
scaron: ['š', 'š', 's - caron'], | |
ugrave: ['ù', 'ù', 'u - grave'], | |
uacute: ['ú', 'ú', 'u - acute'], | |
ucirc: ['û', 'û', 'u - circumflex'], | |
uuml: ['ü', 'ü', 'u - diaeresis'], | |
yacute: ['ý', 'ý', 'y - acute'], | |
thorn: ['þ', 'þ', 'thorn'], | |
yuml: ['ÿ', 'ÿ', 'y - diaeresis'], | |
Alpha: ['Α', 'Α', 'Alpha'], | |
Beta: ['Β', 'Β', 'Beta'], | |
Gamma: ['Γ', 'Γ', 'Gamma'], | |
Delta: ['Δ', 'Δ', 'Delta'], | |
Epsilon: ['Ε', 'Ε', 'Epsilon'], | |
Zeta: ['Ζ', 'Ζ', 'Zeta'], | |
Eta: ['Η', 'Η', 'Eta'], | |
Theta: ['Θ', 'Θ', 'Theta'], | |
Iota: ['Ι', 'Ι', 'Iota'], | |
Kappa: ['Κ', 'Κ', 'Kappa'], | |
Lambda: ['Λ', 'Λ', 'Lambda'], | |
Mu: ['Μ', 'Μ', 'Mu'], | |
Nu: ['Ν', 'Ν', 'Nu'], | |
Xi: ['Ξ', 'Ξ', 'Xi'], | |
Omicron: ['Ο', 'Ο', 'Omicron'], | |
Pi: ['Π', 'Π', 'Pi'], | |
Rho: ['Ρ', 'Ρ', 'Rho'], | |
Sigma: ['Σ', 'Σ', 'Sigma'], | |
Tau: ['Τ', 'Τ', 'Tau'], | |
Upsilon: ['Υ', 'Υ', 'Upsilon'], | |
Phi: ['Φ', 'Φ', 'Phi'], | |
Chi: ['Χ', 'Χ', 'Chi'], | |
Psi: ['Ψ', 'Ψ', 'Psi'], | |
Omega: ['Ω', 'Ω', 'Omega'], | |
alpha: ['α', 'α', 'alpha'], | |
beta: ['β', 'β', 'beta'], | |
gamma: ['γ', 'γ', 'gamma'], | |
delta: ['δ', 'δ', 'delta'], | |
epsilon: ['ε', 'ε', 'epsilon'], | |
zeta: ['ζ', 'ζ', 'zeta'], | |
eta: ['η', 'η', 'eta'], | |
theta: ['θ', 'θ', 'theta'], | |
iota: ['ι', 'ι', 'iota'], | |
kappa: ['κ', 'κ', 'kappa'], | |
lambda: ['λ', 'λ', 'lambda'], | |
mu: ['μ', 'μ', 'mu'], | |
nu: ['ν', 'ν', 'nu'], | |
xi: ['ξ', 'ξ', 'xi'], | |
omicron: ['ο', 'ο', 'omicron'], | |
pi: ['π', 'π', 'pi'], | |
rho: ['ρ', 'ρ', 'rho'], | |
sigmaf: ['ς', 'ς', 'final sigma'], | |
sigma: ['σ', 'σ', 'sigma'], | |
tau: ['τ', 'τ', 'tau'], | |
upsilon: ['υ', 'υ', 'upsilon'], | |
phi: ['φ', 'φ', 'phi'], | |
chi: ['χ', 'χ', 'chi'], | |
psi: ['ψ', 'ψ', 'psi'], | |
omega: ['ω', 'ω', 'omega'], | |
// symbols | |
alefsym: ['ℵ', 'ℵ', false,'alef symbol'], | |
piv: ['ϖ', 'ϖ', false,'pi symbol'], | |
real: ['ℜ', 'ℜ', false,'real part symbol'], | |
thetasym: ['ϑ','ϑ', false,'theta symbol'], | |
upsih: ['ϒ', 'ϒ', false,'upsilon - hook symbol'], | |
weierp: ['℘', '℘', false,'Weierstrass p'], | |
image: ['ℑ', 'ℑ', false,'imaginary part'], | |
// arrows | |
larr: ['←', '←', 'leftwards arrow'], | |
uarr: ['↑', '↑', 'upwards arrow'], | |
rarr: ['→', '→', 'rightwards arrow'], | |
darr: ['↓', '↓', 'downwards arrow'], | |
harr: ['↔', '↔', 'left right arrow'], | |
crarr: ['↵', '↵', false,'carriage return'], | |
lArr: ['⇐', '⇐', false,'leftwards double arrow'], | |
uArr: ['⇑', '⇑', false,'upwards double arrow'], | |
rArr: ['⇒', '⇒', false,'rightwards double arrow'], | |
dArr: ['⇓', '⇓', false,'downwards double arrow'], | |
hArr: ['⇔', '⇔', false,'left right double arrow'], | |
there4: ['∴', '∴', false,'therefore'], | |
sub: ['⊂', '⊂', false,'subset of'], | |
sup: ['⊃', '⊃', false,'superset of'], | |
nsub: ['⊄', '⊄', false,'not a subset of'], | |
sube: ['⊆', '⊆', false,'subset of or equal to'], | |
supe: ['⊇', '⊇', false,'superset of or equal to'], | |
oplus: ['⊕', '⊕', false,'circled plus'], | |
otimes: ['⊗', '⊗', false,'circled times'], | |
perp: ['⊥', '⊥', false,'perpendicular'], | |
sdot: ['⋅', '⋅', false,'dot operator'], | |
lceil: ['⌈', '⌈', false,'left ceiling'], | |
rceil: ['⌉', '⌉', false,'right ceiling'], | |
lfloor: ['⌊', '⌊', false,'left floor'], | |
rfloor: ['⌋', '⌋', false,'right floor'], | |
lang: ['⟨', '〈', false,'left-pointing angle bracket'], | |
rang: ['⟩', '〉', false,'right-pointing angle bracket'], | |
loz: ['◊', '◊', true,'lozenge'], | |
spades: ['♠', '♠', false,'black spade suit'], | |
clubs: ['♣', '♣', 'black club suit'], | |
hearts: ['♥', '♥', 'black heart suit'], | |
diams: ['♦', '♦', 'black diamond suit'], | |
ensp: [' ', ' ', false,'en space'], | |
emsp: [' ', ' ', false,'em space'], | |
thinsp: [' ', ' ', false,'thin space'], | |
zwnj: ['‌', '‌', false,'zero width non-joiner'], | |
zwj: ['‍', '‍', false,'zero width joiner'], | |
lrm: ['‎', '‎', false,'left-to-right mark'], | |
rlm: ['‏', '‏', false,'right-to-left mark'], | |
shy: ['­', '­', false,'soft hyphen'] | |
}; | |
options = jQuery.extend({ | |
charsPerRow: 15, | |
tdWidth: 20, | |
tdHeight: 20, | |
dialogFeatures: "menubar=no,titlebar=no,toolbar=no,resizable=no" | |
+ ",width=330,height=420,top=0,left=0", | |
dialogHtml: "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'" | |
+ " 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>" | |
+ "<html dir='" | |
+ WYMeditor.DIRECTION | |
+ "'><head>" | |
+ "<link rel='stylesheet' type='text/css' media='screen'" | |
+ " href='" | |
+ WYMeditor.CSS_PATH | |
+ "' />" | |
+ "<title>" | |
+ WYMeditor.DIALOG_TITLE | |
+ "</title>" | |
+ "<script type='text/javascript'" | |
+ " src='" | |
+ WYMeditor.JQUERY_PATH | |
+ "'></script>" | |
+ "<script type='text/javascript'" | |
+ " src='" | |
+ WYMeditor.WYM_PATH | |
+ "'></script>" | |
+ "<script type='text/javascript'" | |
+ " src='" | |
+ WYMeditor.BASE_PATH | |
+ "/plugins/special_chars/jquery.wymeditor.special_chars.js'></script>" | |
+ "</head>" | |
+ WYMeditor.DIALOG_BODY | |
+ "</html>", | |
sBodyHtml: "<body class='wym_dialog wym_dialog_special_chars'" | |
+ " onload='WYMeditor.INIT_SPECIAL_CHARS_DIALOG(" + WYMeditor.INDEX + ")'" | |
+ "></body>", | |
sButtonHtml: "<li class='wym_tools_special_chars'>" | |
+ "<a name='special_chars' href='#'" | |
+ " style='background-image:" | |
+ " url(" + wym._options.basePath + "plugins/special_chars/char.gif)'>" | |
+ "Insert Symbol" | |
+ "</a></li>", | |
sButtonSelector: "li.wym_tools_special_chars a", | |
charsSelector: "div.wym_special_chars", | |
charmapTdClass: 'special_char', | |
charmapTrClass: 'special_chars', | |
dialogClass: 'flora', | |
dialogOptions: { | |
autoOpen: false, | |
position: 'right', | |
title: 'Insert a Symbol', | |
width: '320px', | |
height: '450px' | |
} | |
}, options); | |
this._options = options; | |
this._wym = wym; | |
this.init(); | |
}; | |
SpecialChars.prototype.init = function() { | |
var wym = this._wym; | |
var sc = this; | |
sc._dia_inner_html = ''; | |
// Add the tool panel button | |
jQuery(wym._box).find( | |
wym._options.toolsSelector + wym._options.toolsListSelector) | |
.append(sc._options.sButtonHtml); | |
// Handle tool button click | |
jQuery(wym._box).find(sc._options.sButtonSelector).click(function() { | |
sc.createDialog(); | |
return false; | |
}); | |
}; | |
SpecialChars.prototype.insertChar = function(character) { | |
var wym = this._wym; | |
var sc = this; | |
var char_info = sc.CHARS[character]; | |
wym.insert(char_info[1]); | |
}; | |
SpecialChars.prototype.createDialog = function() { | |
var wym = this._wym; | |
var sc = this; | |
var options = sc._options; | |
var features = sc._options.dialogFeatures; | |
var wDialog = window.open('', 'dialog', features); | |
var dialogType = "Insert Symbol"; | |
sBodyHtml = options.sBodyHtml; | |
var h = WYMeditor.Helper; | |
//construct the dialog | |
var dialogHtml = options.dialogHtml; | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.BASE_PATH, wym._options.basePath); | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.DIRECTION, wym._options.direction); | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.CSS_PATH, wym._options.skinPath + WYMeditor.SKINS_DEFAULT_CSS); | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.WYM_PATH, wym._options.wymPath); | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.JQUERY_PATH, wym._options.jQueryPath); | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.DIALOG_BODY, sBodyHtml); | |
dialogHtml = h.replaceAll(dialogHtml, WYMeditor.INDEX, wym._index); | |
dialogHtml = wym.replaceStrings(dialogHtml); | |
var doc = wDialog.document; | |
doc.write(dialogHtml); | |
doc.close(); | |
} | |
SpecialChars.prototype.getCharMapHtml = function() { | |
var cols = -1; | |
var wym = this._wym; | |
var sc = this; | |
if(sc._dia_inner_html.length > 0){ | |
return sc._dia_inner_html; | |
} | |
var html = ''; | |
html += '<div class="wym_special_chars">' | |
+ '<table border="0" cellspacing="1" cellpadding="0" ' | |
+ 'width="' | |
+ (sc._options.tdWidth*sc._options.charsPerRow) | |
+ '" ><tr height="' | |
+ sc._options.tdHeight | |
+ '">', | |
jQuery.each(sc.CHARS, function(index, item){ | |
html += '' | |
+ '<td class="' | |
+ sc._options.charmapTdClass | |
+ '">' | |
+ '<span class="wym_add_special_char" id="charmap_' | |
+ index | |
+ '" title="' | |
+ item[2] | |
+ '">' | |
+ item[0] | |
+ '</span></td>'; | |
if ((cols+1) % sc._options.charsPerRow == 0) { | |
html += '</tr><tr height="' + sc._options.tdHeight + '">'; | |
} | |
cols++; | |
}); | |
html += '</tr></table></div>'; | |
sc._dia_inner_html = html; | |
return html; | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment