Solved

TinyMCE button icons/fonts

Posted on 2013-10-26
3
703 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

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 …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 how to count occurrences of each item in an array.

762 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

12 Experts available now in Live!

Get 1:1 Help Now