Customizing the SharePoint 2013 Rich Text Editor.
-
Upload
alfred-reynolds -
Category
Documents
-
view
238 -
download
0
Transcript of Customizing the SharePoint 2013 Rich Text Editor.
![Page 1: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/1.jpg)
Customizing the SharePoint 2013 Rich Text Editor
Wouter van Vugt
SharePoint Fellow
![Page 2: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/2.jpg)
Agenda• The basics of a rich text editor• Loading customizations for the RTE• Basics of the eventing model• Simple text insertion• Advanced customizations
![Page 3: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/3.jpg)
The basics of a rich text editor
![Page 4: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/4.jpg)
DEMO
Creating a basic editor
![Page 5: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/5.jpg)
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)
![Page 6: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/6.jpg)
Features of the RTE• Ribbon integration• Wiki linking / Autocompletion• Web Parts• HTML 5 elements• Data attributes (data-....)• Page layouts• Advanced Paste• Undo
![Page 7: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/7.jpg)
Non-features of the RTEYou cannot do:• Embedding script, safe against XSS• Object tagsBut you can do:• Embeddings
![Page 8: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/8.jpg)
What does publishing add• Asset picking• Reusable content• Image renditions
![Page 9: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/9.jpg)
DEMO
Embeddings
![Page 10: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/10.jpg)
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
![Page 11: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/11.jpg)
DEMO
Loading up RTE scripts
![Page 12: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/12.jpg)
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
![Page 13: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/13.jpg)
DEMO
Canvas Events
![Page 14: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/14.jpg)
Simple text insertion• Find the current region
• Take snapshots
• Insert content
![Page 15: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/15.jpg)
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();
![Page 16: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/16.jpg)
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));
![Page 17: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/17.jpg)
Taking snapshotsThe SnapShotManager• Takes snapshots• Undo• RedoRTE.SnapshotManager.takeSnapshot();RTE.SnapshotManager.undo();RTE.SnapshotManager.redo();
![Page 18: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/18.jpg)
DEMO
Inserting text and takin snapshots
![Page 19: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/19.jpg)
DEMO
Modifying hyperlinks
![Page 20: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/20.jpg)
Internals• Scripts are obfuscated
• SCRIPTS ARE OBFUSCATED!!!
![Page 21: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/21.jpg)
DEMO
Retargeting paste
![Page 22: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/22.jpg)
Advanced stuff• Showing context menus
• Creating page state handlers
• Filtering HTML using CSS classes
![Page 23: Customizing the SharePoint 2013 Rich Text Editor.](https://reader035.fdocuments.us/reader035/viewer/2022081501/56649dd95503460f94ace038/html5/thumbnails/23.jpg)
THANK YOU