JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<script src="//cdn.ckeditor.com/4.5.3/full-all/ckeditor.js"></script>
<textara id="myeditor">[[something]]</textarea>

CSS

.report-section {
    background: #ffffa0;
    padding: 40px;
    font-size: larger;
}
.cke_button_icon.cke_button__ph_icon {
padding-right: 25px;
}
add content:

.cke_button_icon.cke_button__ph_icon:after {
content: "PH";
position: relative;
left: 15px;
    color: red;
}

JavaScript

$(function() {
	CKEDITOR.plugins.add( 'placeholder2', {
		requires: 'widget',
		lang: 'en', // %REMOVE_LINE_CORE%
		icons: 'ph', // %REMOVE_LINE_CORE%
		hidpi: true, // %REMOVE_LINE_CORE%

		onLoad: function() {
			// Register styles for placeholder widget frame.
			CKEDITOR.addCss( '.cke_placeholder{background-color: #FFFFD0;padding: 20px;margin-bottom: 10px;border: 1px solid #f5f5c0;border-radius: 5px;color: #55A611;font-weight: bold;font-size: larger;}' );
		},

		init: function( editor ) {

			var lang = editor.lang.placeholder;

			// Put ur init code here.
			editor.widgets.add( 'placeholder2', {
				template: '<div class="cke_placeholder">[[]]</div>',

				downcast: function() {
					return new CKEDITOR.htmlParser.text( '[[' + this.data.name + ']]' );
				},

				init: function() {
					// Note that placeholder markup characters are stripped for the name.
					this.setData( 'name', this.element.getText().slice( 2, -2 ) );
				},

				data: function() {
					this.element.setText( '[[' + this.data.name + ']]' );
				}
			} );

			editor.ui.addButton && editor.ui.addButton( 'CreatePlaceholder', {
				label: lang.toolbar,
				command: 'placeholder2',
				toolbar: 'others,5',
				icon: 'ph'
			} );

            var placeholderReplaceRegex = /\[\[([^\[\]])+\]\]/g;
            editor.on( 'toHtml', function( evt ) {
                        var evtData = evt.data,
                            text = evtData.dataValue;

                evtData.dataValue = text.replace( placeholderReplaceRegex, function( match ) {
						// Creating widget code.
						var widgetWrapper = null,
							innerElement = new CKEDITOR.htmlParser.element( 'div', {
								'class': 'cke_placeholder'
							} );

						// Adds placeholder identifier as innertext.
						innerElement.add( new CKEDITOR.htmlParser.text( match ) );
						widgetWrapper = editor.widgets.wrapElement( innerElement, 'placeholder' );

						// Return outerhtml of widget wrapper so it will be placed
						// as...