TinyMCE

James

Well-known member
Are we able to customise the TinyMCE editor as you would any standard TinyMCE editor?

I love the customised toolbars you can make and the fact you can change the skin and colour.. like so:
Code:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
skin : "o2k7",
skin_variant : "black",
});
 

James

Well-known member
I hope so.

I need to add a lot more BBCode to it, assuming that's something that can be done...
TinyMCE has plugin support which includes BBCodes. I do believe that the current BBCode manage written by Kier and Mike includes TinyMCE though.
 

James

Well-known member
I was just checking (just in case you'd made customisations to adapt it to XF). Thanks for clearing it up Kier.
 

Brogan

XenForo moderator
Staff member
Is anyone using their own Custom TinyMCE ?
Custom how?
I've changed the toolbar icons on mine, removed the smilie dropdown and I've also told a few people how to change the style/colours, etc.

I don't think anyone has managed to add a button though yet.
 

James

Well-known member
I'll give TinyMCE a quick experiment shortly, but have a quick look at this code and try to insert it in your tinyMCE toolbar.

If someone fancies throwing the following code into a custom js file (or include it under the original tinymce include) it should create a custom button, assuming K&M didn't alter its core functionality:
Code:
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                                // Add you own code to execute something on click
                                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});
</script>
 
Top