Special Characters Menu in Wagtail Editor - javascript

I am trying to add a menu of special characters in the wagtail editor so that users can add a menu of selected special characters to the content. What is the best way to do this? I can't find any plugins on this page either: https://wagtail.io/packages/.

Here is the official documentation on how to extend the Draftail editor. I would love to have these special characters as a standard feature, though! Following the documentation it is possible to add buttons for entities.

Related

ace-editor code highlight object notation

Using the Ace Editor pre-packaged version and trying to add some basic code highlighting (custom keywords) to the Ace JavaScript editor.
Please do not read too much into the example, it is purely an example to avoid posting sensitive data.
Keywords example: added to the keywordMapper:
"options": "settings|options|global|user";
And added some css to the page that uses it:
.ace-eclipse .ace_options {\
color: rgb(255,20,147);\
}\
I figured it would just highlight the keywrods so i can get this (without highlighting the dots):
But nothing I've tried works. I can only get the first (pre dot: '.') word to match. ".settings" wont match (you'd think it would).
The idea is that i'll implement auto complete based on the previous token, e.g. type "settings." to get a list containing "options" (and other stuff), click options and enter "." to get a list containing "global|user", another "." to show all the settings in each respective object.
I've experimented a little using the rules, but that is confusing enough, and the closest i can get is it working WITH dots being highlighted.
Any assistance is appreciated.
P.s. Had a go at the <![CDATA[ example on the ace main site and couldn't even get the code they post to work.
Its so confusing and there's hardly any documentation! I cant help but think it cant be that hard, as there are a ton of "real world users" on their site.
Thanks.
keywordMapper is only for keywords and top level identifiers. All the properties after dot are handled in https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/mode/javascript_highlight_rules.js#L210.
so you should add another rule before it like:
{
token : "options",
regex : "settings|options|global|user"
},
You can use https://ace.c9.io/tool/mode_creator.html to experiment with the highlighter
But for autocompletion you don't really need to highlight tokens, you can just use their values, instead of types.

Ace Editor: Add custom keywords to Markdown mode

I want to use some custom keywords in Markdown mode that should be highlighted by Ace. For example, I need to tell Ace that it should colorize
keywords like TODO,
regexps like /COMMENT\.+$/ or $1 in /^list: \[(.+)\]/,
the YAML header (which is not considered by Ace)
However, the file src/mode-markdown.js looks aweful and http://ace.c9.io/#nav=higlighter reads too general to me. Is there a comprehensive way to implement it?
I am looking into this myself, one thing I've done is created a custom mode-mymode.js and hacked at it to add in the keywords and items I wanted to colorize. But I'm in agreement it's an awful looking file.
On the page http://ace.c9.io/#nav=higlighter - they do offer the mode creator, but if you go way down the page.. i think what you are looking for is the subsection on "Extending Highlighters"
The concept of this section is that you basically "add-on" to an existing highlight rule, which should take care of what you are looking to do.

clickable symbols to insert

I have a site where users can type posts. I want to add an some simple buttons on the side of the site that insert different symbols. The symbols dont need to be crazy like the windings font but just some basic math symbols. Also, how could I add the ability to highlight and make a selection a subscript (like Microsoft word)? Thanks.
You should consider using TinyMCE or CKEditor for your textarea. They both allow users to input custom characters (Look for the Ω - Omega symbol on the toolbar).
Those options #Thomas Li suggested are pretty neat. If they are more advanced than you want, here's a post with a similar question.
If you're asking for suggestions... I like the way TinyMCE launched that little window to let you select a symbol, but if you want just a small amount of characters, you could probably just list those as a toolbutton bar above the text, like stack overflow's formatting bar above "Your Answer".

JQuery Popup character map

Does anybody know of a popup 'character map' jquery plugin? I have a text field and would like the user to be able to insert special characters (easily). Similar to the TinyMCE plugin.
One I've used and found pretty useful is Special Edit (http://www.ganzogo.com/projects/specialedit). It gives you really good control over what characters you want to appear, and is easily stylable to fit with your site.

How to italicize a word being displayed by a web.sitemap

I have a company name that always needs to be italicized. I have navigation that is driven by my sitemap and I can not figure out how to italicize the word. The word is always the same, so I thought about some Jscript, but was wondering if I had any other options. Thank You.
If the sitemap is an XML document than you might use an XSLT stylesheet to print out the content (a little tutorial: http://www.w3schools.com/xsl/).
But without using CSS or tags you can't make a word italic. There is no italic char for each symbol. So in a pure XML document there is no ways to do that.
I added character encodings to my sitemap to italicize. Ex: for < I used &lt

Categories