MathEx
MathEx
A CKEditor Plugin for MathML and Latex Mathemathical Expressions
Editor accepted string format from input default class was math if you change this you need to configure through mathexClass
<span class="math">\({ MathML or Tex Mathemathical expressions }\)</span>
Encoder Helper
let str = "<span class="math"><math><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow></math></span>"
this helper function added escape character before <math /> and html Decode for editor readable format
decoder(str) // <span class="math">\( >math<>mrow<>msup<>mfenced<>mrow<>mi<a>/mi<>mo<+>/mo<>mi<b>/mi<>/mrow<>/mfenced<>mn>2>/mn<>/msup<>/mrow<>/math> \) </span>
function encoder(text){
if (text){
var myregexp = /<span[^>]+?class="math".*?>([\s\S]*?)<\/span>/g;
return text.replace(myregexp, function replacer(match) {
return match.replace(/<math>([\s\S]*?)<\/math>/g , function replacerData(match) {
let tempString = match.replace(/<math>/g, "\\(<math>");
return this.htmlEncode(tempString.replace(/<\/math>/g, "</math>\\)"))
}.bind(this))
}.bind(this))
}
}
Decoder Helper
let str = "<span class="math">\({ MathML or Tex Mathemathical expressions }\)</span>"
this helper function removed escape character before <math />
decoder(str) // <span class="math"> MathML or Tex Mathemathical expressions </span>
function decoder(str) {
let tempString = str.replace(/\\\(<math>/g, "<math>");
return tempString.replace(/<\/math>\\\)/g, "</math>");
}
htmlEncode Helper
htmlEncode( 'A > B & C < D' ) // 'A > B & C < D'
var ampRegex = /&/g,
gtRegex = />/g,
ltRegex = /</g,
quoteRegex = /"/g,
tokenCharset = 'abcdefghijklmnopqrstuvwxyz0123456789',
/**
* Replaces special HTML characters in a string with their relative HTML
* entity values.
*
* console.log( htmlEncode( 'A > B & C < D' ) ); // 'A &gt; B &amp; C &lt; D'
*
* @param {String} text The string to be encoded.
* @returns {String} The encoded string.
*/
htmlEncode = text => {
// Backwards compatibility - accept also non-string values (casting is done below).
// Since 4.4.8 we return empty string for null and undefined because these values make no sense.
if (text === undefined || text === null) {
return '';
}
return String(text).replace(ampRegex, '&amp;').replace(gtRegex, '&gt;').replace(ltRegex, '&lt;');
}
htmlDecode Helper
htmlDecode( '<a & b >' ) // '<a & b >'
var ampRegex = /&/g,
gtRegex = />/g,
ltRegex = /</g,
quoteRegex = /"/g,
tokenCharset = 'abcdefghijklmnopqrstuvwxyz0123456789',
allEscRegex = /&(lt|gt|amp|quot|nbsp|shy|#\d{1,5});/g,
namedEntities = {
lt: '<',
gt: '>',
amp: '&',
quot: '"',
nbsp: '\u00a0',
shy: '\u00ad'
}
allEscDecode(match, code) {
if (code[0] == '#') {
return String.fromCharCode(parseInt(code.slice(1), 10));
} else {
return namedEntities[code];
}
}
/**
* Decodes HTML entities that browsers tend to encode when used in text nodes.
*
* console.log( htmlDecode( '<a & b >' ) ); // '<a & b >'
*
* Read more about chosen entities in the [research].
*
* @param {String} The string to be decoded.
* @returns {String} The decoded string.
*/
htmlDecode = text => {
// See:
// * http://jsperf.com/wth-is-going-on-with-jsperf JSPerf has some serious problems, but you can observe
// that combined regexp tends to be quicker (except on V8). It will also not be prone to fail on '&lt;'
return text.replace(allEscRegex, this.allEscDecode);
}
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 1.3 |
||||
|
MathEx Ckeditor addon for Mathematical Expressions Changelog
|
||||
Bootstrap Widgets
- Categories: Contents, Tools
- Author: doksoft
- License: Commercial
Bootstrap widgets are very important for content management, but using them in CKEditor is not exactly simple. Well, now, you can effortlessly work with Bootstrap components directly in CKEditor!
Meet the Bootstrap Widgets add-on! It allows inserting the components provided by Bootstrap and Foundation CSS frameworks into your editor.
The set significantly extends the functionality of CKEditor. It offers all standard widgets like buttons, links, image galleries, icons, information messages, breadcrumbs, labels, badges, and so on. Try it and see how your work gets simpler.
You get the Bootstrap Include CSS/JS add-on for free to plug-in the framework to the content editor.
Screenshots
tangy-location
- Categories: Contents
- Author: rj_steinert
- License: GPL, LGPL, MPL
CKEditor plugins for Tangy Form web components.
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 1.0.0 |
||||
|
first |
||||
tangy-checkbox
- Categories: Contents
- Author: rj_steinert
- License: GPL, LGPL, MPL
CKEditor plugins for Tangy Form web components.
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 1.0.0 |
||||
|
first |
||||
tangy-input
- Categories: Contents
- Author: rj_steinert
- License: GPL, LGPL, MPL
CKEditor plugins for Tangy Form web components.
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 1.0.0 |
||||
|
First release. |
||||
Section Widget
This widget offers the possibility to add section elements into the editor and make them optionally distinguishable by configurable CSS classes, so you can apply different styles on them.
All sections will have three editables: heading, media element and content. But all of them are optional. If all editables are filled with content and CSS classes are configured, the resulting HTML will be
<section class="...">
<h2>...</h2>
<figure class="...">...</figure>
<div class="content">...</div>
</section>
The optional configuration expects an object with one or several CSS classes as the properties and the corresponding labels visible in the section dialog as the values, p.e.
config.section: {
'block-content': 'Content Block',
'block-info': 'Info Block',
...
};
Technical
This widget will always upcast all section elements, unless an element was already upcasted by another widget. To give other widgets the chance to do so, the value for upcastPriority (defaults to 10) is set to 20, so that the other widgets' upcast methods are called first.
Demo
Screenshots
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 2.11 |
||||
|
Add ukrainian translations (thanks @Sensetivity) |
||||
Media Browser
This plugin provides a simple and minimal browser API for other plugins to consume (almost identical to the browser plugin) as an alternative to the filebrowser plugin.
It does absolutely not care about advanced features like file uploads or the likes. If you need those features, stick with the filebrowser. It rather focuses on the easy integration of your application (CMS or whatever), which usually provides a means to upload files anyway.
Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the browser-native window.postMessage() functionality to communicate between both. This way you can easily pass more than just the URL of the selected element from the browser to the editor or even multiple elements at once.
Difference between browser and mediabrowser plugin
There is only one difference between the browser and the mediabrowser plugin:
Whilst the mediabrowser plugin offers a config option to set a global browser URL for all plugins that use it, the browser plugin does not have any config option at all, but your plugin surely could have. With the browser plugin you could configure the browser URL for each button individually, if you want.
Plugin Integration
To use the provided API in your plugin, you just have to define a callback function mediabrowser in the browse server button configuration of your plugin's dialog, p.e.
{
id: 'browse',
type: 'button',
label: common.browseServer,
hidden: true,
mediabrowser: function (data) {
if (data.src) {
var dialog = this.getDialog();
['src', 'type', 'alt'].forEach(function (item) {
if (!!data[item]) {
dialog.getContentElement('info', item).setValue(data[item]);
}
});
}
}
}
Browser Integration
You can implement your browser as you wish, the only two requirements are that you configure the URL to your browser as mediabrowserUrl p.e.
config.mediabrowserUrl: '/url/to/browser';
and that your browser notifies the editor by posting a message p.e. like
window.opener.postMessage({
alt: 'Optional alternative text',
src: '/url/to/media'
}, origin);
The type and structure of your message is complety up to you, p.e. you can use a simple string if you are only interested in one value, an object or an array.
Demo
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 2.10 |
||||
|
Technical release |
||||
Gallery Widget
This widgets serves as a container for multiple instances of other media widgets in order to display them as a gallery, p.e. with the aid of flexbox or grid layout, or as a slider/carousel, p.e. with your own implementation or one of your choice, or as whatever else comes into your mind.
This widget itself does not provide any slider/carousel functionality! It only provides a HTML structure suitable for aforementioned purposes and allows to maintain it within the editor.
The resulting HTML will be p.e.
<figure class="gallery">
<div class="content">
<figure class="image">
<img src="..." />
<figcaption>
...
</figcaption>
</figure>
...
</div>
<figcaption>
...
</figcaption>
</figure>
Technical
At current state this widget
- only allows figure elements as child elements (filtering takes place on
downcast), - does not offer any configuration options and
- does not offer a dialog to set custom classes or values.
This could change in one of the future versions.
Demo
Screenshots
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 2.10 |
||||
|
Technical release |
||||
URL link as you type (linkayt)
linkayt transforms text into link if it starts by http or by https
The plugin distinguishes local links and external links; you just have to provide the proper informations into the plugin's first lines
We suggest to use linkayt along with autolink to be able both actions: link as you type AND copy-paste a link.
Screenshots
Releases
| Plugin versions | CKEditor versions | |||
|---|---|---|---|---|
| 4.24 | 4.23 | 4.22 | ||
|
Version: 1.0.1 |
||||
|
The plugin now permits to submit the form by pressing CTRL-enter. |
||||