Solved

TinyMCE button icons/fonts

Posted on 2013-10-26
3
720 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
  • 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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now