custom icon on button

Tom Sasse

unread,

Jul 1, 2013, 6:12:18 PM7/1/13

to snape...@googlegroups.com

Hi Wesley!

Been playing around with your plug in api. I am unable to realize a custom icon. It's always showing the bold icon.

The js (_base_url seems to be correct, as the html inside the editor is styled based on the area_editor.css)

function init_snapeditor(_base_url){
	// buttons
	SnapEditor.buttons.tempMorbus = {
		text: "Morbus",
		action: function (e) {
			e.api.insert("Morbus!");
		}
	};

	SnapEditor.buttons.tempDrug = {
		text: "Medikament",
		action: function (e) {
			e.api.insert("<h1>Medi!</h1>");
		}
	};

	SnapEditor.buttons.templates = {
		text: "Templates",
		items: ["tempMorbus", "tempDrug"]
	}


	// init editor instance
	var editor = new SnapEditor.Form("text", {
		path: _base_url+"/snapeditor",
		buttons: [
		"h1", "p", "bold", "italic", "subscript", "superscript", "|",
		"orderedList", "unorderedList", "indent", "outdent", "|",
		"table", "|",
		"templates"
		],
		stylesheets: [_base_url+"css/area_editor.css"]
	});
}

area_editor.css

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87%; /* roughly 14px */
	color: #000000;
	line-height: 100%;
	padding: 0 5px;
}

/*
other stuff
*/

/* icons */
.snapeditor_toolbar_icon_templates {
	background-image: url("templates.png");
}

templates.png (26px^2) lies in the same folder as area_editor.css.

This seems to be a direct implementation of your example. What am I missing?

Cheers Tom

Wesley Wong

unread,

Jul 3, 2013, 1:12:26 PM7/3/13

to snape...@googlegroups.com

Hi Tom,

The stylesheet passed into SnapEditor.Form is only for the content inside SnapEditor contained inside the iframe. The toolbar is outside of the iframe and so area_editor.css does not affect it.

Please move the CSS for the icon to the outer page and it should work.

Let me know if this solved your problem.

Thanks,

Wesley

Tom Sasse

unread,

Sep 4, 2013, 7:50:47 AM9/4/13

to snape...@googlegroups.com

Hi Wesley

Sorry for the delay. Thanks for your answer. Of course your explanation makes sense, don't know, what I've been thinking.

However, I still struggle with the problem. I tried to produce a mwe with your example.html in the download:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .snapeditor_toolbar_icon_say_hi {
        background-image: url("say_hi.png");
      }
      body {
        background-image: url("say_hi.png");
      }
    </style>
  </head>

  <body>
    <div id="editor">
      <h1>This is editable.</h1>
      <p>Click me to start editing.</p>
      <p><i>Note: If you're not running this from a server and instead have just simply opened the HTML file, image uploads will not work.</i></p>
    </div>


    <script type="text/javascript" src="snapeditor.js"></script>
    <script type="text/javascript">
      SnapEditor.buttons.sayHi = {
        text: "Say Hi",
        action: function (e) {
          e.api.insert("<p>Hi</p>");
        }
      }

      var editor = new SnapEditor.InPlace("editor", {
        toolbar: {
          items: [

            "h1", "p", "bold", "italic", "subscript", "superscript", "|",
            "orderedList", "unorderedList", "indent", "outdent", "|",
            "table", "|",

            "sayHi"
          ],
        },
        width: 600,
        height: 400
      });
    </script>
  </body>
</html>

This shows the button nicely in the toolbar. However, still with the bold B instead of my say_hi.png. The say_hi.png is in the same folder as the example.html and is correctly set as tiled background image as specified over body. So it's accessible. Where's the problem?

Version 1.9.0

Cheers

Tom

Wesley Wong

unread,

Sep 5, 2013, 7:31:23 PM9/5/13

to snape...@googlegroups.com

Hi Tom,

It looks like there's an issue with CSS selector strength. I'll report this as a bug and get it fixed.

In the meantime, you have two options:

/* Provide a stronger selector */
.snapeditor_toolbar .snapeditor_toolbar_icon_say_hi {
  background-image: url("say_hi.png");
}

/* or */

/* Use !important */
.snapeditor_toolbar_icon_say_hi {

background-image: url("say_hi.png") !important;
}

Hope this helps!

Wesley

Tom Sasse

unread,

Sep 6, 2013, 6:26:40 AM9/6/13

to snape...@googlegroups.com

As usual, simple, quick and competent. ;-)

Thanks Tom

Wesley Wong

unread,

Sep 12, 2013, 1:37:18 PM9/12/13

to snape...@googlegroups.com

Hi Tom,

Just updating you. After looking at the possible fixes, it looks like the first option where a stronger selector is needed is the best way of doing this.

We've updated the documentation to reflect this.

So from now on, do this.

.snapeditor_toolbar .snapeditor_toolbar_icon_say_hi {
  background-image: url("say_hi.png");
}