Loading...
image
alpha

代码写的好,bug改到老

CKEditor富文本编辑器使用 Katex 插入数学公式(无限接近the-state-of-art)

alpha    2020-02-03 14:18

        富文本编辑器是基于web的文本编辑器,其功能同样可以很强大,一些功能比较强大的富文本编辑器还被称为在线的office word。CKEditor是波兰的开源的富文本编辑器,其功能非常强大,支持内容编辑和文件上传,最关键的是它是不收费的。在网页中的进行公示编辑比较麻烦,使用图片固然可以解决一时的问题,但是修改起来比较麻烦,而比较好的方法及时使用Latex。
        CKEditor 官网给出的插件商店里提供了几款公式编辑器,大概比较一下:

  • Equation Editor : 功能花哨,生成图片,关键是存储在服务器端的。
  • Math Editor :最近更新2013年,没配置成功
  • WIRIS - Math & science editor:支持手写公式,收费产品
  • MathEx:配置麻烦,直接略过了
  • Texzilla :用过一段时间,输入之后以字符串形式显示,预览的时候需要 mathjax 支持,受制于人。
        某天,突然发现 Katex 也是CKEditor的一款插件,试了一下,按照官网提供的说明,下载插件Katex的压缩包,解压,放置到 plugins 里。运行报错提示需要katex的库文件。需要配置 css 和 js 的路径。这里就比较困难了,官网没提供这两个库。Github上走起,下载了源码,将 dist 文件夹移动到 plugins/katex 下,然后配置路径:
config.extraPlugins = 'katex';

// [Required] Pathes to the CSS and JS files of katex library.
config.katexLibCss = './ckeditor/4.11/plugins/katex/dist/katex.min.css';
config.katexLibJs = './ckeditor/4.11/plugins/katex/dist/katex.min.js';
此处配置请根据实际情况修改。其实,配置服务器路径也可以(以下可选):
https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css
https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js
然后在配置ckeditor工具栏时候,修改如下代码:
var config = {
   toolbar: [
        [
            'Font', 'FontSize',
            'Bold', 'Italic', 'Blockquote', 'NumberedList', 'BulletedList',
            'Smiley', 'Image', 'Link', 'Katex',
            'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
            'CodeSnippet','crossreference', 'Maximize'
        ]
    ]
};
这里一定要注意,工具栏中请填写 “Katex”,而不是 ‘katex’,或者 ‘KaTeX’,否则工具栏是不会加载出来的。
这里配置完成后,工具栏就会显示插入数学公式的小图标了。
 

        写好的公式,会以公式的形式显示在编辑器内部(这点比texzilla好,texzilla以字符串形式显示,看起来比较乱)。在页面预览的时候,需要引入如下代码:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

参考资料:
  1. https://ckeditor.com/cke4/addon/katex
  2. https://www.javascriptcn.com/read-32616.html
  3. https://katex.org/
  4. https://www.jianshu.com/p/e941c1e03d0b




 
Last Modified: 2020-02-03 14:30
Views: 83

[[total]] comments

Post your comment
  1. [[item.time]]
    [[item.user.username]] [[item.floor]]Floor
  2. Click to load more...
  3. Post your comment