ddddd

tinymce prism代码高亮图文详解

作者:程序员11 时间:2023-06-29 人气:383 QQ交流群\邮箱:1003265987@qq.com
tinymce prism代码高亮图文详解
要展示的内容

 正文:

        1、第一个坑,你要想tinymce你自己引用的prism.js要在tinymce设置这个代码。如图

codesample_global_prismjs:true,//允许调用用户自己引入的prism.js和prism.css

image.png 2、第二个坑,像博主最前面截图的,菜单只有高亮提示一个按钮是如下设置的这里我就不截图了。

plugins: 'codesample',//语言提示组件
toolbar: 'codesample',//语言提示菜单
menubar:false,//菜单栏
codesample_languages: [
	{text:'jquery',value:"jq"},
],//示例代码

  3、第三个坑,所有操作要在编辑器初始化完再操作,跟plugins: 'codesample',toolbar
平级。

init_instance_callback: (editor) => { //编辑器初始化完毕回调
					
}

  4、获取和设置内容建议你写在init_instance_callback的{}里面,你也可以在外面setTimeout(()=>{},1000)  太丑。不建议

tinymce.get('tinydemo1').setContent(htmlVal)//编辑时数据回填
tinymce.get('tinydemo1').getContent()//获取编辑器内容

  get后面是id;注意:别用tinymce.activeEditor.getContent() ;因为这玩意在你一个html有2个tinymce的时候就只指向最后一个tinymce

5、你如果tinymce.get('tinydemo1').getContent() 的内容直接$("#tinydemo1").html()是不行的,因为会变成如下图,也就是没有被prism.js格式化

image.png

这里你要用Prism的异步方法重新渲染一遍,一样的建议写在$("#tinydemo1").html()之后,都放在init_instance_callback{}里面

document.querySelectorAll("code").forEach(block => Prism.highlightElement(block)); //Prism 异步要加这段,不然提


链接:https://blog.csdn.net/xuelang532777032/article/details/125559295


温馨提示:

欢迎阅读本文章,觉得有用就多来支持一下,没有能帮到您,还有很多文章,希望有一天能帮到您。

tinymce prism代码高亮图文详解---相关文章


评论区

ddddd

程序员-学习的网站-想学习编程的码农可以进来看看

首页

视频教程

购物车

我的订单