how to apply sections within the tinymce editor - Extending Umbraco and using the API

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

blackhawk 313 posts 1368 karma points

Mar 24, 2017 @ 16:42

How to apply pre-defined sections within the TinyMCE editor

For my writers in Umbraco, I would love to give them a pre-defined section layout they can see in TInyMCE. How can I apply this to a rich text editor in Umbraco?

The HTML

<textarea><section>Section
    <p>Paragraph</p>
  </section>
  <article>Article
    <p>Paragraph</p>
  </article>
  <blockquote>Blockquote
    <p>Paragraph</p>
  </blockquote>
  <hgroup>
    <h1>Header 1</h1></hgroup>
  <aside>Section
    <p>Paragraph</p>
  </aside>
  <figure>Figure
    <figcaption>Figcaption</figcaption>
  </figure>
</textarea>

The JavaScript

tinymce.init({
  selector: 'textarea',
  height: 500,
  plugins: 'visualblocks',
  content_css: 'css/content.css',
  style_formats: [
    { title: 'Headers', items: [
      { title: 'h1', block: 'h1' },
      { title: 'h2', block: 'h2' },
      { title: 'h3', block: 'h3' },
      { title: 'h4', block: 'h4' },
      { title: 'h5', block: 'h5' },
      { title: 'h6', block: 'h6' }
    ] },

    { title: 'Blocks', items: [
      { title: 'p', block: 'p' },
      { title: 'div', block: 'div' },
      { title: 'pre', block: 'pre' }
    ] },

    { title: 'Containers', items: [
      { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
      { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
      { title: 'blockquote', block: 'blockquote', wrapper: true },
      { title: 'hgroup', block: 'hgroup', wrapper: true },
      { title: 'aside', block: 'aside', wrapper: true },
      { title: 'figure', block: 'figure', wrapper: true }
    ] }
  ],
  visualblocks_default_state: true,
  end_container_on_empty_block: true,
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css'
  ]
 });

I pulled the above code from the official TinyMCE site.

Thanks for any tips!

Copy Link

Kevin Jump 2346 posts 14894 karma points MVP 8x c-trib

Mar 24, 2017 @ 17:47
1
hi,

one way to achieve this is by setting the property value fro the rich text editor when the node is first created.

it's a bit detailed but the general process is :
1. Attach to the ContentService.Created* event
2. When the event fires set the values of the property
3. When the editor creates a node they will see the values you set
The trick is getting the values you want in number 2 - a good idea is to have a "template node" somewhere that you read in and use to set default values.

*according to the current documentation ContentService.Created events are not guaranteed to trigger everytime - but in my experience they work for the above example fine
Copy Link
blackhawk 313 posts 1368 karma points

Mar 24, 2017 @ 19:06

0

Thanks Kevin. I'm not that advanced yet with .cs and event based modifications, but I will definitely take these steps into consideration.

Copy Link
Shola 65 posts 273 karma points

Mar 24, 2017 @ 18:20

100

Use the TinyMCE template plugin for Umbraco.

http://www.wiliam.com.au/wiliam-blog/adding-enhanced-styling-to-the-umbraco-tinymce-editor

After you do the above, make sure all those tag types you have there are allowed in the TinymceConfig.config's < validElements > section.

Copy Link
blackhawk 313 posts 1368 karma points

Mar 28, 2017 @ 13:56

0

Shola thanks for bringing this solution up. It works for me. I can see this used as a template tool but also as a reusable HTML content tool as well.

Copy Link

Manish 373 posts 932 karma points

Mar 28, 2017 @ 13:18

Let me try to help you out

Here is my template-checkedList.html

<dl>
    <dt>Label 1 here</dt><dd>Text..</dd>
    <dt>Label 2</dt><dd>Text..</dd>
    <dt>Label 2</dt><dd>Text..</dd>
</dl>

Here is my templates-config.html

        [
    {"title": "Address", "description": "Address List", "url": "/App_Plugins

/TinyMceTemplates/template-checkedList.html" }
]

Let me know if you still have issue.

Manish

Copy Link

blackhawk 313 posts 1368 karma points

Mar 28, 2017 @ 13:55

0

You rock bro. Thank you so much for the clarifying the process.

Copy Link
is working on a reply...

Please Sign in or register to post replies