1 / 23

Customizing the SharePoint 2013 Rich Text Editor

Wouter van Vugt SharePoint Fellow. Customizing the SharePoint 2013 Rich Text Editor . 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.

yelena
Download Presentation

Customizing the SharePoint 2013 Rich Text Editor

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 • 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

More Related