Customizing the SharePoint 2013 Rich Text Editor
description
Transcript of Customizing the SharePoint 2013 Rich Text Editor
Customizing the SharePoint 2013 Rich Text Editor
Wouter van VugtSharePoint 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
DEMOCreating 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
DEMOEmbeddings
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
DEMOLoading 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
DEMOCanvas 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();
DEMOInserting text and takin
snapshots
DEMOModifying hyperlinks
Internals• Scripts are obfuscated
• SCRIPTS ARE OBFUSCATED!!!
DEMORetargeting paste
Advanced stuff• Showing context menus
• Creating page state handlers
• Filtering HTML using CSS classes
THANK YOU