[Pro] Tinymce 4

Freeway
1

Hello all,
I want to be able to add some custom formats to the Tinymce 4 editor. Not much on documentation is out there. Tiny MCE has some on their website but it is poor in explanation.

Anyone ever done this?

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

Actually the Tiny 4 docs are quite good, some of the best of their kind. What exactly are you trying to do?

Add inline styles? Or block styles? Something else?

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

On Mar 3, 2016, at 9:44 AM, billy kimmel email@hidden wrote:

Hello all,
I want to be able to add some custom formats to the Tinymce 4 editor. Not much on documentation is out there. Tiny MCE has some on their website but it is poor in explanation.

Anyone ever done this?

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

I want to add a font choice. I know I could just add style to the element on the page but I have clients that like to have several choices.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

And will they need to change the font of an entire paragraph (block) or just a run of text (inline)?

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

I want to add a font choice. I know I could just add style to the element on the page but I have clients that like to have several choices.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

block

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Here’s one way.

This will create a group of styles with the name “Fonts” which will contain a list of any custom styles you wish to add.

In the Tiny configuration file, or wherever you’re initializing Tiny (you should already know where) you should see the very first tinymce.init line (below). Just add my style_formats code somewhere after that opening line, but before the closing tag. Of course you will want to rename the styles.

For this to work whatever (class) styles you define below must also be present in your stylesheet. So create whatever font styles you want.

Now when a block of text is highlighted in Tiny your class (font) style can be applied to a paragraph which will go from this:

<p>Some text…</p>

to this

<p class-"my-custom-font-style">Some text…</p>

Bear in mind this particular example will only work on paragraph elements.

tinymce.init({
	… more stuff here

	style_formats: [
		{title: ‘Fonts', items: [
			{title: 'Font Name 1', block: 'p', classes: 'name_of_class_style_from_stylesheet'},
			{title: 'Font Name 2', block: 'p', classes: 'name_of_class_style_from_stylesheet'},
			{title: 'Font Name 3', block: 'p', classes: 'name_of_class_style_from_stylesheet'}
		]}
	],
});

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

block

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

*One more important thing, add this line before the style_formats code:

style_formats_merge: true,

This will ensure the default Tiny formats remain as-is instead of being replaced by your custom styles.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

So for example for class_style I would put this?

‘Raleway’, sans-serif;’

This is a google font that is referenced in the head of my page.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

Yes, just define the font as you normally would in the FW styles editor and name it “raleway”. Repeat for other styles/fonts if necessary.

As long as the font can be found (be it Google, embedded…whatever) it should work. I’ve done this very thing numerous times with Tiny 4 and Google fonts.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

Ok I’ll give it a try.

Thank you

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

11

Do I have to have the Developers version of Tiny MCE. Right now I have 4.3.6
I’m not seeing the config file.

Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

12

I always use the cdn version then custom things as needed using the initialize code.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

On Mar 3, 2016, at 12:35 PM, billy kimmel email@hidden wrote:

Do I have to have the Developers version of Tiny MCE. Right now I have 4.3.6
I’m not seeing the config file.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

13

These are the file that are in the Tiny MCE folder.
the .js files just run in one line of text in a text editor.

jquery.tinymce.min.js
langs
license.txt
plugins
skins
themes
tinymce.min.js

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

14

Are you using Tiny with a CMS? WebYep?

The initialize code I gave you is javascript. In my apps I use that code in html files to initialize Tiny on-the-fly (via its CDN) and to customize things, just like you’re trying to do. I haven’t used Tiny the “old" way (with files) for a long time.

If you’re using it with WebYep then contact Max, maybe there’s a required step I’m not familiar with. Honestly, using the CDN approach is dead simple. At least the way I’ve been using it.

Todd
Office (Chicago): 312.212.3955
https://qreativ.space

On Mar 3, 2016, at 1:02 PM, billy kimmel email@hidden wrote:

These are the file that are in the Tiny MCE folder.
the .js files just run in one line of text in a text editor.

jquery.tinymce.min.js
langs
license.txt
plugins
skins
themes
tinymce.min.js

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

15

Yes I am using Web Yep. I’ll email Max.
Billy

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options