1. Customizing the SharePoint 2013 Rich Text Editor
Wouter van Vugt
SharePoint Fellow
Customizing the SharePoint 2013 Rich Text Editor

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

3. The basics of a rich text editor

4. Creating a basic editor

5. 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)

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

7. Non-features of the RTE
You cannot do:
Embedding script, safe against XSS
Object tags
But you can do:
Embeddings

8. What does publishing add
Asset picking
Reusable content
Image renditions

9. Embeddings

10. Loading up RTE scripts Characteristics Full trust App approaches
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

11. Loading up RTE scripts

12. Rich Text Events The 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

13. Canvas Events

14. Simple text insertion Find the current region Take snapshots
Insert content

15. Finding the current location
Use the Canvas to get regions
Use the Cursor to get elements
Use the Selection to get the, eh, selection
RTE.Canvas.getEditableRegion(element);
RTE.Canvas.currentEditableRegion();
RTE.Cursor.getCurrentElement();
RTE.Cursor.get_range();
RTE.Selection.getSelection();
RTE.Selection.getSelectionRange();

16. 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));

17. Taking snapshots The SnapShotManager Takes snapshots Undo Redo
RTE.SnapshotManager.takeSnapshot();
RTE.SnapshotManager.undo();
RTE.SnapshotManager.redo();

18. Inserting text and takin snapshots

19. Modifying hyperlinks

20. Internals
Scripts are obfuscated
SCRIPTS ARE OBFUSCATED!!!

21. Retargeting paste

22. Advanced stuff Showing context menus Creating page state handlers
Filtering HTML using CSS classes