I'm a bit diving into a rabbit hole when it comes to implementing a rich text editor. Currently using react-quill, but want to implement a concept of template variables and/or allowing users to choose templates.
I know there is TinyMCE out there, but the self-hosted setup is very unstable and the cloud provided setup is not stable in the country I am residing. :(
I am pretty much looking into implementing something similar to this:
https://ambassify.github.io/tinymce-variable/
That would replace {{ mustache }} syntaxes with a bit more visual appealing element, that cant be edited but can be deleted.
So the thing I tried so far was using this as an example to insert Embed/blots in the QuillJS text editor. But this doesnt really insert things using mustache syntax, and also when a user chooses a whole template, then the variables are not being highlighted.
Example of a template a user could choose:
Hey {{ receiver.fullname }},
Some message here
Thanks!
{{user.first_name}}
{{user.company.name}}
How it shoud look like:
The user has the option to edit the template they chose, and after clicking on send. Taking the same template they edited (with the variables) to the next email window.
So my question here is, does anyone have a recommendation on how to accomplish this and which wysiwyg-editor might offer the right solution for this (besides TinyMCE)?
I recommend you to use tiptap framework.
This is an headless wysiwyg that gives you full control on the editor.
They provide a simple extension system which could perfectly match your need.
React Mentions does this very nicely IMO. You can use markup and displayTransform attributes to transform the entry into a tag like structure. Also the data attribute will let you define the available selections.
Related
I'm working on a couple of features for a project that I created a few months back when I was first learning React. I wanted to add a wysiwyg editor to one of my forms so that a user could have more control with the "about" section of an event page (i.e. embed media and images, html source code editing, font formatting, etc.)
The editor that I'm using is TinyMCE 5.0.
This project is a Rails backend and React frontend. (I'm not using Redux - this project was a way to practice React when I first learning it.)
You can find my last commit here if you would like to see my code
The Problem
I'm able to get the wysiwyg editor rendered. I can also type and format text inside the editor's body. When I click on the code icon or image embed icon (like in the gif below), a new modal appears but when I click into it to type, the text cursor appears and then disappears. So I can't type and it seems that the text area and fields become inactive (for lack of a better term - I'm still somewhat in the beginning of my coding journey.)
I just signed up and TinyMCE gives access to premium plugins as well, so I don't think it's an issue with my account permissions/subscription.
I'm also not receiving anything in the console but if there's any help you can provide, it would be appreciated!
Thanks!
TinyMCE 5 editor - text cursor issue - text areas become inactice
It is highly likely that the library you are using for your modal (that contains TinyMCE) is not allowing focus to go elsewhere. As you have not stated the library you use for your modal I can't tell you anything about how to address this but we know this is an issue with common libraries like Bootstrap:
https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog
Whatever you are using should have a similar ability.
What is the best approach to make an SPA (AngularJS) Accessible (for screen readers etc)?
I have little to no experience with the aria specification, and I wonder if it will at all work on a single page application.
What are the common pitfalls when developing?
How do one debug and test the accessibility when developing?
This could cover a broad swath of issues here. So I'll go through some of the basics in the hopes that it starts you on your way, the common pitfalls, as it were.
Firstly, like the commenters said, yes, you need to make sure ARIA tags are employed correctly. So, say, if you wanted to expose a div as a button, you'd have something like this.
<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div>
This button when selected by a screen reader will be called "super flashy button", so you don't need to put button in your aria-label attribute. There are more complex examples out there, but that illustrates the basics of it, pretty much. Role, aria-label and tabindex will be the most prevalent ARIA attributes you see.
Tab-indexing elements that you want screen reader users to click on is vital to this. Set tabindex to 0 to include it in its default location on the document. If you don't want it to necessarily normally be reached by people using keyboard navigation, set it to -1. This means it's out of the normal tab order, but can still be navigated to if you want to put the user's focus there manually through javascript/jquery .focus().
As mentioned, sometimes you can assist keyboard navigators/screen reader users by moving their focus for them. An example would be if they click a button and a menu appears. You could do something like this to put them on the first link of the menu:
$('#linkmenuactivator').on("click", function () {
$('#linkmenu').find('li:first a').focus();
});
I know that's in JQuery, I'm not familiar with AngularJS but my brief view makes me think it's more of a ViewModel controller as opposed to something UI specific like JQuery, but correct me if I'm wrong.
Live regions can be used if you're doing funky things on screen that will make no sense to a screen reader user. You can write text to the elements in these regions to put the information out textually. The easiest way to do this is to use a role of alert or status, for important messages or generic status updates respectively. These roles make your element a live region by default, and any text changes in there will be reported to the screen reader. So a quick example would look something like this:
<p id="ariastatusbox" ... role="status"></p>
Then later in JQuery (taking the example of you loading a document and fading it in when you've got it):
$('#maincontent').fadeIn(function () {
$('#ariastatusbox').text('Document loaded');
});
This will let the screen reader know that the document is loaded and ready to be read on screen. Live regions can be slightly tricky, but they're a powerful beasty if you can master them.
Finally, as to accessibility testing, there's a few options. Something I recently stumbled across is Wave which appears to be an online testing tool. It looks good from a first glance, you could give it a try. Another option is to grab a screen reader yourself and give it a go. I recommend NVDA which is an open-source (so therefore free) screen reader. It's my screen reader of choice and is pretty damn good. The synthesiser it comes bundled with doesn't have the nicest voice, but there are other options, or you could turn off the speech output and view a textual display of what it would be saying using the Speech Viewer. A final option is to ask for accessibility testers to take your app for a test drive. For consumer products or things in those brackets, blind people and other users of accessible tech may well volunteer to do it if asked. For more business oriented apps that you might not want out in a public forum, there are several organisations that can consult on issues of making web applications accessible.
This is by no means a comprehensive manual on accessibility, I was hoping to really kickstart you in the right direction. For a bit of a deeper look, try looking at the ARIA roles documentation (all of it will help but the code is under the definitions heading), and on from that the ARIA States and Properties documentation. They both can be a little dry, but also have the full list of everything you can use ARIA wise. Google should be able to yield some tutorials, too, I hope.
I hope this helps get you started. Good luck!
This is a hard question to search for as "help" and "documentation" generates a lot of false hits. I basically want to show some simple documentation or help in my Silverlight app. And I don't want to write this in XAML, obviously, so I would love to be able to add a WordPad (or similar, free and easy) document to my app that would get display with some basic formatting in Silverlight.
Any ideas?
Try embedding an iframe using an iframe overlay, then you can load any HTML-like content.
There is an excellent explanation of how to do this here:
http://www.wintellect.com/cs/blogs/jlikness/archive/2010/09/19/hosting-html-in-silverlight-not-out-of-browser.aspx
A while ago I created a drag-over check box list which allows you to check many check boxes in a single gesture. Do you think it is viable and usable on the web where people might not know how to use it. The default behaviour still works for the individual check boxes.
1 - The idea
The idea is nice and can probably be used in professional applications where you have direct contact with users and can explain them how things work, but not necessarily on public websites where users don't want to RTFM and are just looking for familiar behaviours. Unless it was just a sample exercise or a control meant to be included it in a control pack, it violates the YAGNI principle ;)
2 - The implementation
You certainly noticed that the implementation is buggy (at least on IE7 and FF3.1B2). Sometimes, a gesture above all checkboxes will select all of them but one or two. Moving the mouse over the div's above or below the list will stop the drag (I know it's a "feature", but it's not very user friendly). I Checked the source code and to be honnest, while it looks pretty neat, I just didn't want to deal with it because it is plain javascript. Don't you know that...
3 - Possible improvements
...you can write less and do more with a javascript library, typically jQuery. I would completely rewrite this control as a jQuery plugin. It will provide you with a lot of tools to make your code much easier to write, maintain and extend. Just try it, you'll love it. This is from a technical point of view. From a user point of view, try to make you control as familiar as possible, like what Angela suggested, windows explorer : a nice selection rectangle, the ability to use shit + click, or something like that. Finally, remember that for many windows checklistbox users, "selected" and "checked" are two different things.
The demo definitely needs a few enhancements to make it even a little bit useful (although I am not sure if it would be enough):
Allow the dragging to start somewhere that is not a check box.
Allow selection by dragging over the labels as well.
This problem seems similar to the action of selecting multiple files in a file explorer like Windows Explorer. Maybe it can work like the action of selecting multiple files by dragging a rectangle shape around the items to be selected (select one corner, drag to the other corner)? This has the advantage of being similar to an interface element that people may already be familiar with.
For some reason I can't open your link (it says my ip address was blocked). But I think what you're looking for is what I already did in jquery, I uploaded a plugin which I basically ported from crossbrowser.com's dragcheck functionality, it was to be found at http://plugins.jquery.com/project/dragCheck but currently the jquery plugin site is being revamped and my plugin has disappeared. I'm trying to see if they're going to put it back up or if I have to create a new project again...
Anyways until we get that worked out you can see a demo here: http://jsbin.com/ibihi
I've searched around for a while today, but I haven't been able to come up with an AutoComplete TextBox code sample for Silverlight 2 Beta 2. The most promising reference was found on nikhilk.net but the online demo doesn't currently render and after downloading a getting the code to compile with Beta 2, I couldn't get the Silverlight plugin it to render either. I think it is fair to say it is a compatibility issue, but I'm not sure. Does anyone have any alternate sample code or implementation suggestions?
You may want to take a look at my blog: http://weblogs.manas.com.ar/ary/2008/09/26/autocomplete-in-silverlight/
You simply write in your XAML:
manas:Autocomplete.Suggest="DoSuggest"
and then in the class file, you need to implement that method, which report suggestions to a delegate. The options can be hardcoded, requested to a web service, or whaterver.
Take a look at the combobox(very close to a autocomplete text box) at worksight's blog Silverlight ComboBox
There is also another good example here:
http://silvermail.com.au
This is a Silverlight based mail client that looks a little like Outlook. When I go to send mail and start typing in the "To" text box, an auto-complete pops up and populates the control for me based on values in a list... I think it automatically stores the addresses in isolated storage, but that's just a guess.
This is a really handy tool for checking mail while away from my home PC... at work for example... and it is loaded with impressive Silverlight functionality.
S.