22 replies to this topic

[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.

[alanfluff]

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

[alanfluff]

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 by alan, 20 September 2012 - 09:13 AM.

[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.

[alanfluff]

@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 <img src='http://processwire.com/talk/public/style_emoticons/<#EMO_DIR#>/sad.png' class='bbc_emoticon' alt=':(' /> 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{}"

[alanfluff]

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 by alan, 26 September 2012 - 04:58 AM.

[alanfluff]

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{}"

[alanfluff]

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 demo video 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.