TinyMCE: Custom characters for format? - javascript

I want to change the behaviour for the "BOLD" - Format. Instead of wrapping
<b>text</b>
around it, it should instead wrap
*text*
around it. I found examples to wrap other html-Tags than the default, but not how to wrap simple characters.
One of those examples: bold: {inline: 'span', 'classes': 'bold'},

To my knowledge, this isn't really possible without changing the library, making an undocumented library call or building some JS to hook into TinyMCE's output. Neither of these are options you should really consider; they could break as soon as you try and update the library. And being unable to update the library means you won't be able to opt into bugfixes and the like.
The API for custom formats is documented here: http://www.tinymce.com/wiki.php/configuration:formats
Is your intention to allow users to submit markdown formatted text to a server? If so, I wonder if you might have to perform reparsing. I know of one project that offers this: https://github.com/hgilani/html2markdown. Not sure if it suits your needs, though.

Related

How can I parse a JSON file with comments in client-side Javascript? (Don't need to preserve comments.)

First, I know that JSON doesn't support comments. I'm using them anyway because I need to write little notes to make it easy for people who aren't tech-savvy to edit this file.
I'm using double-slash comments, but I can switch to slash-star if needed.
"campaignID": "230109-stock-shop", // this is the method I want
I know the technique of creating extra comment fields like this, but it doesn't fit my needs.
"__comment": "this ISN'T the method I want"
I'm working entirely in client-side Javascript/jQuery. When I import a file with comments, it - of course - doesn't work.
$.getJSON('file.json', function (json) {//do things})
Is it possible to strip out the comments when importing the JSON file somehow? I tried to find a JS library or something that would do that, but everything I found is server-side, and I need everything to run client-side.
I'm also not super great with Javascript, so it's possible I'm missing something obvious.
I really appreciate any help you can give!
You can remove all the comments before trying to parse it.
You won't be able to use $.getJSON(), since that tries to parse the JSON itself. Use $.get(), remove the comment and parse it.
$.get('file.json', function(commented_json) {
json = JSON.parse(commented_json.replace(/\/\/.*/g, ''));
// do things
}, "text");
Note that this won't work properly if any of the strings in the JSON contain //. That would require using a real JavaScript parser so it can distinguish the context.

How does Vue implement the double curlys/mustache syntax?

How does a frameworks like Vue implement their own custom syntaxes within an HTML document?
So I want to create a template engine, consequently I need to know how to implement my own custom syntax. I thought that an easy one would be the double curlys that can be used in Vue. Example of curlys:
<h1>{{pageTitle}}</h1>
My first thought was to use `String.prototype.replaceAll(regex, string); but I got stuck at the regex I would use. In fact thinking about it now, I probably need a dynamic regular expression maybe?
p.replaceAll(/\{\{()\}\}/g, '<p>{{embeddedVar}}</p>')
The other option I considered was a parser, or a lexer, but I didn't even know where to start. I built them in school in C++. I thought maybe NPM has one pre-built?
It seems like several developers have wrote their own custom template engine that has built-in support for the double curly brackets. I was thinking that maybe there is a common way that its being implemented.
The Vue syntax is indeed not understood by the browser. the work is done by the Vue library that's imported in every Vue app.
The original markup (with the curly braces showing up) can even be seen for a split second when the page is loading, and this is because Vue hasn't loaded up all the way yet.

Searching good JavaScript formatter for eclipse

I am using eclipse as my IDE but I don't like the installed formatters. I also builded my own one but didn't get it to work like I want it to. For example things like that happen often:
Is there somebody out there with a good JavaScript formatter or a link with a list of some. I only found a few (e.g. the google formatter) but I don't like one of them.
Try changing the formatting preferences individually.
Window->Preferences->JavaScript->Code Style->Formatter
You'll have to save them as a new file. The only issue i have is that the object declaration won't use tabs instead of spaces for the property declarations.

Accessing a css file with jQuery (or other library)

I've already searched for how to get the css file and found that you can use $.get('file path', callback) to actually get the file.
First question. I can get the content of the file, but it is a long string. Is there a method to search that file? For example, if there was a particular selector in the CSS file, can I use jQuery or some other library to retrieve the styles in a convenient form.
Second question. The reason why I want this is because I'd like to do some animations with data gotten out of the CSS file. First of all, is this possible? Second, is this recommended?
Once you retrieve the file, you need to parse it. I'm not sure if there are any CSS parsing engines out there, but if there are, they're all based off of regex expressions. If you're looking for something in particular, it might be wise to just write your own regex pattern for it.
As for doing animations... yes? I don't know exactly what you need to the data for or what you plan to do with it, but yes, you can always animate something. I can't make any recommendations because I don't know exactly what you're trying to do.

releasing content by role within a D2L topic

I'm trying to release content by role within a topic in D2L's LMS. Is this possible using Javascript? Something like, "if {RoleName}=Student, then display this, else display that"...? I realize I can restrict/release content by role on a topic level, but I'm trying to do so within a topic and thus can't use release conditions. Any ideas?
You can control that functionality directly through the Content tool interface without needing to add in JavaScript. If you don't have access to that in Content, talk to your site administrator.
A roundabout way to do this would be to parse the QueryString to get the OU, then make a Valence request to find out the user role in the course. It would take a lot of work to get all the pieces connected for what seems like a really simple use case. This is the strategy I'm using for tools I've made that get embedded right in D2L pages.
If Replacement Strings worked properly then you could use a combination of them and JavaScript. But since the replacement happens at save time rather than render time in most places, they're really not usable for your scenario.
Desire2Learn Replace Strings in Content
Another option would be to create your own custom widget and put it on the course home page. Since Replacement Strings work properly in widgets, you could read the value of the {rolename} replacement string and store it in a cookie. Then, in your pages you would read the value of the cookie to create your conditionals.

Categories

Resources