Ueditor基本用法-kityformula-上传图片-手写公式myscript

关于ueditor的用法，以及kityformula的配置就跳过吧，网站已经记载的比较详细；

http://ueditor.baidu.com/website/kityformula.html

记录几个小设置：

 

 初始化ue    

var ue = UE.getEditor('editor', {

 

toolbars : [ [ 'simpleupload','kityformula' ] ],
wordCount : false,
elementPathEnabled : false,
initialFrameHeight : 160
});
ue.ready(function() {
        //to-do  用来初始化一些数据；

 

});

 

1 方法UE.getEditor(editor).getContent();//其中editor是初始化的ueditor对象值；

 

获取到的数据是html标签的，其中大概可以分为三种数据；

1.1 普通数据 ：简单处理即可取得（正则表达式，后者 html()方法等）

1.2 普通图片：包含在img标签中，通过src即可取得图片的内容，一般会转成base64

1.3 latex字符串生成的图片，与普通图片的区别即是多了一个dada-latex标签；

一段获取img和公式latex的代码：

 

也可以用正则表达式处理：一般是先处理过滤掉latex，再处理普通图片 ;此处不再赘述 ；

2 上传图片的处理：

https://blog.csdn.net/qxianx/article/details/100097771

3 Ueditor+myscript：

展示效果：

分两步：ueditor添加自定义按钮，myscript手写公式基本使用；

3.1ueditor添加自定义按钮

参考博客：

https://www.cnblogs.com/zhangans/p/6255179.html

ueditor文件目录：

3.1.1 打开ueditor.config.js，找到toolbars加入一个标签：

3.1.2 找到ueditor/lang/zh-cn/zh-cn.js 添加一个标题（鼠标放上去显示的内容）

3.1.3 ueditor.all.js btnCmds处添加上当前标签

3.1.4 这时候在js中初始化ueditor：

就可以看到加入的按钮标签了，此时点击不会有任何动作，需要在ueditor.all.js给当前按钮添加一个方法，具体不同按钮有不同的处理方法，此处我是这样处理的：

用的layer.js插件；

需要注意一点的是，所要添加的标签名称最好全部是小写，否则可能没法正常运行；

3.2 myscript

Github:https://github.com/MyScript/myscript-math-web

官网：https://dev.myscript.com/

基本步骤：

 

1 安装git，配好环境变量；

2 安装node;

3 安装 bower;

4 申请 application key和 HMAC key；

5 下载demo，运行相应命令获取运行环境运行程序；

这几步的最终结果是生成这么一个文件夹

里面的文件：

记录一下从github拉下来的Demo基本用法：

项目目录结构：

3.2.1 index.html配置key:

3.2.2初始化：

3.2.3 获取公式的latex和svg;

由于此处使用了ShadowDOM，我这里获取latex的方式：

获取之后怎么显示方法就很多了，可以转化成imgbase64，也可以通过MathJax来展示latex公式，或者直接显示svg,此处不赘述。