customizing the sharepoint 2013 rich text editor
Post on 24-Feb-2016
256 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related