3. June 2013
von Blackbam

TinyMCE is the standard WordPress visual editor and it might be the best choice for a lot of WordPress websites. Unfortunatly it always required some time and a lot of knowledge to customize and style it to your needs. Using this following Plugin will reduce this problem.

 

Clients tend to get crazy if they have to edit HTML code on their own or if little things are not working as expected. Make your editing experience as simple and good as possible: Customize TinyMCE / TinyMCE Advanced (or other TinyMCE variants) to fit your needs. Basically, this Plugin does two things for you:

1. This Plugin installs two files editor-style.css and editor-style-shared.css into your Theme folder (so you can still do updates of the Plugin), which can be edited in the backend of your site

  • editor-style.css is used for styling your TinyMCE Editor
  • editor-style-shared.css is used for styles to be used in your theme AND in your TinyMCE editor (so you do not have to copy)

Note: To use this feature, you have to write your own CSS code into this files, which is the only professional way to do it.

2. The main feature of this Plugin is to offer a GUI to create custom style formats for TinyMCE dynamically

  • Easy and very fast to add/change/delete
  • You do not have to change one single line of source code any more

Please report any bugs you may encounter and support this Plugin if you like it.    

 

>> Download the Plugin HERE <<

 

  Screenshots:

screenshot-1
 
 
      screenshot-2
Share

Dieser Eintrag wurde am 3. June 2013 um 23:23 in der Kategorie Plugins, WordPress veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.


Tags: , , , , ,

Already 20 comments belonging to "WordPress Plugin: TinyMCE and TinyMCE Advanced Professsional Formats and Styles":

Kommentare abonnieren (RSS) or URL Trackback

Miriam   says:

on 20. June 2013 at 06:15 on clock ()


You need to fix the links in your plug in. Currently the plugin link goes to http://www.blackbam.at/blog/ and gives a permission error. Cheers Miriam

Blackbam     says:

on 20. June 2013 at 10:21 on clock ()


Hello, thanks a lot you for showing this. I will repair it before the next release.

Andre Klein Kranenbarg     says:

on 07. July 2013 at 19:39 on clock ()


Hi David,
I am trying your plugin at the moment, but I have the same remarks as Miriam, the plugin link gives an error (minor issue) and when I want to go to the settings of the plugin I get an permission error. How to continue? Any idea when you have time to have a look at it?

Kind regards,
Andre

Blackbam     says:

on 08. July 2013 at 14:56 on clock ()


Hello Andre

the link to the Plugin page is broken, I will fix this very soon, its just a little bug.

If you want to change the settings of the Plugin, go to "Settings -> TinyMCE prof. Styles" in your WordPress Backend.

If you do not see this page or if you cannot access it, make sure you are logged in with the role "Administrator" into WordPress (the "manage_options" capability is needed).

Does this help you?

Stu Ducklow     says:

on 29. October 2013 at 01:09 on clock ()


I like the idea behind your plug-in but half the time it doesn't work and it's very badly explained. If you would tke the trouble to write a complete explanation on how it works I'd donate because it's useful. But otherwise, it's just frustrating. I have to go by trial and error to see what results I'll get as most of the options are not explained and don't make any sense. This is typical of code junkies who don't seem to realize thst other people have lives other than coding and don't really care. They just want a product that can be used with a minimum of hassle. If you don't believe me, look at Apple.

Blackbam     says:

on 05. November 2013 at 21:09 on clock ()


Hello Stu, can understand your point very well, the problem is that coders usually have to do a lot of work and free WordPress Plugins are kind of donation by the developers because you will not earn a lot of money with these. I mean Apple has the time and ressources, because they have a lot of employees but quite a tiny amount of products, so they can invest a lot of time to make these perfect.

There are three reasons, why the Plugin is that complicated:

1. The structure of how to create styles is bound to the TinyMCE - API, which is a bit crappy
2. The user has to understand CSS - if you understand CSS and know what properties you have to use, you will find most of your aims quite easy to achieve
3. This Plugin was initially intended to be used by other developers selling "perfect" WordPress sites to there customers (which will never touch the code of the Plugin page) and these developers know how to use it

However I WILL take the time to write a better explanation of how to use the Plugin and create a simpler workflow, because I want the WordPress users to like it and find it useful, even if they are not that strong into CSS.

Lucy     says:

on 03. March 2014 at 05:34 on clock ()


My new class is not recognized - I have added the definition into the editor-style.css file and have created it as a new selector on the TinyMCE Advanced Professional Styles page. The style works when defined as inline with the style and value on the TinyMCE Advanced Professional Styles page, but when I change it to selector, nothing happens.... Am I supposed to declare the class somewhere else???

Blackbam     says:

on 03. March 2014 at 17:15 on clock ()


Hello Lucy, basically it works like this:

First possibility: Define a class in editor-style.css and the text in the visual editor in the backend can be styled with this class
Second possibility: Define a class in editor-style-shared.css and the class will apply in the visual editor in the backend and in the frontend.
Third possibility: Define inline styles directly at the Plugin options page/ or declare a new class as inline style which you also define in editor-style-shared.css

Does this help?

madnigaz     says:

on 09. March 2014 at 18:31 on clock ()


Hi Bam
I wanted to use the "editor-style.css" sheet created by this plugin, by putting in already downloaded css files from google search.
This e.g. :

body {
  color: gray;
  background-color: white;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 71%;  /* Enables font size scaling in MSIE */
  margin: 0;
  padding: 0;
}

html > body {
  font-size: 8.5pt;
}

acronym, .titleTip {
  border-bottom: 1px dotted gray;
  cursor: help;
  margin: 0;
  padding: 0 0 0.4px 0;
}

acronym:hover, .titleTip:hover {  /* Ignored by MSIE. The nerve! */
  border-bottom: 1px solid rgb(70,130,180);  /* 'steelblue' not recognised here by Opera */
}

.doNotDisplay {
  display: none;
}

.smallCaps {
  font-size: 110%;
  font-variant: small-caps;
}
============== but it is not showing in the styles dropdown menu.

I just want to create dropdown items in Styles menu, by copying and pasting OpenSource css codes available out there.
I wont be using the Provided Table that lets us create "1" css rule at a time.
Neither do I want to change the TINY MCE's "outfit" i.e. its clothes :)
Only creating the Styles dropdown menu's items.

Any guide relating to that?
Will be appreciated.

Tim   says:

on 19. March 2014 at 21:02 on clock ()


Hi David,

I've just installed your plugin and it works great, the only thing is that the Styles dropdown menu shows all the css styles in the parent theme. I'm using a child theme and I've created my editor-styles.css directory and hooked it up using the advanced custom directory option. This works fine - my styles are in the menu and apply perfectly - but they are at the bottom of a huge list! How do I remove / edit exactly which styles are shown in the dropdown menu?

Many thanks
Tim, London

Blackbam     says:

on 21. March 2014 at 15:26 on clock ()


@madnigaz: Hey I think the solution for this problem is really easy? You just have to go to the Plugins option page

Settings -> Tinymce Prof. Styles

This is the correct location to create the actual styles for the dropdown. Editor-style.css is just for styling what your TinyMCE looks like.

Blackbam     says:

on 21. March 2014 at 15:32 on clock ()


@Tim: Hi Tim,

unfortunatly I did not have the time yet to implement extra styling for multisite / child themes in the Plugin properly. You have to wait until I have time to update the Plugin or you implement a solution for adding the styles to the dropdown yourself - the basic code for doing this is shown below:

add_filter('tiny_mce_before_init', 'addCustomTinyMCEStyles', 5);

function addCustomTinyMCEStyles($initialArray) {
$modifiedArray = $initialArray;

$modifiedArray['theme_advanced_styles'] .= ';My Style=mystyle;';
//strip first and last character if it matches ";"
$modifiedArray['theme_advanced_styles'] = trim($modifiedArray['theme_advanced_styles'], ';');
return $modifiedArray;
}

Sean     says:

on 06. May 2014 at 04:10 on clock ()


Hi, I know how to use CSS well enough to style text, but what exactly am I supposed to do to get the plugin to work? So far I have put .highlight-yellow {background-color:#FFFF00;} into editor-style.css & editor-style-shared.css I have also gone to the plugin settings and and created one with the title "Highlight Yellow", css class "highlight-yellow", css style "backgroundColor", ad value "#FFFF00". The only thing that has come from all three of those setting combined is that when I click the formats button in tinyMCE Advanced I see the words Highlight Yellow in a box at the upper left of my admin screen, way out of place, no click function, and doesn't scroll with the page. How exactly do we add something to the formats box or wherever in tinyMCE to make this work? and Why has my attempt so far had no effect?

Py   says:

on 06. May 2014 at 16:52 on clock ()


Hey, I'm trying to add custom format and I did not find "TinyMCE Prof. Styles" in Settings? I've only "Tiny MCE Advanced" where i choose buttons to show or not but no options to add formats. Bug? Thanks

Miriam   says:

on 12. June 2014 at 03:32 on clock ()


Hi Bam,
can you confirm have worked this out right:

To get items in the drop down list in TinyMCE, you have to make them in your gui editor (it is not looking at the style sheets to work out what to insert).
You can't put them in that drop down without defining them.
The style definitions are injected into the html as hard coded styles, rather than using the style sheets to display.

Style sheets
I chose to create a folder in wp-content for the style sheets.
I put the folder name in to the settings, but it got added to the css stylesheet name, it would not recognise that there was a folder . It would not allow me to add a final slash either.
Then at some point it stopped letting me edit that "folder" name.
So I deactivated and uninstalled the module to clear the info in the database related to this.

I then reinstalled the module: but the folder name was still there, and still not editable, and the plugin cannot find the folder or the file and gives an error message.
So: the uninstall is not working well, since it did not delete the date form the database.

I am not sure what the purpose of the files are, if you have to define the styles in the GUI and the plugin injects the styles in the html.

I would rather care ate my css in my css file, but can't see how to do that with this plug in.

Any feedback would be welcome.

Cheers
Miriam

jack     says:

on 18. September 2014 at 15:02 on clock ()


Hi blackbam I love your plugin, but since i update to wordpress 4.0, it stop working... The formats selector in the new tinymce editor is totaly empty. Have you got a quick fix to solve this issue I will donate if you keep updating this plugin. It's very useful. Thanks!!

Blackbam     says:

on 25. September 2014 at 00:12 on clock ()


Hi Jack

thanks a lot for reporting this issue. Currently I do not have a quick fix, but I will care for this problem and try to release an update asap.

BR David

Blackbam     says:

on 03. October 2014 at 17:03 on clock ()


@Miriam (late answer): The purpose of the files is to style the editor itself. If you want to provide CSS-Classes to the user, you have to create these in the GUI.

Peter   says:

on 10. October 2014 at 12:43 on clock ()


Hi Blackbam,

Thanks for the plugin, saves me a lot of time. However, now that I got it working, I created an editor role for someone else to use on my site, and that role does not have permission to the new formats I created for him.

Is there a setting somewhere I am missing?

Thanks in advance,
Peter

Blackbam     says:

on 19. October 2014 at 20:43 on clock ()


Hello Peter

well I tested the Plugin with an editor role and for mit it works. I usually use it in combination with TinyMCE Advanced, do you do this?

Furthermore I noticed that new users usually have the second row in tinyMCE set to INVISIBLE. May this be the problem?

BR
David

Leave a comment:

Current day month ye@r *