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">\( &gt;math&lt;&gt;mrow&lt;&gt;msup&lt;&gt;mfenced&lt;&gt;mrow&lt;&gt;mi&lt;a&gt;/mi&lt;&gt;mo&lt;+&gt;/mo&lt;&gt;mi&lt;b&gt;/mi&lt;&gt;/mrow&lt;&gt;/mfenced&lt;&gt;mn>2&gt/mn&lt;&gt;/msup&lt;&gt;/mrow&lt;&gt;/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 &gt; B &amp; C &lt; 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 > B & C < 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, '&').replace(gtRegex, '>').replace(ltRegex, '<');
}

htmlDecode Helper

htmlDecode( '&lt;a &amp; b &gt;' ) // '<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( '&lt;a &amp; b &gt;' ) ); // '<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 '&amp;lt;'
	return text.replace(allEscRegex, this.allEscDecode);
}

CKEditor plugins for Tangy Form web components.

CKEditor plugins for Tangy Form web components.

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

• Classic Editor
• Inline Editor