利用pinyin-pro带声调，给编辑器输出的问题备注拼音

admin

1. <div id="content-container">
   
2.                     {$new['content']}
   
3.                 </div>
   
4.                
   
5.                 <script src="https://cdn.bootcdn.net/ajax/libs/pinyin-pro/3.21.1/index.js"></script>
   
6.                 <script>
   
7.                     document.addEventListener('DOMContentLoaded', function() {
   
8.                         const container = document.getElementById('content-container');
   
9.                         const content = container.innerHTML;
   
10.                         
    
11.                         const processedContent = content.replace(/[\u4e00-\u9fa5]+/g, function(match) {
    
12.                             const pinyinArray = pinyinPro.pinyin(match, { toneType: 'symbol', type: 'array' });
    
13.                             const pinyinHtml = pinyinArray.map((pinyin, index) =>
    
14.                                 `<ruby>${match[index]}<rt>${pinyin}</rt></ruby>`
    
15.                             ).join('');
    
16.                             return pinyinHtml;
    
17.                         });
    
18.                         
    
19.                         container.innerHTML = processedContent;
    
20.                     });
    
21.                 </script>

复制代码

JS如果不用cdn保存在本地加载，速度也许会快一点；
这一版是拼音带有声调的；