Rendering Django template tags/variables inside TinyMCE editor?

[Tomuald]

Is there a way to make the TinyMCE editor render django template tags/variables?

1. "{% url 'url-name' %}" in the link plugin.
2. "{{ model.get_absolute_url }}" in the link plugin.

If not, that'd be great... for me at least. This is similar to #278.

[pau1a]

+1 from me

[some1ataplace]

Did not test this but maybe it can help someone write a PR.

Code for tinymce-setup.js with the necessary configuration to render Django template tags in the editor content:

tinymce.init({
    selector: 'textarea.tinymce-editor',
    plugins: 'link image table',
    toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image table',
    menubar: false,
    statusbar: true,
    height: 400,
    setup: function(editor) {
        // This will update the textarea with the editor contents whenever the user types or pastes text
        editor.on('keyup change', function() {
            tinymce.triggerSave();
        });

        // This will parse the Django template tags/variables in the editor content and render them as HTML
        editor.on('init', function() {
            var content = editor.getContent();
            var renderedContent = content.replace(/{{(.*?)}}/g, function(match, p1) {
                return '<span class="django-template-variable">' + match + '</span>';
            });
            editor.setContent(renderedContent);
        });
    },
    content_css: '/static/css/tinymce-custom.css'
});

In your Django app's settings.py file, add the following configuration for django-tinymce:

   TINYMCE_DEFAULT_CONFIG = {
       'plugins': 'link image code',
       'toolbar': 'undo redo | bold italic | alignleft aligncenter alignright | code',
       'content_css': '/static/css/tinymce-custom.css',
       'extended_valid_elements': 'style[type]',
   }

This enables the link, image, and code plugins, sets the toolbar to include commonly used formatting options, and specifies a custom CSS file to style Django template tags

Within the static folder, create a js folder. Create a new JavaScript file in the js folder called tinymce-setup.js with the code above.

---

Create a new CSS file in the css folder called tinymce-custom.css

For example, to apply a custom style to a Django template variable called {{ my_variable }}, you could add the following CSS rule:

span.django-var {
    color: blue;
}

In your tinymce.init function in your template or JavaScript file, set the value of the content_css option to the URL of your tinymce-custom.css file, using the https protocol:

tinymce.init({
  selector: 'textarea.tinymce',
  height: 500,
  width: '100%',
  plugins: 'autolink link image lists code',
  toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | forecolor backcolor | link image | bullist numlist | code',
  content_style: "{{ STATIC_URL }}css/tinymce.css",
  init_instance_callback: function (editor) {
      editor.on('change', function () {
          editor.save();
      });
  },
  setup: function (editor) {
      // Insert Django template tags in the editor content
      editor.on('init', function () {
          var content = editor.getContent();
          var regex = /({%.%}|{{.}})/g;

          if (content.match(regex)) {
              content = content.replace(regex, '<span class="django-template-tag">$1</span>');
              editor.setContent(content);
          }
      });

      // Remove the Django template tags before the editor content is submitted
      editor.on('submit', function () {
          var content = editor.getContent();
          var regex = /<span class="django-template-tag">(.*?)</span>/g;

// Replace the Django template tags with their original format
  if (content.match(regex)) {
    content = content.replace(regex, '$1');
    editor.setContent(content);
  }
});