Customizing the SharePoint 2013 Rich Text Editor

Wouter van Vugt

SharePoint Fellow

Agenda• The basics of a rich text editor• Loading customizations for the RTE• Basics of the eventing model• Simple text insertion• Advanced customizations

The basics of a rich text editor

DEMO

Creating a basic editor

The SharePoint Rich Text Editor• Normal contenteditable div• Integrated into Ribbon• Available in Foundation

− Note field (Blog, wiki etc)− Content Editor Web Part

• Driven by loads of JavaScript− SP.UI.RTE.js (27118 lines)− SP.UI.RTE.Publishing.js (1554 lines)− SP.UI.SpellCheck.js (1286 lines)

Features of the RTE• Ribbon integration• Wiki linking / Autocompletion• Web Parts• HTML 5 elements• Data attributes (data-....)• Page layouts• Advanced Paste• Undo

Non-features of the RTEYou cannot do:• Embedding script, safe against XSS• Object tagsBut you can do:• Embeddings

What does publishing add• Asset picking• Reusable content• Image renditions

DEMO

Embeddings

Loading up RTE scripts• Characteristics

− Load when editing− Load on demand− Load after SP.UI.RTE.js− Load when there are RTE fields

• Full trust− Server side control

• App approaches− Register User Custom Action on hostweb− <CustomAction Location=“ScriptLink” />

• Always− Load through SP.SOD code

DEMO

Loading up RTE scripts

Rich Text EventsThe RTE provides a rich event model• DOM Events• RTE Events

− Focus (Region, Image, Atomic, Link, Table)− Blur (Region, Image, Atomic, Link, Table)− Change, Element Added

Hooked up through RTE.CanvasEvents

DEMO

Canvas Events

Simple text insertion• Find the current region

• Take snapshots

• Insert content

Finding the current location• Use the Canvas to get regions• Use the Cursor to get elements• Use the Selection to get the, eh, selectionRTE.Canvas.getEditableRegion(element);

RTE.Canvas.currentEditableRegion();

RTE.Cursor.getCurrentElement();

RTE.Cursor.get_range();

RTE.Selection.getSelection();

RTE.Selection.getSelectionRange();

Using Ranges• Start / end markers denote range• Allows

− Wrapping− Content detection− Expansion− Navigation− Modification

var range = RTE.Cursor.get_range();var text = range.get_innerText();range.clear();var paragraph = document.createElement(RTE.HtmlTagName.p);paragraph.innerText = "Hi There";range.insertNode(paragraph)range.WrapRange(document.createElement(RTE.HtmlTagName.DIV));

Taking snapshotsThe SnapShotManager• Takes snapshots• Undo• RedoRTE.SnapshotManager.takeSnapshot();RTE.SnapshotManager.undo();RTE.SnapshotManager.redo();

DEMO

Inserting text and takin snapshots

DEMO

Modifying hyperlinks

Internals• Scripts are obfuscated

• SCRIPTS ARE OBFUSCATED!!!

DEMO

Retargeting paste

Advanced stuff• Showing context menus

• Creating page state handlers

• Filtering HTML using CSS classes

THANK YOU