Big Changes for a Little Text Editor
Published
A de-cluttered writing area and some handy new tools for composing messages.
Today we rolled out a new and improved version of the rich text editor that you’ve been using for a variety of tasks in Faculty, Core, Academics, and other user interfaces. The text editor, known as TinyMCE, underwent a major facelift and gained some helpful tools that we think you’ll appreciate.
You’ve been using the text editor in contexts that require entering and formatting longer blocks of text, often in paragraph form. It’s like a simplified version of Microsoft Word or other word processing software, but made to fit in a small window in your web browser.
The first change you’ll notice is that the toolbar is less cluttered. Here’s what the old text editor looked like…
… and here’s what the new text editor looks like:
In order to simplify and declutter your writing space, some of the tools are initially hidden. You can find them by selecting the triple-dot (ellipsis) icon near the top right of the text input box. Rather than include a Spell Check button, the new version of TinyMCE relies on your web browser's built-in spell check tool. Check your browser's settings to make sure spell check is turned on.
Here’s what the expanded menu looks like, followed by an explanation of the tools on each row. (Please note that some pages do not enable all of the tools. Also, the number of icons per row may vary based on your screen and window width):
Here's everything in the top row going from left to right:
And now, the icons in the middle row from left to right:
The Table feature has a more intuitive interface than in previous versions of the text editor. Now, when you select the Table icon, you can drag your cursor over a grid to select the dimensions of your table, ranging from 1x1 to 10x10. Once you have inserted a table into the text box, table editing icons will appear.
Please let us know what you think of the new text editor features. Share tips and questions in the comments below.
That's going to do it for this week, but we do hope you find this update helpful going forward. Make sure to join us next week as we go over even more changes and updates coming to Competency Based Education for the Academics product. See you then!
You’ve been using the text editor in contexts that require entering and formatting longer blocks of text, often in paragraph form. It’s like a simplified version of Microsoft Word or other word processing software, but made to fit in a small window in your web browser.
The first change you’ll notice is that the toolbar is less cluttered. Here’s what the old text editor looked like…
… and here’s what the new text editor looks like:
In order to simplify and declutter your writing space, some of the tools are initially hidden. You can find them by selecting the triple-dot (ellipsis) icon near the top right of the text input box. Rather than include a Spell Check button, the new version of TinyMCE relies on your web browser's built-in spell check tool. Check your browser's settings to make sure spell check is turned on.
Here’s what the expanded menu looks like, followed by an explanation of the tools on each row. (Please note that some pages do not enable all of the tools. Also, the number of icons per row may vary based on your screen and window width):
Here's everything in the top row going from left to right:
- Source Code: View and edit the text using HTML. Select Cancel or Save to return to the normal text view.
- Find and replace: Search for word or phrase to replace in the message you are writing. Use the gear icon in this tool to fine-tune your search with the options Match case, Find whole words only, or Find in selection (this limits the search to text you have highlighted).
- Cut
- Copy
- Paste
- Paste as text: This option removes any formatting when you paste text from another document. (Please note that the two Paste buttons do not work in browsers that don’t support direct access to the copy-and-paste clipboard. Use Ctrl+V or Command+V on your keyboard instead.)
- Undo
- Redo
- Table: Inserts a customized table into your text. Read below for more details.
And now, the icons in the middle row from left to right:
- Bold
- Italic
- Underline
- Superscript
- Subscript
- Strikethrough
- Align left
- Align center
- Align right
- Justify
- Increase indent
- Decrease indent
- Numbered list
- Bullet list
- Special character: Opens a menu where you can select mathematical operators, currency symbols, and other characters to insert into the text.
- Insert/edit link: Highlight text before selecting this icon to create a hyperlink. Paste the URL of the desired link into the URL box, including the prefix https:// or http://
- Remove link
- Anchor: Inserts an anchor into the HTML code wherever the editor’s cursor is positioned. For more information about anchors, see this TinyMCE help topic or this W3Schools tutorial.
The Table feature has a more intuitive interface than in previous versions of the text editor. Now, when you select the Table icon, you can drag your cursor over a grid to select the dimensions of your table, ranging from 1x1 to 10x10. Once you have inserted a table into the text box, table editing icons will appear.
Please let us know what you think of the new text editor features. Share tips and questions in the comments below.
That's going to do it for this week, but we do hope you find this update helpful going forward. Make sure to join us next week as we go over even more changes and updates coming to Competency Based Education for the Academics product. See you then!
News
Blackbaud K-12 Solutions™ Blog
08/18/2020 1:02pm EDT
Leave a Comment
1. For tables, new column widths are suddenly appearing, and these contradict widths already coded in my templates.
2. Because a table properties pop up appears whenever I click into a table, I cannot actually see (and edit) some of the cells in the table.
3. Extra clicks are required to make formatting changes since you've made formatting buttons larger but then hidden half of them. I would rather a smaller but full menu.
4. When I am zoomed into a page to do better proofreading, I cannot scroll down the page anymore.
5. The HTML < > editor doesn't always load properly. I've had this problem a couple times over the last few days.
6. The Advanced CSS tab of the Style settings in very finicky.
Please consider the usability of these tools. It would be wonderful to see web best practices available.
Also, if you haven't already, definitely check out the Ideas section of this community where you can post your suggestions and feature requests. We've gotten a lot of great ideas from this in the past and it's definitely worth looking into.