tinymce富文本编辑器设置插入script和html代码

NO.1
使用场景

插入交互图表

目前博客中逐步设置自定义标题,图片边框和阴影,代码高亮等

一些常规元素,emoji,特殊字符,表格,tinymce编辑器已有自带插件

剩下音频,视频,导图等一些多媒体元素待定义

相较于一些图表类图片,个人更新倾向于交互类控件

这是基于web3.0或者博客x.0的一种趋势,如哔哩哔哩的互动视频等

NO.2
tinymce设置

在init方法中添加以下设置

extended_valid_elements: `svg[xmlns|version|class],circle[cx|cy|r|stroke|stroke-width|fill|class],style,link[href|rel],script[src|async|defer|type|charset]`,
custom_elements: 'style,link,~link,script',
valid_elements: '*[*]',
valid_children: '*[*]',

设置允许插入svg,script,link等标签

本文使用的编辑器为tinymce 5.0 ,默认script和svg都会被自动清除,基于浏览器等安全策略考虑

NO.3
插入图表

代码演示

<pre style="padding: 0; margin: 0; background-color: #fff; border: none;">
<svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.line-chart')

  new chartXkcd.Line(svg, {
    title: 'Monthly income of an indie developer',
    xLabel: 'Month',
    yLabel: '$ Dollars',
    data: {
      labels:['1', '2', '3', '4', '5', '6','7', '8', '9', '10'],
      datasets: [{
        label: 'Plan',
        data: [30, 70, 200, 300, 500 ,800, 1500, 2900, 5000, 8000],
      }, {
        label: 'Reality',
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
      }]
    },
    options: {}
  });
</script>

</pre>

在代码外加上pre标签,是为了不让tinymce编辑器自动加上p标签和br换行标签,导致html代码失效

目前没有找到好的解决方案,只能使用pre标签保持原有的代码格式,经测试,本博客中正常渲染和显示

手绘图表官方地址

https://github.com/timqian/chart.xkcd

NO.4
手绘图表

以下为官网的效果,代码参考上述代码




NO.5
Tips

以前有写过wordpress简码效果,实现了3D,手绘,css动画,粒子背景,代码高亮,打字机等效果

但是因为需要配合wordpress插件,且受限插件使用json5的数据格式通信,能实现的效果不多,编辑文章也比较繁琐,后期插件不能随意更改,还要保持向前后兼容

现在使用electron开发高度自定义的编辑器,实现python图片压缩,图床上传,API推送,以及tinymce一系列自定义功能,如插入svg和html,操作更加方便和自由

旧文传送门

手绘图表简码~[dsx_xkcd_?]

新版的wordpress古腾堡编辑器确实不错,但是无法习惯,无论是旧的还是新的,可以尝试自己开发的,真正用到的功能其实并不多,适合就行

END.

1 Reply to “tinymce富文本编辑器设置插入script和html代码”

发表评论

邮箱地址不会被公开。 必填项已用*标注