0

我正在为我的应用程序使用编辑器 js（块样式编辑器）。您可以为此编辑器安装插件以扩展功能。在 GitHub 上有一个我试图在那里使用的数学块插件。但我无法让它工作。这里是我的代码：

首先我包含插件（它是 GitHub 上的 bundle.js）：

<script type="text/javascript" src="./plugins/editorjs/blocks/math.js"></script><!-- Math -->

然后我只是按照正常的设置（适用于其他官方插件）

var editor = new EditorJS({
   ...

   tools: {
   ...
   Math: {
     class: Math,
   },
  }

  ...
});

当我尝试输入某些内容时，我得到了错误TypeError: Math.floor is not a function。我错过了什么？

编辑

https://flaming-cl.github.io/editorPlugin/

有这个例子有效，但我不明白，有这么多文件。我需要更像一个基本示例，只包含必要的 CDN 文件。

4

1 回答 1

0

好的，我刚刚用Katex重新制作了插件，现在可以正常工作了。这是我的代码，也许它可以帮助某人。请记住，此代码可能有错误等...

正式的.js

class Formula {
  static get toolbox() {
    return {
      title: 'Formula',
      icon: '<?xml version="1.0" encoding="iso-8859-1"?>\r\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r\n<svg version="1.1" id="fxicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r\n\t width="15px" height="15px" viewBox="0 0 142.514 142.514" style="enable-background:new 0 0 142.514 142.514;"\r\n\t xml:space="preserve">\r\n<g>\r\n\t<g>\r\n\t\t<path d="M34.367,142.514c11.645,0,17.827-10.4,19.645-16.544c0.029-0.097,0.056-0.196,0.081-0.297\r\n\t\t\tc4.236-17.545,10.984-45.353,15.983-65.58h17.886c3.363,0,6.09-2.726,6.09-6.09c0-3.364-2.727-6.09-6.09-6.09H73.103\r\n\t\t\tc1.6-6.373,2.771-10.912,3.232-12.461l0.512-1.734c1.888-6.443,6.309-21.535,13.146-21.535c6.34,0,7.285,9.764,7.328,10.236\r\n\t\t\tc0.27,3.343,3.186,5.868,6.537,5.579c3.354-0.256,5.864-3.187,5.605-6.539C108.894,14.036,104.087,0,89.991,0\r\n\t\t\tC74.03,0,68.038,20.458,65.159,30.292l-0.49,1.659c-0.585,1.946-2.12,7.942-4.122,15.962H39.239c-3.364,0-6.09,2.726-6.09,6.09\r\n\t\t\tc0,3.364,2.726,6.09,6.09,6.09H57.53c-6.253,25.362-14.334,58.815-15.223,62.498c-0.332,0.965-2.829,7.742-7.937,7.742\r\n\t\t\tc-7.8,0-11.177-10.948-11.204-11.03c-0.936-3.229-4.305-5.098-7.544-4.156c-3.23,0.937-5.092,4.314-4.156,7.545\r\n\t\t\tC13.597,130.053,20.816,142.514,34.367,142.514z"/>\r\n\t\t<path d="M124.685,126.809c3.589,0,6.605-2.549,6.605-6.607c0-1.885-0.754-3.586-2.359-5.474l-12.646-14.534l12.271-14.346\r\n\t\t\tc1.132-1.416,1.98-2.926,1.98-4.908c0-3.59-2.927-6.231-6.703-6.231c-2.547,0-4.527,1.604-6.229,3.684l-9.531,12.454L98.73,78.391\r\n\t\t\tc-1.89-2.357-3.869-3.682-6.7-3.682c-3.59,0-6.607,2.551-6.607,6.609c0,1.885,0.756,3.586,2.357,5.471l11.799,13.592\r\n\t\t\tL86.647,115.67c-1.227,1.416-1.98,2.926-1.98,4.908c0,3.589,2.926,6.229,6.699,6.229c2.549,0,4.53-1.604,6.229-3.682l10.19-13.4\r\n\t\t\tl10.193,13.4C119.872,125.488,121.854,126.809,124.685,126.809z"/>\r\n\t</g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n</svg>'
    };
  }

  constructor({data}){
    this.data = data;
  }

  render(){
    this.wrapper = document.createElement('div');
    const input = document.createElement('input');
    const inner = document.createElement('div');

    this.wrapper.classList.add('formula-block');
    this.wrapper.appendChild(inner).classList.add('inner-formula-wrapper');
    this.wrapper.appendChild(input).classList.add('cdx-input');

    input.placeholder = 'Enter a LaText formala here...';
    var value = this.data && this.data.text ? this.data.text : '';
    input.value = value;

    //.replace(/\\/g,"\\\\");

    this._createFormala(this.data && this.data.text ? this.data.text : 'eqation: ');


    var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
    for(event of eventList) {
        input.addEventListener(event, (event) => {
          this._createFormala(input.value.replace(/\$/g, ''));
        });
    }


    inner.onclick = function() {
      this.closest('.formula-block').classList.toggle('is-edit');
    }




    return this.wrapper;
  }

  _createFormala(text){
    const input = document.createElement('input');input.value = text;

    var rendered_formula = katex.renderToString(text, {
        throwOnError: false
    });

    input.placeholder = 'Caption...';

    this.wrapper.getElementsByClassName('inner-formula-wrapper').item(0).innerHTML = rendered_formula;

  }

  save(blockContent){
    const input = blockContent.querySelector('input');

    return {
      text: input.value.replace(/\$/g, '')
    }
  }

  validate(savedData){
    if (!savedData.text.trim()){
      return false;
    }

    return true;
  }
}

工具列表配置

var editor = EditorJS({
  ...
  
  tools: {
    ...
    formula: Formula,
  }
  
  ...
});

加载 Katext 文件和formala.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script type="text/javascript" src="./plugins/editorjs/blocks/formula.js"></script><!-- Formula -->

数据输入使用

  {
      "type": "formula",
      "data": {
          "text": '\\pm\\sqrt{a^2 + b^2} \\newline a ',
      }
  },
于 2020-09-27T20:49:19.023 回答