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.
Image accessibility
In regard to images, please also note that inline images, as well as cover images, can have alt text added for accessibility. When adding an image, you'll see the option to add alt text. While users can’t directly see the alt text rendered in the UI, assistive technology like screen readers (e.g., JAWS, NVDA, VoiceOver) will read out the alt text to users who cannot see the image. This is the primary way alt text is accessed for accessibility purposes.
Cover image alt text
Content image alt text
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:
Accordions and collapsible text
As of the 24.01 release, users can add accordions to their text with the click of a button. This is also known as expanding/collapsing text, and is particularly useful on longer documents.
To add new collapsable text, from the text editor, find the Accordion icon and select. Here you'll see where to insert the title, or the heading, followed by a space to insert the text that will actually expand and collapse. Once input, simply hit the down arrow key to move the cursor to the next line to continue writing.
You can insert images and videos within your accordion as well. Within the lines of the accordion, just enter any component you'd like. Formatting options on the image or video will work the same as always.
Anchor links
An anchor tag, or anchor link, links to another location on the same page. They are typically used for long or text-heavy pages so that visitors can jump to a specific part of the page without having to scroll as much.
-
When there is a heading is added in the content, on focus of the heading the copy link option will be shown
-
This link can be copied and used as to anchor to this location from anywhere in the content
To add an anchor link:
- Scroll to the right side of the content body to open the 'Copy link to heading' modal. Click.
- Open the Link icon at the top of the editor. In the Text field, put the text that will display when users click the anchor link. In the Link filed, paste what you just copied from step 1. Click Update.
Whenever a header is deleted after being used as a anchor link, the link will also be automatically removed.
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:
Using custom HTML to insert expandable/collapsable text
If you don't want to use Simpplr's built-in accordion feature, you can still insert your own custom HTML for accordions, and format these any way you'd like that's acceptable within the HTML parameters.
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:
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 |
| 2 | Table cell borders are not draggable |
| 3 | More space with the image and next text line in list |
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.
Can you reorder the releases section so that they are grouped by target release version? In the current order, it is confusing to tell which features are scheduled for 23.11 or 23.12 since they are all mixed up.
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.
Previously, we hyperlinked a mailto: tag to images embedded in the body of a page. That does not appear to be supported anymore. It looks like l can only hyperlink a web URL to an image.
We also used mailto: tags plus extra code that auto filled information into the email body and subject line for those who clicked on it. That does not seem to be supported in any way in the new editor. We use this is several places across our system so employees know what details to fill out when sending an email about a particular topic to a broad inbox.
You can see an example of that in my previous comment. In my example, the subject line would be filled in as "Suggestion" and the body would be auto-filled with "Please include the following details about your suggestions:".
Hey Anna. I spoke with the Product Manager on this, and she asked if you could reach out to your CSM or our Support team on this. If you mention Sushree (she's the Product Manager), we can get you some better help on resolving this issue.
We are using the Quote full paragraph style on a page and the quote looks like this:
“This is the dream you say out loud that you never expect to happen…now we’re living our dream! – Amanda Olaghere, Jimi’s wife"
We want the close quote to be after "..living our dream!" not where it is. Is it possible to fix this in code view?
Thanks!
Hi Michael. I made a quick video that shows one potential solution to your problem. Let me know if this helps or not.
Styling Quotes in Content
I am looking for the schedule of when the Known Issues are going to be addressed. I asked the chatbot and it sent me here but I don't see it on this page.
I am particularly interested in when the list copying will be fixed.
Also, I know the table cell drag thing was fixed somewhat, but it is still wonky. Are there more improvements coming?
I would also like to request that there isn't a built-in space around the HTML element when you use it. Or a way for us to adjust that padding. Use case - I used it for a floating table so I could have a callout with line breaks. I had to add the wrap text in the HTML box too... but now there is spacing above and below that which makes anything in that box not flow like the rest of the text. My other option would be to put the WHOLE page in HTML, but I don't want to spend the time to do that.
(another option for this would be to make it so you can do line breaks and lists in the callout box)
Thanks
Hi Lori. Thanks for the feedback. I'm going to have your CSM Andrea reach out to get more information. Feel free to post a visual here, but in a case like this, it's difficult to understand the issue without really seeing it. I spoke with a member of my Product team around this, and he needs to see an example before taking any action.
For your other question around text formatting, this is on the roadmap to be fixed in the upcoming 24.01 release.
Please sign in to leave a comment.