Solved

TinyMCE button icons/fonts

Posted on 2013-10-26
3
819 Views
Last Modified: 2013-10-26
HI - OK so I now have a custom button working on the 4.x version of Tiny MCE with one exception: I can't get any icon to show up on the button itself.

I think I understand this to be a matter of referencing an existing icon, but I don't know how to determine what the options are.

Also, would I apply the icon value directly in the plgin.min.js I've created for the button in the plugins directory?

Anyone familiar with this?

Here's the page:

http://simplesourcedev.com/activation_email1.asp

The last button on the bar does exactly what it's supposed to, but I can't get an icon to show...

Thanks

Bill
0
Comment
Question by:billium99
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 1

Author Comment

by:billium99
ID: 39603176
As a follow up - could I use plain text titles on the button instead of icons?
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39603187
Again, I am putting your tinymce into jsbin because you have errors on your sample page that need to be dealt with separately.  Using their example I created the jsbin http://jsbin.com/OXiYinu/1/edit?html,output

I added the following code from tinymce example on how to make your own plug in http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
 tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example', {
        text: 'My button',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'Example plugin',
                body: [
                    {type: 'textbox', name: 'title', label: 'Title'}
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    editor.insertContent('Title: ' + e.data.title);
                }
            });
        }
    });

    // Adds a menu item to the tools menu
    editor.addMenuItem('example', {
        text: 'Example plugin',
        context: 'tools',
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'TinyMCE site',
                url: 'http://www.tinymce.com',
                width: 800,
                height: 600,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
    });
});
  

Open in new window

Additionally, you will see I replace your "customername" with "example"
tinymce.init({
    selector: "textarea#createdMessage",
    theme: "modern",
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor",
		 "example"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | example ", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 }); 

Open in new window


The text for the button is from the code
 text: 'My button',
0
 
LVL 1

Author Closing Comment

by:billium99
ID: 39603248
Had to decrypt what you were trying to say. Bottom line: I needed icon:false, text:"text" to get the existing function to work.

Thanks for the help!

Bill
0

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will show, step by step, how to integrate R code into a R Sweave document
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question