阅读 264

最全Vue接入富文本ckeditor4+mathtype+latex集成指南

前言

        一路想来,调研此集成方案可真的是心酸,各种资料找,技术群问,官方文档看了技术遍,终于有了目前比较良好的想过了,虽然很心酸,但是也学到了很多的东西,再次也感谢技术群友的帮助,特别感谢一位群友(南京+CK4+NG)对于我的问题有问必答,也感谢自己调研此富文本付出的心血与坚持

1.基础引入

 1.在官网下载https://ckeditor.com/ckeditor-4/download/ 按照需求选择版本,我选择的是标准版(Standard Package)   (注意: ck4 (ckeditor4简称) 是支持IE,但是ck5是不支持IE的,ck4 vue版本有对应的npm来可以支持vue,但是遇到比较多的坑,所以选择ck4而不是Vue版本的)

2.解压后把对应的包放在static目录下(图中有解释比较重要的几个文件的作用)
3.由于需求全局变量,所以需要在项目中配置了CKEDITOR,如图所示(后续需要使用)
4.在src/components/ck/index.vue 此文件用于封装富文本插件(不多逼逼,代码如下)

5.实现的效果如下:(一个简单的ckeditor4富文本就搭建好了,)

2.显示placeholder

1.可以在github:(github.com/crazyu/ck4)上下载,下载好的文件放在static/ckeditor/plugins 目录里面 2.在static/ckeditor/pligins配置 confighelper

3.配置latex命令

1.下载mathjax插件包 官方插件市场或者是自定义配置插件选择 2.static/ckeditor/plugin 配置 config.mathJaxLib = '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'

   如果有任何疑问:请联系 qq:1196038559
   (后续代码会发布在github:(github.com/crazyu/ck4)上面,欢迎评论提建议:)