wysiwyg_custom.php v.3.53

Carl -

here is the code with the toolbars and style_formats unselected, also see attached screenshot of a wysiwyg toolbar when I do this, I get two Formats dropdowns.

// Menubar: set to true to display the menus on top of the editor buttons. To configure the menu items, see: https://www.tinymce.com/docs/configure/editor-appearance/#menu
menubar: false,

// Define toolbar buttons. See list of toolbar buttons here: https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
toolbar1: "formatselect fontsizeselect | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | superscript subscript charmap | removeformat fullscreen",
toolbar2: "forecolor backcolor | link anchor | blockquote hr image media table | pastetext paste | customcodesample code",
toolbar3: "styleselect",

// formatselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#block_formats
block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre',

// fontsizeselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#fontsize_formats
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',

// codesample languages config
codesample_languages: [
{text: 'Code', value: 'php'}, // php also provides HTML/CSS/JS formatting
],

// customcodesample button setup
// NOTE: We're replacing the "codesample" button to make functionality more consistent and enable wrapping text selections with formatted code blocks.
// - To display full formatting on front-end, download and include JS and CSS from https://prismjs.com/ on website. Requires (at minimum): Core, Markup, CSS, C-like, JavaScript, Markup Templating, and PHP
// - To restore default functionality (add plain <code></code> around selections), replace "customcodesample" in toolbar2 line above with "codesample"
setup: function (editor) {
editor.addButton('customcodesample', {
tooltip: 'Insert/Edit code sample',
icon: 'mce-ico mce-i-codesample',
onclick: function (e) {

// get the HTML and text of the current editor selection
var contentHTML = editor.selection.getContent();
var contentText = editor.selection.getContent({format: 'text'});

// if selection is empty or starts with a <pre> tag, use codesample plugin functionality (insert/edit code block)
if (contentHTML.indexOf('<pre') === 0 || contentHTML == '') { editor.execCommand('codesample', false); }

// otherwise wrap selection in prism-formatted code block
else { editor.insertContent('<pre class="language-php"><code>' + contentText + '</code></pre>'); }

}
});
},

// styleselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#style_formats
// Note: Selecting a 'style format' from the 'Formats' dropdown adds whatever classes and styles are listed below
// ... to the selected content and surrounds that content with the tag specified in inline, block, or selector.
// ... If using classes, make sure they're defined in both lib/wysiwyg.css and your website CSS files.
style_formats: [
{ title: 'Example Class', selector: 'p', classes: 'exampleClass' },
{ title: 'Blue Teardrop bullets', block: 'div', classes: 'msj-list-container' },
{ title: 'Red text', inline: 'span', styles: {color: '#ff0000'} },
{ title: 'Bold text', inline: 'b'},
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' }
],