Beta | Overview of the Rich Text Editor

SKIP AHEAD TO: Use Spekit's Rich Text Editor  What are the key differences with the new editor? New Toolbar Functionality  Image Enhancements Embedding Content and iframes How to embed content with iframes? What happened to the Spek Business Process field? How to add an image to an indented list?  How to add a Gif?

 

Use Spekit's Rich Text Editor

We are launching our new Richt Text Editor. It will provide you with an improved Spek creation process and editing experience. Copying and pasting content from other sites should work seamlessly - formatting and numbered/unnumbered lists should be retained.

 

This is what the new toolbar will look like: 

 

What are the key differences with the new editor?

There is a couple of key differences with this new editor:

• New Toolbar Functionality 
• Image Enhancements
• Embedding Content and iframes

 

New Toolbar Functionality 

With the new Rich Text Editor toolbar, you will have the following available functions: 

1. Undo 
   • The Ctrl+Z shortcut will work
2. Font size (Paragraph/Header) 
3. Font style (Bold, Italics, Underline) 
   • Keyboard shortcuts will work here
4. Bulleted lists 
5. Numbered list 
6. Indent (out/in) 
   • Indent works for lists and non-lists.
   • Allowed in our RTE: The first line starts with the left-most option, the second line can go in 1 indent, the third line can go in another indent, and you can go back as many as you want.
   • Not allowed in our RTE: Starting with a list that's indented and indenting multiple times for the second line.
   • Click here to learn how to add an image to an indented list. 
7. Hyperlink 
8. Upload Files or Images 

 

Image Enhancements

We’ve introduced the ability to re-size and align images within the editor. It’s also now possible to add captions to images and hyperlink images to external URLs. 

 

Simply select the image after adding it to the Spek and you will see the image toolbar display with available functions.

1. Toggle Captions On 
   • You will be able to enter a caption on the image
2. Change Image Text Alternative  
3. Align Image Location (Left Align, Center Align, Right Align) 
4. Resize Image (Original Size, 75% Original Size, 50% Original Size) 
5. Link Image 
   • The Ctrl+K shortcut will work
6. Image Resizing Frame  
   • Select the image and resize it by clicking and dragging the purple box around the image💡 Pro Tip: If you click on the arrows in the Image Resizing Frame, you will be able to add space above or below the image. 

 

Embedding Content and iframes

For the supported web applications, users can simply paste the iframe code (<iframe>embed code</iframe>) directly into the editor, and the video or presentation content will automatically display. Spekit supports the following platforms:

• Google Drive / G-Suite
• Microsoft Stream
• Microsoft SharePoint
• Vidyard
• Wistia
• Box
• Loom
• YouTube
• Vimeo
• Spotify
• Scribe

NOTES:

• Wistia, Sharepoint, and MS Stream will require iframe code to be pasted. 
• GSuite embeds will require the published URL or iframe code to be pasted.
  • NOTE: To preview Google Drive/Gsuite documents, they must first be published on the web. Click here to learn how to make Google Drive/Gsuite documents public.
  Vidyard, Box, Loom, YouTube, Vimeo, Spotify, and Scribe support iframe code OR sharing URLs.
• The iframe embed URLs will mostly work from unsupported sources but may cause some issues.

 

How to embed content with iframes? 

1.) Open the video you would like to embed on a Spek. 

2.) Find the embed code. This can be found in different places depending on the website, we suggest looking at the share options. 

 

3.) Paste the code directly into the Spek. 

 

 

What happened to the Spek Business Process field? 

We have removed the Business process field from the Spek edit experience, so creators will no longer be able to add content in this separate field. 

• What if customers had content in this field in the past?
• Any content that was present in the Business process field has been migrated to the bottom of the Spek description (main) field, under a “business process” header.
• No content will be lost, and to an end viewer, the experience will effectively remain the same. 

 

How to add an image to an indented list? 

When you paste an image into a list, the bullet will go away. To add the image back into the list you will have to either re-indent the image or backspace the image into the list. 

 

Re-Indenting the Image

Once the image is uploaded below the list, click the bullet icons to add the image back to the list. 

 

Backspace the Image into the List

Once the image is uploaded below the list, follow these steps:

1.) Navigate to the space before the image.

2.) Click Backspace or Delete. 

3.) Click Enter.

This will add the image back to the list. 

 

 

How to add a Gif?

To add a Gif to a Spek, you will need to follow the following instructions. You will not be able to copy and paste animated Gifs at this time. 

1.) Download the Gif.

2.) Upload the Gif into the Spek by either:

• Uploading the Gif into the Spek

 

• Dragging and dropping the Gif into the Spek.