How to insert raw html in a rich text content field on a page without using edit source from ribbon

Question

Using SharePoint 2013 on-prem.

I have created a page layout with a rich html field and was wondering if it was possible to insert raw html without using edit source from ribbon.

The way I have done it so far is by using the reusable content list. There I have a column that I have stored HTML snippets for reuse. What I am trying to do is to make a nicer experience for editors. Instead of using the Reusable Content dropdown list, I want to create a menu with clickable buttons that adds html in the page content field.

Answer 1

This is not that easy...

But you can get your ms_rte fields like this: $('.ms-rtestate-write') - hopefully you have only one on the page, otherwise you have to sort out which one you want to edit.

So to change the text displayed in the RichText Box use this code:

$('.ms-rtestate-write').innerHTML = '<p>Hello World</p>'

Be careful, as far as I know this works with the simple HTML fields, but I am not sure if this works as well with those that accept images as content.

Answer 2

I took a different approach (long time back in 2007)

Editors could add markup like $$TableOfContents$$ in texts

This kept the scripting logic separate from the page, so easier to edit/enhance.

A global script would replace those markers with my snippet like functionality, defined as functions.

E.g. the CSI.TableOfContents() function would extract all H1 and H2 HTML references from the page and create a clickable Table of Contents replacing the marker.

Nowadays I would use Angular Directives.