Table of Contents
Background
We recently made release 23.06 GA, which included a new text/content editor to replace the old one. This change was made in response to numerous customer requests for improved editor functionality, which couldn't be achieved with the old version.
Impacted features
The following features in Simpplr have been migrated to the new text editor:
- Feed post editor
- Blog post editor
- Page editor
- Event editor
- Comments editor
- Send notification editor
- Must read editor
- Share content to feed editor
Existing content
The legacy editor (WYSIWYG) will still be used for all previously published content. For all newly created content, the improved editor will be used.
Editor options
The following aspects of the editor remain unchanged:
- Paragraph format
- Paragraph style
- Text styles
- Align
- Indent
- List
- Images
- Videos
- Tables
- Links
- Horizontal lines
- Emoji & Clear formatting
With this new editor, we've made some changes to the functionality that users were used to, but rest assured, everything that was supported before is still supported. Please see the list of new key features and what is made available with this new editor
Key features
Inline images/videos and floating text
The new editor lets you include floating text and inline images around an image.
Invisible and dashed borders for tables
For tables, you can now choose to add dashed borders or invisible borders.
Note:
Use the down arrow key or any other key to move the cursor focus away from the table.Embed via URL
In the text editor, you can embed the following types of URLs:
-
Links: These URLs are public facing and do not need any form of logging in to view (for example https://www.simpplr.com/blog/). Click the link icon to insert a hyperlink. The Text field will be what the user sees, then the Link field is where you'll insert the link. Note that you're able to add both mailto and tel tags to your links.
- Google Forms/Docs/Sheets/Slides: These documents can be embedded by both URLs and iframes after publishing. Users need to be logged in to the source location in order to embed and view these documents in Simpplr.
- Microsoft Docs/Slides/Sheets: These documents can be embedded by iframes only.
- Video: Videos from popular video sharing platforms like Youtube and Vimeo (e.g. https://vimeo.com/524933864) can be embedded using their URL.
- Images: Most publicly accessible images can be embedded via URL.
Note:
While the majority of public URLs can be embedded, some exceptions do exist. The following error message will be displayed if a public URL cannot be embedded:The provided URL cannot be embedded.
Embed via iframes
The majority of embeddable resources offer embeddable iframes, including Google Forms, Sheets, Docs, Vimeo, YouTube, and Codepen. By including the iframe embed code in the code tab, you can embed them.
Note:
Google Docs can only be accessed while the user is signed into their Google account in the active browser session, or they’ll see the following error message. You'll also want to make sure your browser is allowing access to 3rd party cookies:
Once the user has logged in, the embedded form will display properly:
Custom HTML
What has changed?
The code view option is no longer available in the new editor. As a result, you can no longer switch between the native body of your page's content and its code view.
How do I add HTML code?
Feel free to watch this and the rest of the videos at 1.5x speed!
Using the Embed code feature (also known as the embed block), all HTML tags supported by the legacy editor can be added.
- Custom HTML code can be embedded using the code tab in the embed block. The inline style attribute allows for styling.
- There are no changes to the HTML tags that were supported in the legacy code view.
- <script>, <head>, and <HTML> tags are sanitized to avoid security risks. iframe srcdoc attributes are removed from the code editor as well.
Custom HTML - Best practices
- Content added via embed block is always mutually exclusive from the content added via the content editor, meaning they’re read as two different entities.
- When a user adds content using an embed block, that content can only be changed using the embed block.
- Copying and pasting all text into the embed block and making changes there is best practice when you want to customize the code for your content.
- Inside the embed block, we cannot add any features by using editor. In the embed code block, for instance, we won't be able to drag and drop or upload an image. Instead, we must edit the embed block and add any image as an HTML tag.
- Use the down arrow key on your keyboard or click outside the embed block to exit and access the editor.
- If the embed block is at the top of the page's body and you want to move it down, use the down arrow or enter keys in the editor to select it.
- To prevent security issues, javascript is not permitted in this.
Examples
Custom HTML
Table code:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
</table>
Output:
Collapsible text
Here is an example of HTML to add collapsible content. Copy and paste the code below into your own content, then fill in the text with your own summary and details.
<h2>Collapsible Text. Add Your Title Here</h2> <p>Click each topic to expand the section. Add your summary here</p>
<details> <summary>
<h3 style=”cursor:pointer”>Open Section 1</h3>
</summary> <p>Details here</p> </details> <details> <summary>
<h3 style=”cursor:pointer”>Open Section 2</h3>
</summary> <p>Details here</p> </details> <details> <summary>
<h3 style=”cursor:pointer”>Open Section 3</h3>
</summary> <p>Details here</p>
</details>
Output will look like this:
Collapsed:
Expanded:
Anchoring
We must add the particular block via embed, then an id to it in order to anchor to a specific section of the content.
- Using the embed block, add a destination heading or paragraph.
- The heading or paragraph should have an HTML id (see image below).
- Add a link using the link option in the editor and URL as #id of the paragraph or heading.
Buttons
Use the sample HTML below to add buttons. Adjust the colors in the code as needed (i.e., replace #4CAF50 with Red or any hex code for your company's branding if you want to change the background color).
<button style="color:white;border:1px solid green;padding:15px 32px;text-align:center;font-size:16px;margin:4px 2px;cursor:pointer;background-color:#4CAF50;text-decoration:none;display:inline-block">Green</button>
<button style="color:white;border:1px solid green;padding:15px 32px;text-align:center;font-size:16px;margin:4px 2px;cursor:pointer;background-color:#008CBA;text-decoration:none;display:inline-block">Blue</button>
Output will look like this:
Phone number
Use the sample HTML to add a link to dial a phone number:
<p><a href="tel:+15551234567"> ☎ (555)-123-4567</a></p>
Output will look like this:
Page templates
When using a similar content layout across multiple pages with more HTML editing features, we now offer the use of Page templates. Page templates are a quick start way to create your page with the layout you want, including any custom HTML code, that you can then edit to get the final outcome. When using a template, users can only need to update and add their own content for the pre-existing template’s text to achieve the desired outcome.
Page templates are created by Site owners or managers and can be used by all site’s contributors.
For example, the page template below captures an example of a communication that could be used and updated with the relevant data when needed:
Here’s another example for a page template using tables and custom embed HTML code:
When creating a page, select the page template option and the template you want to get a quick start.
FAQ
Q: Why are we using the new editor?
A: We're switching to a newer editor that enables us to add more features and functions in response to the growing demand for more editor functionality. Simply put, the previous editor did not support any extensibility.
Q: Will this change impact the old content or content that was published?
A: No. Only new content is being impacted by the new editor. The old editor can still be used to edit previously published content.
Q: Is there a way to go back to the old editor?
A: No, the old editor will not support newly created content in this editor.
Q: In which interfaces will we be seeing this new editor?
A: All new content (page, events, blogs), feed posts, reply feed posts, comments on content, send notification, must read and share content to feed editors.
Q: What happens to draft content?
A: Prior to this change, the old editor will continue to be used for all unpublished (draft) content.
Q: Does the new editor support HTML preview of the entire content?
A: The new editor cannot display the content's HTML preview.
Q: How do I add custom HTML in the editor without having the HTML preview?
A: The Embed feature in the editor will allow you to add custom HTML in the editor. Click the three dots (More) > Embed > Code tab.
Q: Can we use the WYSIWYG editor (regular page body editor) features in an embed HTML block?
A: No, an embedded block is always mutually exclusive from the WYSIWYG editor. To add/edit anything within the embed block, we need to edit the embed block and update the HTML.
Q: How can we style embed HTML elements?
A: Embed HTML will allow the use of inline style properties.
Q: Can we use script tags inside embed HTML?
A: No, script injection by embed is not allowed as that can introduce security risks. This is the same behavior we had in the legacy editor.
Q: How can we adjust spacing between content blocks without HTML preview?
A: All HTML blocks should show appropriate spacing in between, we cannot change the spacing manually as there is no HTML preview available.
Known issues
| S. No. | Description |
| 1 | List formatting not retained when content is copy pasted from MS Word |
| 2 | Table cell borders are not draggable |
| 3 | More space with the image and next text line in list |
Roadmap
We intend to release the following features as editor improvements. For upcoming release dates, check out this article.
| Features | Target release |
| Anchoring | 23.09 |
| Accordion (Expand/Collapse text) | 23.09 |
| Hyperlinks in feed | 23.09 |
| Improvements in tables - border colors, alternate row colors, font size | 23.11 |
| Font size option in editor | 23.12 |
| Ability to quickly reference and source Simpplr content, when inserting a link | 23.12 |
| Ability to add columns | 23.12 |
| Copy from MS Words styling | 23.12 |
| Ability to add a code block and inline code | 23.11 |
| Ability to link up to a public image library, Unsplash | 23.11 |
| Ability to add TOCs | 23.12 |
| Add Custom Emoji | 23.12 |
| Keyboard Shortcuts | 23.12 |
| Content editing - Collaboration | 24.H1 |
| Drag and drop blocks in editor | 24.H2 |
Comments
Can you add paragraph spacing and formatting settings to your update timeline? I know you said it's in the known issues, but having its own editing settings like in Microsoft products would make everything so much better.
What is this supposed to be?
Hi Lori. I'm no HTML expert, but I found this forum online. To summarize, this appears to be an inconsequential formatting unicode that results from copying and pasting into a browser window from a separate source. You can simply remove it from your code, but it doesn't affect any functionality.
Sorry, Matthew. I should have been more specific.
That screencap is what I see when I look at this help page.... so there is something on this help page that isn't presenting/translating on all browsers etc.
If you check above you should be able to see where I pulled this from. FYI I am viewing this page in Chrome.
Oh interesting! I'm also on chrome and do not see that. I don't know if it's a browser setting or not. Can you clear your cache in the browser, and also use a different browser like Firefox or Safari to look at this article and see if you still see that unicode?
In Edge it shows as a blank space. After clearing cache in Chrome it still shows like the screencap.
Lori
Sorry to hear. If you copy and paste that code to a piece of content, or secondary location, does that get carried over?
Hi Matthew -
I've inserted the code for collapsible text and it looks good, but when the page is updated and live the default view is for each heading to be expanded instead of collapsed. Is there a way to fix that?
Thanks
Hi Michael. Sorry to hear. Just to confirm, you're closing the </details> tag after your content, correct? If you want to leave another comment with the code you're using, I'm happy to take a look. You can replace the actual text of your content with gibberish if it shouldn't be shared.
Previously, we've linked to images and copy using the mailto: tag, along with some additional code to populate the email body and subject line with specific text. The new editor no longer seems to allow this. Is that a known issue?
Example:
mailto:example@test.com?subject=Suggestion&body=Please include the following details about your suggestions:
Hi Anna. I'm not sure I completely understand the task you were completing before. Would you mind adding more details about the ask? I can say that mailto and tel tags ARE supported when hyperlinking.
Please sign in to leave a comment.