Sign in Register
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
    blackhawk
    0

    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 2348 posts 14896 karma points MVP 8x c-trib
    Mar 24, 2017 @ 17:47
    Kevin Jump
    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
    blackhawk
    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
    Shola
    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
    blackhawk
    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
    Manish
    1

    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
    blackhawk
    0

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

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies