Issue: Lack of Syntax Highlighting in TinyMCE CodeSample Plugin on Content Viewer and Internal Preview, while Visible in the Editor

Question

I'm currently working with AngularJS and TinyMCE, and I have almost completed the integration. However, I am facing an issue with the CodeSample plugin. The problem is that it does not produce the expected output with syntax highlighting in the viewer or internal preview. Nevertheless, the syntax highlighting does show up correctly in the editor, as shown below:

However, the preview appears as follows:

I have followed the documentation by adding Prism.js, and although the Prism.js theme is displaying correctly in the viewer, the syntax highlighting is still not working.

Steps Taken:

1. Integrated TinyMCE with AngularJS.

2. Implemented the TinyMCE directive within the content creator directive.

3. Retrieved the content using tinymce.activeEditor.getContent().

4. Displayed the sanitized HTML content in the content viewer directive using $sce.trustAsHtml().

5. Added the necessary link and script tags for Prism.js in the index.html file.

Here is the structure of my application:

• Angular modules

  • TinyMCE directive

  • Content creator directive

  • Content viewer directive

Below is the setup for TinyMCE in the tinymce directive:

  tinymce.init({
                    selector: '#editor_' + scope.id,
                    placeholder: scope.inputPlaceholder,
                    height: 500,
                    skin: 'oxide',
                    skin_url: 'bower_components/tinymce/skins/ui/oxide',
                    resize: 'both',
                    branding: false,
                    promotion: false,
                    file_picker_types: 'file image',
                    advcode_inline: true,
                    plugins: [
                        'codesample',
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime',  'table', 'wordcount','image','emoticons'
                    ],
                    toolbar: 'undo redo | blocks | codesample |' +
                    'bold italic backcolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | styleselect'  +
                    'removeformat | link image |  emoticons charmap ',
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
                    
                    codesample_languages: [
                        {text: 'HTML/XML', value: 'markup'},
                        {text: 'JavaScript', value: 'javascript'},
                        {text: 'CSS', value: 'css'},
                        {text: 'PHP', value: 'php'},
                        {text: 'Ruby', value: 'ruby'},
                        {text: 'Python', value: 'python'},
                        {text: 'Java', value: 'java'},
                        {text: 'C', value: 'c'},
                        {text: 'C#', value: 'csharp'},
                        {text: 'C++', value: 'cpp'}
                    ],
                    codesample_global_prismjs: true,
                    images_upload_handler: image_upload_handler,
                    mobile: {
                        menubar: true,
                        plugins: 'autosave lists autolink',
                        toolbar: 'undo bold italic styles'
                    },
                    setup: function(editor) {
                        
                        editor.on('Paste Change input Undo Redo', function () {
                            
                            scope.ngModel = tinymce.activeEditor.getContent();
                            if (scope.ngModel.element.nodeName == 'PRE') {
                                console.log(scope.ngModel.element)
                            }
                            try {
                                scope.$apply();
                            } catch (e) {}
                            
                        });
                       

                        editor.on('init', function () {
                            if(!angular.equals(scope.ngModel, undefined)){
                                tinymce.activeEditor.setContent(scope.ngModel);
                            }
                        });

                    }

                })

Could you please help me identify where I went wrong and what I might be missing?

Answer 1

We can enable syntax highlighting using Prism.js or highlight.js

The below is a example on implementing Prism.js in Angular JS

• Add the JS and CSS CDN Link of Prism.js in index.html

• Create a directive named prism

  angular.module('app_name').directive('prism', function () {
      return {
         restrict: 'A',
         link: function (scope, element) {
  
            scope.$watch(function () {
               return element[0].innerHTML;
            }, function () {
  
               // Find all <code> elements within the directive's element
               var codeElements = element.find('code');
  
               // Apply highlighting to each <code> element
               angular.forEach(codeElements, function (codeElement) {
                  Prism.highlightElement(codeElement);
               });
  
            });
         }
     };
  });
  

• Attach this directive on viewer element

<div prism ng-bind-html="dataFromTinyMCE"></div>