CODEWITHSUNDEEP
checkboxtinymcehtml-selecttinymce-4
killercowuk
killercowuk

Reputation: 1343

Allowing select and input checkboxes to be editable

An HTML template that I'm working on has a variety of HTML select and checkbox elements contained within it.

Eg.

<select>
   <option></option>
   <option>No</option>
   <option>Yes</option>
</select>

<input type="checkbox" />

I've found that these elements do not appear to be editable from within the WYSIWYG editor.

I would like a user to be able to toggle the checkboxes and select options from within these elements from within the WYSIWYG editor.

So the HTML could be turned into something like this:

<select>
   <option></option>
   <option selected>No</option>
   <option>Yes</option>
</select>

<input type="checkbox" checked />

Has anyone been able to acheive this in TinyMCE 4?

Is there a plugin that may help that I haven't found? Are there techincal challenges to achieving this as a plugin?

Thanks for any help/advice!

Update:

I've discovered the inability to change these element within the editor is actually a reported bug with Firefox since 2008! In other browsers you are able to change the values of these elements - however as no changes are made to the HTML - their state is not saved.

Perhaps a plugin to record the state of these elements into the HTML source just prior to saving, would fulfil my requirement?

Upvotes: 3

Views: 911

Answers (1)

Dejan Dozet
Dejan Dozet

Reputation: 1009

I managed to create such plugin (but for version 5.10.9)! Created folder external_plugins, created folder checkbox_dd (my plugin name) and added there plugin.js, then added this as code to it:

(function () {
  var checkbox_dd = (function () {
    'use strict';

    tinymce.PluginManager.add("checkbox_dd", function (editor, url) {

      function _onAction()
      {
        editor.insertContent('<input type="checkbox">');
      }

      // Define the Toolbar button
      editor.ui.registry.addButton('checkbox_dd', {
        tooltip: "Insert Checkbox",
        icon: 'checkmark', // Use a built-in icon or specify your own
        onAction: _onAction
      });

      // Function to handle checkbox changes
      function updateCheckboxState(e) {
        if (e.target.nodeName === 'INPUT' && e.target.type === 'checkbox') {
          if (e.target.checked) {
            e.target.setAttribute('checked', '');
          } else {
            e.target.removeAttribute('checked');
          }
        }
      }

      // Add event listener to the editor body
      editor.on('init', function () {
        var body = editor.getBody();
        body.addEventListener('change', updateCheckboxState);
      });

      // Clean up event listener when editor is removed
      editor.on('remove', function () {
        var body = editor.getBody();
        if (body) {
          body.removeEventListener('change', updateCheckboxState);
        }
      });

      return {
        getMetadata: function () {
          return {
            name: "Checkbox Plugin for TinyMCE",
            url: "https://www.dejandozet.com/blog/20-most-popular-programming-languages"
          };
        }
      };
    });
  }());
})();

Then in the init

tinymce.init({
  /* Other initialization here, and then: */
  external_plugins: {
    'checkbox_dd': '/tinymce/external_plugins/checkbox_dd/plugin.js'
  },
  toolbar: 'checkbox_dd | ...',
  init_instance_callback: function (editor) {
    editor.getBody().addEventListener('click', function (e) {
      if (e.target.tagName === 'INPUT' && e.target.type === 'checkbox') {
        e.stopPropagation();
      }
    });
  },
  content_style: 'input[type="checkbox"] { pointer-events: auto; }'
});

And it worked! My goal is to use TinyMCE editor as a checklist.

Upvotes: 0

Related Questions