How to assign a css class or id to smileys?


Tags: css,ckeditor

Problem :

I'm setting up CKEditor in Drupal 7 and what I need is assign an additional CSS class (or ID, no matter) to smileys to style them differently from other images. What is the best way to do it?

Thanks in advance.



Solution :

/*
 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.dialog.add("smiley", function (f) {
    for (var e = f.config, a = f.lang.smiley, h = e.smiley_images, g = e.smiley_columns || 8, k, m = function (l) { var c = l.data.getTarget(), b = c.getName(); if ("a" == b) c = c.getChild(0); else if ("img" != b) return; var b = c.getAttribute("cke_src"), a = c.getAttribute("title"), c = f.document.createElement("img", { attributes: { src: b, "data-cke-saved-src": b, title: a, alt: a, width: c.$.width, height: c.$.height, "class": "smiley" } }); f.insertElement(c); k.hide(); l.data.preventDefault() }, q = CKEDITOR.tools.addFunction(function (a, c) {
    a =
    new CKEDITOR.dom.event(a); c = new CKEDITOR.dom.element(c); var b; b = a.getKeystroke(); var d = "rtl" == f.lang.dir; switch (b) {
    case 38: if (b = c.getParent().getParent().getPrevious()) b = b.getChild([c.getParent().getIndex(), 0]), b.focus(); a.preventDefault(); break; case 40: (b = c.getParent().getParent().getNext()) && (b = b.getChild([c.getParent().getIndex(), 0])) && b.focus(); a.preventDefault(); break; case 32: m({ data: a }); a.preventDefault(); break; case d ? 37 : 39: if (b = c.getParent().getNext()) b = b.getChild(0), b.focus(), a.preventDefault(!0);
    else if (b = c.getParent().getParent().getNext()) (b = b.getChild([0, 0])) && b.focus(), a.preventDefault(!0); break; case d ? 39 : 37: if (b = c.getParent().getPrevious()) b = b.getChild(0), b.focus(), a.preventDefault(!0); else if (b = c.getParent().getParent().getPrevious()) b = b.getLast().getChild(0), b.focus(), a.preventDefault(!0)
    }
    }), d = CKEDITOR.tools.getNextId() + "_smiley_emtions_label", d = ['\x3cdiv\x3e\x3cspan id\x3d"' + d + '" class\x3d"cke_voice_label"\x3e' + a.options + "\x3c/span\x3e", '\x3ctable role\x3d"listbox" aria-labelledby\x3d"' +
    d + '" style\x3d"width:100%;height:100%;border-collapse:separate;" cellspacing\x3d"2" cellpadding\x3d"2"', CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style\x3d"position:absolute;"' : "", "\x3e\x3ctbody\x3e"], n = h.length, a = 0; a < n; a++) {
        0 === a % g && d.push('\x3ctr role\x3d"presentation"\x3e'); var p = "cke_smile_label_" + a + "_" + CKEDITOR.tools.getNextNumber(); d.push('\x3ctd class\x3d"cke_dark_background cke_centered" style\x3d"vertical-align: middle;" role\x3d"presentation"\x3e\x3ca href\x3d"javascript:void(0)" role\x3d"option"',
        ' aria-posinset\x3d"' + (a + 1) + '"', ' aria-setsize\x3d"' + n + '"', ' aria-labelledby\x3d"' + p + '"', ' class\x3d"cke_smile cke_hand" tabindex\x3d"-1" onkeydown\x3d"CKEDITOR.tools.callFunction( ', q, ', event, this );"\x3e', '\x3cimg class\x3d"cke_hand" title\x3d"', e.smiley_descriptions[a], '" cke_src\x3d"', CKEDITOR.tools.htmlEncode(e.smiley_path + h[a]), '" alt\x3d"', e.smiley_descriptions[a], '"', ' src\x3d"', CKEDITOR.tools.htmlEncode(e.smiley_path + h[a]), '"', CKEDITOR.env.ie ? " onload\x3d\"this.setAttribute('width', 2); this.removeAttribute('width');\" " :
        "", '\x3e\x3cspan id\x3d"' + p + '" class\x3d"cke_voice_label"\x3e' + e.smiley_descriptions[a] + "\x3c/span\x3e\x3c/a\x3e", "\x3c/td\x3e"); a % g == g - 1 && d.push("\x3c/tr\x3e")
    } if (a < g - 1) { for (; a < g - 1; a++) d.push("\x3ctd\x3e\x3c/td\x3e"); d.push("\x3c/tr\x3e") } d.push("\x3c/tbody\x3e\x3c/table\x3e\x3c/div\x3e"); e = { type: "html", id: "smileySelector", html: d.join(""), onLoad: function (a) { k = a.sender }, focus: function () { var a = this; setTimeout(function () { a.getElement().getElementsByTag("a").getItem(0).focus() }, 0) }, onClick: m, style: "width: 100%; border-collapse: separate;" };
    return { title: f.lang.smiley.title, minWidth: 270, minHeight: 120, contents: [{ id: "tab1", label: "", title: "", expand: !0, padding: 0, elements: [e] }], buttons: [CKEDITOR.dialog.cancelButton] }
});

Change your smiley.js with this. This introduce class smiley in CKEditor smile


    CSS Howto..

    How to display heading and paragraph elements inline in css?

    How to set minimum height for a div?

    How to use css to crop images from left and right without knowing dimensions

    css: how to inherit whole class

    Making dijit.Dialog Transparent when it shows up

    How to write a responsive semantic HTML5 page ? (With a framework ?)

    How to center align a div vertically which uses bootstrap?

    How to use custom underline with breakline in CSS?

    “How to Ask” box when typing a question in SO. How do get that scrolling effect? Pure CSS or JS?

    How do I create a 3 nested stamina bar that will regenerate from last to first

    How to navigate divs in a custom built single page app? [closed]

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    PHP: _POST and CSS, how to show an active link

    How to remove the bottom border of a box with CSS

    How do I format tabs in Blueprint CSS?

    How to handle hiding dynamic elements in JQUERY with different names but same CSS class

    How to display block from left to right in css

    How to include the PHP file that is outside the folder where main PHP file exists?

    Qt: Hower effect overlapped with selected tab

    How to make HTML design of a website extensible, reusable and flexible?

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    How to use custom css file for layout of a module in Yii2

    How to inherit css from grandparent tag? [duplicate]

    How to control the size of a table cell in css

    How to call a CSS file from the right place

    How to make header cover entire page length?

    How to change color of SVG image using CSS (jQuery SVG image replacement)?

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    How to put space between figure in image?

    How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)