TinyMCE自带codesample插入代码功能不支持行号，需要依靠Prism.js行号插件实现。在编辑器插入代码会生成如下代码：
<pre class="line-numbers language-javascript">
<code>
代码内容
</code>
</pre>注意：class里的line-numbers类有时会没有自己加上，导致前台不显示行号，可能是个Bug。
我们需要用jQuery强制为插入的代码块加上line-numbers类，然后在前台显示内容页面引入Prism.js渲染行号，实现代码显示行号。
TinyMCE配置（表单页面）：
<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#myeditor',
convert_urls: false,
language: 'zh_CN',
plugins: 'advlist,autolink,link,image,imagetools,media,lists,preview,code,codesample',
toolbar: 'code formatselect fontselect fontsizeselect alignleft aligncenter alignright alignjustify blockquote undo redo removeformat advlist autolink link image media lists preview bold italic underline strikethrough indent outdent codesample',
codesample_languages: [{
text: 'HTML/XML',
value: 'markup'
},
{
text: 'JavaScript',
value: 'javascript'
},
{
text: 'CSS',
value: 'css'
},
{
text: 'PHP',
value: 'php'
},
{
text: 'Python',
value: 'python'
},
{
text: 'SQL',
value: 'sql'
},
{
text: 'Java',
value: 'java'
},
],
images_upload_url: "{:url('article/uploads')}",
height: 500,
extended_valid_elements: "pre[*],code[*],script[*]",
// 插入代码块强制加上 line-numbers
setup(editor) {
const addLines = () => {
editor.$('pre').addClass('line-numbers');
};
editor.on('codesampleInserted codesampleEdited NodeChange SetContent', addLines);
editor.on('change', () => editor.save());
}
});
</script>前台显示内容页面：
<!-- 引入 Prism.js -->
<link rel="stylesheet" href="/static/prismjs/prism.css">
<script src="/static/prismjs/prism.js"></script>
<script>
// 执行 Prism.js 渲染行号
document.addEventListener('DOMContentLoaded', function() {
Prism.highlightAll();
});
</script>本站原创内容，转载请注明来源：https://www.liutonghui.com/213
评论列表（0条）
暂无评论