CODEWITHSUNDEEP
javascriptformattingtinymcetinymce-4
Sam Kauffman
Sam Kauffman

Reputation: 1240

TinyMCE 4: Apply one block format to new blocks automatically

In TinyMCE 4, I am using the standard formatselect control to format block elements in the content. Its config usually looks something like this:

block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2'

I have custom styles for those blocks, and I need the styles to remain no matter where the HTML generated by the editor ends up. The content.min.css in the theme can control how the blocks look inside the editor, but not elsewhere, so I can't rely on that. So I am using custom formats instead of the standard block formats. My config looks like this:

block_formats: 'Normal=normal;Header 1=header1;Header 2=header2',
formats: {
    normal: {block: 'p', styles: {
        'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif',
        'font-weight': 'normal',
        'font-size': '13px',
        'line-height': '20px',
        'color': '#333'}},
    header1: {block: 'h1', styles: {
        'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif',
        'font-weight': 'normal',
        'font-size': '30px',
        'line-height': '40px',
        'color': '#333'}},
    header2: {block: 'h2', styles: {
        'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif',
        'font-weight': 'normal',
        'font-size': '20px',
        'line-height': '30px',
        'color': '#333'}}
},

This achieves what I intended by embedding the styles in the HTML elements produced. But there are some changes in behavior when using custom formats that I don't understand.

When using the default block formats, Paragraph is selected by default when the content is empty and whenever a new block is created. With custom formats, it doesn't select a default block format, so the default is to have none of my custom styles. I want normal to be the default. How can I achieve that?

Upvotes: 3

Views: 1031

Answers (1)

Stickman
Stickman

Reputation: 31

This is probably terribly late, but I think I was able to pull this off in a way that might suit you. Hopefully someone finds this useful.

(using tinyMCE: 4.3.13)

In my situation, I am showing a tinyMCE instance in a modal. The modal can be used to create, or edit text that is then saved to the database as html. The issue I had was when creating a new text instance, a p tag is dropped in (assuming you add some content) by default that does not reflect the current styles they are viewing. Later, I need to render this html into an image, so the styles have to be present on the tags when I render it and the 'formats' object does not effect it, because the user has not selected it through the UI. The user could then create resulting html that displayed differently in the image, since the Web-Kit rendered did not have the right css, so just rendered its defaults.

So, to force it to display the initial style (font size and font family were my concerns) you can simply set the initial content of the editor. I do this right before the modal is shown to the user, if no html is available to be edited.

tinymce.activeEditor.setContent('<p><span style="font-family: arial; font-size: 8pt;">&nbsp;</span></p>');

Of course, a check on the browser version can be done first to make sure you are setting acceptable values.

Hope this helps.

[UPDATE] *This is a fail! The editor will render the default character and place the cursor after it on focus. This creates mis-edits by design. (Imagine I impose a default 'underline' style on the text)

Because I made a space, that underlined space would now appear in the editor. If the user hits backspace to remove that space, it is OK. BUT, if the user hits backspace one more time, it deletes the formatting. This is not a fix.

To fix it, you will need to set tiny to not verify html. Unfortunately, it will then not render great html. You cannot toggle the verification. I think this should change. We need to be able to inject content as style only. I will make a ticket.

https://github.com/tinymce/tinymce/issues/3126

Upvotes: 2

Related Questions