AngularJS集成TinyMCE时CodeSample插件预览无语法高亮问题排查

针对你遇到的编辑器内语法高亮正常，但内容查看器和内部预览失效的问题，可从以下几个关键方向排查修复：

1. 确保Prism在内容渲染完成后初始化 #

Prism不会自动检测异步加载的DOM元素，AngularJS指令渲染完成后需手动触发高亮：

在内容查看器指令的link函数中添加初始化逻辑（需注入$timeout）：

angular.module('yourApp').directive('contentViewer', ['$sce', '$timeout', function($sce, $timeout) {
  return {
    scope: { content: '=' },
    template: '<div ng-bind-html="trustedContent"></div>',
    link: function(scope, element) {
      scope.trustedContent = $sce.trustAsHtml(scope.content);
      
      // 等待DOM渲染完成后调用Prism高亮
      $timeout(function() {
        if (typeof Prism !== 'undefined') {
          Prism.highlightAll();
        }
      });
    }
  };
}]);

2. 检查HTML内容是否被清理工具过滤了language-*类 #

若你使用了HTML清理逻辑（如ngSanitize或第三方工具），需确保language-xxx类未被过滤：

示例：配置ngSanitize允许language前缀的类 #

angular.module('yourApp').config(function($compileProvider) {
  // 自定义class白名单，保留language-开头的类
  $compileProvider.preSanitizeBindings(function(value) {
    if (typeof value === 'string') {
      return value.replace(/class="([^"]*)"/g, function(match, classes) {
        const allowedClasses = classes.split(' ').filter(cls => cls.startsWith('language-'));
        return allowedClasses.length ? `class="${allowedClasses.join(' ')}"` : '';
      });
    }
    return value;
  });
});

同时可在控制台查看查看器的DOM结构，确认<code>标签是否保留了language-xxx类（如<code class="language-javascript">）。

3. 确认Prism语言包已完整加载 #

TinyMCE配置的codesample_languages对应的语言包需单独引入，在index.html中按顺序添加：

<!-- Prism核心库 -->
<script src="path/to/prism.js"></script>
<!-- 对应你配置的语言包 -->
<script src="path/to/prism-markup.js"></script>
<script src="path/to/prism-javascript.js"></script>
<script src="path/to/prism-css.js"></script>
<script src="path/to/prism-php.js"></script>
<!-- 其他需要的语言包 -->
<!-- Prism主题样式 -->
<link rel="stylesheet" href="path/to/prism-theme.css">

4. 修复TinyMCE内部预览的高亮问题 #

TinyMCE的预览是在iframe中加载，需在预览渲染后触发Prism初始化，在TinyMCE的setup函数中添加：

setup: function(editor) {
  // 其他现有逻辑...
  
  // 预览渲染完成后初始化Prism
  editor.on('preview_postrender', function(e) {
    const previewDoc = e.previewFrame.contentDocument || e.previewFrame.contentWindow.document;
    
    // 动态注入Prism及依赖（若预览iframe未加载）
    if (!previewDoc.Prism) {
      const prismScript = previewDoc.createElement('script');
      prismScript.src = 'path/to/prism.js';
      prismScript.onload = function() {
        // 注入语言包示例
        const jsLangScript = previewDoc.createElement('script');
        jsLangScript.src = 'path/to/prism-javascript.js';
        jsLangScript.onload = function() {
          previewDoc.Prism.highlightAll();
        };
        previewDoc.head.appendChild(jsLangScript);
        
        // 注入主题样式
        const themeLink = previewDoc.createElement('link');
        themeLink.rel = 'stylesheet';
        themeLink.href = 'path/to/prism-theme.css';
        previewDoc.head.appendChild(themeLink);
      };
      previewDoc.head.appendChild(prismScript);
    } else {
      previewDoc.Prism.highlightAll();
    }
  });
}

5. 验证$sce处理后的HTML完整性 #

在内容查看器指令中打印$sce.trustAsHtml的结果，确认HTML结构未被转义或修改：

scope.trustedContent = $sce.trustAsHtml(scope.content);
console.log('Trusted HTML:', scope.trustedContent.toString());

检查输出的HTML中，<pre><code>标签的结构和class属性是否与编辑器内一致。

内容的提问来源于stack exchange，提问作者Kabeer Hadi