Add bramus_cssextras plugin to TinyMCE inputfield

[Soma]

Since a latest updates to TinyMCE inputfield there's an option to add custom plugins from outside the core to TinyMCE on a per field basis. Here's an example how to add the bramus_cssextras plugin.

Ok download the plugin http://www.bram.us/p...xtras/#download

1. create a directory in your site folder i.e. "/site/tinymce"

2. create a plugins folder in it i.e. "/site/tinymce/plugins"

3. put the folder "bramus_cssextras" in there

4. put a content.css in the "tinymce" folder (this is where you can define classes or id's, like: p.lead {...}, ul.list {}, h2.red{ ... } ) (see bramus_cssextras homepage for further infos)

5. now go to the TinyMCE field you want to use it. Under tab "Input" you'll see a "TinyMCE Advanced Configuration Options" collapsed. Open it.

6. add the buttons to one of the theme_advanced_button fields: "bramus_cssextras_classes,bramus_cssextras_ids" if you don't need id's leave it out

7. add the content.css to the content_css field setting like: "/site/tinymce/content.css"

8. add plugin to "Third-party plugin" textarea field like: "bramus_cssextras: /site/tinymce/plugins/bramus_cssextras" as one line.

Done. You should now be able to select the class "lead" when cursor inside a <p> tag. Add as much css classes or id's to the content.css as you wish, bramus_cssextras will autodetect them.

Have fun.

[Martijn Geerts]

I'll keep this plug-in in my mind. Maybe some customer want to have pop-up's & stuff & I need him to set a class of .popup or something. Again a very useful module! from Soma !

[Marty Walker]

What version of PW should I be running? I followed your steps and the TinyMCE buttons disappear and I just see raw html in my field.

[Soma]

If you have the config field mentioned in TinyMCE field it should work in latest PW. Make sure you have entered and setup everything correct.

[Soma]

I'll keep this plug-in in my mind. Maybe some customer want to have pop-up's & stuff & I need him to set a class of .popup or something. Again a very useful module! from Soma !

Thanks, but this isn't a module and it's not from soma (well I added the third-party config option to the TinyMCE field in PW). It's just to show how to use the advanced options to integrate a TinyMCE plugin from outside the core.

[alan]

Thanks Soma, worked perfectly first time for me

[apeisa]

Soma, thanks for this! One thing I started wondering after implementing simple styles for p-tags is that is there a way to add things like:

div.noticebox {
 background: #f3f3f3;
 border: 1px solid #eee;
 padding: 1em;
}
div.errorbox {
 background: white;
 border: 1px solid red;
 padding: 1em;
}

And have those appear as a selection in tinyMCE? So one could have noticebox and use headers and paragraphs inside it. After reading the bramus site I think that it's not possible, but thought that I ask from our TinyMCE specialist first

[alan]

apeisa I've not tried that, but one thing I got working yesterday was alerting for non-technical editors if they mistakenly have the STRONG tag with an H tag. Of course an editor (with appropriate CSS) might want to use STRONG in an H tag so I allowed for that:

h1:not(.BoldAllowed) strong:after,
h2:not(.BoldAllowed) strong:after,
h3:not(.BoldAllowed) strong:after,
h4:not(.BoldAllowed) strong:after,
h5:not(.BoldAllowed) strong:after,
h6:not(.BoldAllowed) strong:after {
content: "[info] (H)eadings should not be (B)old.";
background: #ffffcc;
font-weight: normal;
border: 1px dashed red;
padding: 0.2em;
font-size: 12px;
}
h1.BoldAllowed,
h2.BoldAllowed,
h3.BoldAllowed,
h4.BoldAllowed,
h5.BoldAllowed,
h6.BoldAllowed {
font-weight: normal;
background: #ddffdd;
}

The result is on-the-fly warning as the editor is editing copy in the TinyMCE textbox, fantastic. And this is only one thing I saw I could do now I have Soma-powered CSS control over TinyMCE. I'll try and add a screen-grab here of how this looks but if I don't I'm sure you see what this would look like to the user, simple and instant 'auto-help'.

Edited September 20, 2012 by alan

[Soma]

Yes you can add "div" to the theme_advanced_blockformats. But then you can set a div, but not have paragraphs or headers inside.

But what you could do is create tinymce html templates, you can select and insert. In this template you can have something like:

<div class="errorbox">
 <h3>Heading3</h3>
 <p>Text Paragraph</p>
</div>

It will insert this code, and you can then simply edit the content.

To setup templates you add the button "template" and the plugin "template". Also add ,div[class] to the valid elements config string.

Then in the Additional TinyMCE settings you add this on a new line:

template_external_list_url: /site/tinymce/body_templates.php

Then you create a folder /site/tinymce/ and create a body_templates.php (could also be a static .js) this will server as a proxy to add templates. So a list with js array. You should have a structure like on the screenshot.

Then in the body_templates.php have this code:

<?php
include($_SERVER['DOCUMENT_ROOT']."/index.php");
?>
var tinyMCETemplateList = [
// Name, URL, Description
 ["Table Simple", "<?php echo wire("config")->urls->root; ?>site/tinymce/templates/body_template1.html", "A simple table."],
 ["Error Box", "<?php echo wire("config")->urls->root; ?>site/tinymce/templates/message_template.html", "Error Box."]
];

Now you can select the template via the template button in TinyMCE.

[apeisa]

Damn you are pro soma, thanks! Will test that soon.

[alan]

@Soma I don't know if this is unique to me or not, but I found after adding the plugin that when I set an image's alignment it is not reflected in the editor, so I added these to content.css

/* Image float in the editor is lost from the use of the plugin  so re-make it here */
img.align_right {
float: right;
}
img.align_left {
float: left;
}
img.align_center {
margin-left: auto;
margin-right: auto;
display: block;
}

and it returned to working as it had before I'd added the plugin. No problem, I just add these when I add the plugin But I wondered if this is only me seeing this?

[Soma]

Thanks alan for mention. Yes I think if you use a custom content.css and don't have the PW classes .align_left etc in it won't show the floating in the editor. PW has those classes in the content.css from the InputfieldTinyMCE by default, so if you create you own content.css make sure you copy them over.

If you want to be able to select those classes also manually via bramus you write "img.align_left{}" with the tag "img", if you don't want them to show up in the bramus style dropdown you can just write ".align_left{}"

[alan]

Thanks Soma, I see now how this use of a new content.css stopped the PW one; I hadn't realized there was a PW one before, I'll go look for it so I can see what other styles I may be missing, and thanks for the info on naming convention also.

PS: Found the PW file, if I'm not mistaken it's:

/wire/modules/Inputfield/InputfieldTinyMCE/content.css

And it looks like for the average editor the most important rules are those image aligns, but the default PW version has nicer body font and a couple of other changes; thanks again Soma, I'll copy those in

Edited September 26, 2012 by alan

[alan]

Excellent! Thanks for the tip Soma

If you want to be able to select those classes also manually via bramus you write "img.align_left{}" with the tag "img", if you don't want them to show up in the bramus style dropdown you can just write ".align_left{}"

[alan]

Visually delineated blockquotes: I always like it when the pay-back from an investment in time such as adding custom styles into the TinyMCE editor (courtesy of Soma) jumps up a notch from just a tiny bit of code. Adding this

blockquote {
border-left: 1px dashed #ccc;
border-right: 1px dashed #ccc;
position: relative;
padding: 0 0.38em;
margin-left: 6.2em;
margin-right: 3.8em;
background: #f8f8f8;
}
blockquote:before {
content: "blockquote";
position: absolute;
top: 0;
left: -5.2em;
color: #bbb;
border-top: 1px dashed #ccc;
padding: 0.1em 0.2em 0 0;
}

to /site/tinymce/content.css gives your editors on-the-fly clear cues where `blockquotes` begin and end. In the

I am using Cmd+e to add/remove `blockquote`, in the same way you can use Cmd+2 for H2 etc (the styling is deliberately 'light' so as not to get in the way, viewing in HD fullscreen shows it roughly as you would see it).

[apeisa]

Soma - you don't have any tip on how to make templates removable? If I use template-plugin and insert my .noticebox div, I don't find any way to remove it. Backspace and delete just moves content in or out of the box, but the div is never removed.

[Soma]

I don't know how. But I think if you add "-div" to the valid elements it will get removed if empty.

Edit: typo

[apeisa]

Thanks Soma - that actually allows to remove it with delete/backspace also!

[BrendonKoz]

So after reading through this topic, I also realized that it would be possible to load CSS files with the same names as the template assigned to a page (for all TinyMCE enabled textarea fields related to that page) -- and change dynamically if the template was changed on-the-fly.

Example:

Template: basic-page

CSS Filename: basic-page.css

Unfortunately I'm having a hard time following how Processwire is loading TinyMCE since it seems to be rather customized. Is it the jQuery version of TinyMCE? Are there hooks to interact with the TinyMCE init? Is it possible to override select settings from the default?

Once I can figure this out I'll gladly share my solution for anyone to use...or critique. I don't know if naming CSS files based on the template name is the best method, but the concept could be pretty easily used to provide for a more meaningful and useful solution.

[ryan]

Unfortunately I'm having a hard time following how Processwire is loading TinyMCE since it seems to be rather customized. Is it the jQuery version of TinyMCE? Are there hooks to interact with the TinyMCE init? Is it possible to override select settings from the default?

I don't think that we are currently using the jQuery customized version of TinyMCE. It is possible to customize TinyMCE's init with ProcessWire hooks, though it's late in the day here and the exact methods escape me right now. I think that Soma or Diogo might have a better idea. But there should be some good info in the archives of these forums, as I know the topic has come up before. I just don't know what keywords to use to find it yet (tried a few). But if you can tell me more specifically what you are trying to hook into and what property you want to change, I think we can come up with a solution even if we can't track down the previous ones. 

[BrendonKoz]

For the most part, different templates serve different purposes. For displaying customized site content in the editor, this is a fantastic tool (Bramus). I realized that based on information that we already have available to us in the page create/edit form, we could dynamically load CSS content specific to a particular template. I have not entirely thought how this might best be served, it's more of a proof-of-concept idea at the moment. (Originally in my head I was thinking of "template" as a "theme" which is entirely different, but my curiosity was piqued. I have not discovered yet how themes work with PW, or if they do.)

Unfortunately - from the research I've thus far made - it seems as though changing the loaded CSS on-the-fly with regard to TinyMCE requires a complete removal and reload (init) of the RTE. It seems possible (for all TinyMCE compatible browsers), but does cause a Flash-Of-Content. Since the editor would be hidden in a different tab (in the default admin theme) when changing themes, I don't think this would matter all too much. Alternatively, the TEXTAREA could be animated to hide (fade), remove/init, then unhide. Regardless...below is a link to an example where I've made it happen (the code is shoddy, it was just to get it working). It seems to work best in WebKit as you can more easily see the redraw in Firefox.

http://gravball.net/test/examples/css_change.html (Note: this link will not remain forever)

Dirty work of the code (where the IDs in the switch relate to a BUTTON element being pressed, just for an example):

tinyMCE.init({
    mode : "textareas",
    theme : "simple"
});

$(document).ready(function(){
    $('button').click(function(){

        // set the css file path based on button pushed
        var cssfile = '';
        switch($(this).attr('id')) {
            case 'css1':
                cssfile = 'css/test1.css';
                break;
            case 'css2':
                cssfile = 'css/test2.css';
                break;
            case 'clear':
                cssfile = '';
                break;
        }

        // http://blog.gbinghan.com/2012/04/reintialize-tinymce-after-jquery-load.html
        $('textarea').each(function() {
            try {
                tinymce.execCommand('mceRemoveControl', true, $(this).attr('id'));
            } catch(e) {
                alert('error');
            }

        }).promise().done( function() {
            tinyMCE.init({
                mode : "textareas",
                theme : "simple",
                content_css : cssfile
            });
        });
    });
});

A script could be modified to listen for an onchange of the template and swap out the Bramus CSS for a template-specific version. Unfortunately I would need to somehow either determine and copy the current Processwire init settings, or call it with a modifier (if that is possible, I haven't gotten quite that far).

Realistically this, I would imagine, would be much more handy with front-end themes that come with an accompanying backend Bramus CSS file to match the frontend. Still, at this point it's more of a proof-of-concept.

Administrators: Feel free to move this to a new forum/topic, I didn't intend for this to become a conversation of its own.

[alan]

As someone who (with help from friends (tks Soma et al)) has taken advantage of custom style in the editor, this facility sounds very interesting, thanks BrendonKoz.

As an aside I know there is a debate (in another thread somewhere) over which main editor might be core to PW in the future (at least I think that's what it was essentially about, sorry for not linking to it).

[Soma]

Sorry for the delay, I've read your posts but forgot to further think about it and respond. It often happens I read it on mobile and forget about it later on laptop because it's already read.

I think this is rather edge case and nice to have possibility, but for my needs it would make mostly more sense to have different field in PW and have a different css there if needed but never had.

However you can simply overwrite the default tinyMCE config used by textareas in the default.php of admin theme. If you look at my Teflon theme there I'm setting the theme of tinyMCE globally via js. https://github.com/somatonic/teflon-admin-theme-pw2/blob/master/templates-admin/default.php#L90

There was a long thread where we figured this simple idea, but can't remember which thread

This sample code works to use a "template-name.css" only on page edit process. So all TinyMCE fields will use this.

<script>
	// overwrite TinyMCE skin setting globally
	// as defined in /wire/modules/Inputfields/InputfieldTinyMCE/InputfieldTinyMCE.js
	// and loaded before
	if('undefined' != typeof InputfieldTinyMCEConfigDefaults){
		InputfieldTinyMCEConfigDefaults.skin = "default";
		<?php if($page->process == "ProcessPageEdit") {
			$cssfile = $config->urls->templates . "css/" . $modules->get($page->process)->getPage()->template . ".css";
			echo "InputfieldTinyMCEConfigDefaults.content_css = '$cssfile';";
		} ?>
	}
</script>

I haven't tested further side effects and what if you want to still have different css for different fields... so this could also be made into a module that injects this code in the head of the admin page, so you could configure anything. Everything is possible in PW, just question how.