Solved

TinyMCE button icons/fonts

Posted on 2013-10-26
3
728 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

786 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