Change the JavaScript code to output HTML rather than just plain text

Question

Change the JavaScript code to output HTML rather than just plain text

I've created a small plugin for tinymce4 that adds an additional dropdown menu with a list of headers (e.g. h1, h2...). The issue I'm facing is that I'm trying to display these header elements with their corresponding styles (e.g. <h1>Header H1</h1>), but instead of HTML, I'm only getting plain text. What could be the mistake in my code?

tinymce.PluginManager.add('headings', function(editor, url) {
    ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
        editor.addMenuItem("headers_" + name, {
            tooltip: "<"+name+">Заголовок</" + name+">",
            text: "<"+name+">Заголовок</" + name+">",
            onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
            onPostRender: function() {
                var self = this, setup = function() {
                    editor.formatter.formatChanged(name, function(state) {
                        self.active(state);
                    });
                };
                editor.formatter ? setup() : editor.on('init', setup);
            }
        })
    });
});

Can anyone point out where I might be going wrong?

javascript jquery html css tinymce

Answer 1

Answer №1

It seems like TinyMCE doesn't support HTML menu items through the addMenuItem method, or at least I haven't come across any documented examples of it. The params description for that method isn't very helpful. Instead, you might want to consider the following approach, which allows for defining new style formats and automatically handles their display. I couldn't figure out how to create sub-menus within the formats button, but it should be feasible:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});
</script>
<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

If you are still interested in creating your own custom HTML code for the menu, you could try to analyze how TinyMCE implements it for the style_formats setting above. However, in my experience with these JavaScript editors, the more advanced API features are often subject to frequent changes, so it's usually safer to stick to the documented high-level API calls and settings.

Answer 2

It seems like TinyMCE doesn't support HTML menu items through the addMenuItem method, or at least I haven't come across any documented examples of it. The params description for that method isn't very helpful. Instead, you might want to consider the following approach, which allows for defining new style formats and automatically handles their display. I couldn't figure out how to create sub-menus within the formats button, but it should be feasible:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});
</script>
<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

If you are still interested in creating your own custom HTML code for the menu, you could try to analyze how TinyMCE implements it for the style_formats setting above. However, in my experience with these JavaScript editors, the more advanced API features are often subject to frequent changes, so it's usually safer to stick to the documented high-level API calls and settings.

Change the JavaScript code to output HTML rather than just plain text

Answer №1

Similar questions

Content within a div that is floated left

Tips for shifting nested div containers to the left as the content expands

Discover the secret to easily displaying or concealing the form of your choice with the perfect fields

Deciding which HTML element to display in AngularJS

Losing values due to custom $validator and getterSetter in AngularJS / UI Bootstrap

Capture latitude and longitude using HTML5 Geolocation and store the values in a PHP variable

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

Gain access to Google Analytics without the need for page consent by utilizing JavaScript

Bone Structure Styles - adaptable form

Attempting to retrieve an array within a Mustache JavaScript template

Utilizing Javascript to filter data across multiple columns in tables

Assign the output of a function to a variable

Is it possible to fill dropdown menus on a webpage using jQuery or JavaScript without the need for an ajax call?

Is it beneficial to create two distinct node applications—one to serve a webservice and another to consume that webservice in order to display it on a browser?

Choosing a single radio button value within a nested ng-repeat loop in AngularJS

Alter div elements with jQuery based on the particular link that was selected

The error message "Cannot access property 'findAll' of undefined in expressjs" is displayed

Personalize the file button for uploading images

The Mystery of the Undefined Return Value in JavaScript's Map Function

What could be causing my website's screen resolution to not fit properly on mobile devices?