Jump to content
Soma

Add bramus_cssextras plugin to TinyMCE inputfield

Recommended Posts

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.

  • Like 8

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Screenshot%20Sep%2020%2010.09.25.png

Edited by alan
  • Like 2

Share this post


Link to post
Share on other sites

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.

post-100-0-19516400-1348138266_thumb.png

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.

post-100-0-83118200-1348138411_thumb.png

  • Like 3

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).
  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Edit: typo

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

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. :)

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By hellomoto
      I have a Pages field with a PageListSelectMultiple input fieldtype, and I cannot limit it through the "custom PHP code" filter in its settings. I don't want hidden pages to be selectable, because the field is supposed to be to select pages to be included in a frontend menu. How can I do this? and it would be nice to be able to use the custom php code way to filter...
      Also, I cannot install, or activate, rather, TinyMCE. It's claimed to be compatible with 2.5... I install it, and when I try to activate it, without fail, it "activates" CKEditor, which is already activated by default, and installs its files into the /site/modules/ directory. TinyMCE is still in there, just inactivated and useless, being that there's no workaround to activating modules besides from the admin (that I know of, and it should work via the admin anyway). I also tried using BatchChildEditor (supposed to work with 2.5) -- don't seem to do anything when activated. I selected some settings and nada.
      Does anybody have any idea why I might be having these problems? I got all green for all the install compatibility checks...
    • By Thomas108
      Hi everybody,

      I am trying for a while now to display the alt tags as captions from images inserted via tinymce.
      I read this (and a few other) threads: https://processwire.com/talk/topic/1344-captions-for-images-in-tinymce/

      ... and I installed Adrian's tinymce-image-caption,
      but it didn't work at all for me.

      Then I installed Teppo's TextformatterImageWrapper,
      again no change in the frontend.

      Finally I tried Ryan's approach which is also mentioned in the linked thread above.
      https://github.com/ryancramerdesign/FoundationSiteProfile/blob/master/templates/scripts/main.js
      and again no change in the frontend output.

      The last days I felt like I fell in love with processwire, everything went very smooth, but today seems to be not my day.
      I have no clue what's wrong, maybe some pw (2.4.7) or php (5.4.32) version  problem? My template is valid html5.

      I just made a fiddle with ryans approach: http://jsfiddle.net/wqo4fk8o/10/
      Maybe someone can have a look and point me in the right direction?

      Thanks in advance,

      Thomas
    • By Kae
      Hey, guys!!!
      I'm having a very big problem with Tinymce in processwire. I feel so stupid about it, but can't find the solution. Hope someone can help me.
      When I change to html and paste html tags inside a <code> tag, they get converted and disapear. How can I avoid this?
      All Iwanted was to show some code examples. I feel so noob right now '-'
      Thank you =)
    • By gRegor
      Hello,
      I have built a form that allows authenticated members to submit articles through a front-end form. I was under the impression that 2 newlines would automatically be converted to paragraph elements, but I'm pretty sure that's incorrect as I re-acquaint myself with this aspect of PW.**

      Then I was thinking there was a TinyMCE configuration to convert newlines to paragraphs. There is, but I'm pretty sure that applies only during entry into the textarea, not when the text data is first loaded into the TinyMCE textarea.
      First, is there a built-in PW paragraph formatting function that I'm missing/forgetting?
      If not, would the "preferred" method to achieve this be using TinyMCE on the front-end form, so newlines are converted to paragraphs before the form is submitted and the page fields are stored? If so, can someone point me to an example of using the PW API to include a TinyMCE field input?

      Or would the preferred method be to process the raw input to convert newlines to paragraphs (through another module, or custom code) before saving the page fields?

      I'm aware there is an Auto Paragraph TextFormatter module, but I believe that only applies when the data is output — not when the data is shown in backend.

      Thanks for any assistance!

      ** I have confirmed that the newlines are stored in the database, so I've confirmed they're neither being removed nor converted.
    • By landitus
      I'm having a weird issue with images in TinyMCE.
      When adding images to the images field (the default one), I add a description. Then I add the image to the body field via TinyMCE. Then save and the image has the correct alt text. So far so good... But, if I reopen the same image with the image button, the description is gone from the modal window. If I re-save, the image is displayed without the description. Looks like the image it's not retaining the original description value when editing. Is this a bug?
×
×
  • Create New...