Блог

Я использую editor js (редактор в стиле блоков) для своего приложения. Вы можете установить плагины для этого редактора, чтобы расширить его функциональность. На GitHub есть плагин math block, который я пытался там использовать. Но я не могу заставить его работать. Ниже приведен мой код:

Сначала я включаю плагин (который bundle.js на GitHub):

 <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.

Хорошо, я только что переделал плагин с помощью Katex, и теперь он работает нормально. Вот мой код, может быть, он кому-то поможет. Пожалуйста, имейте в виду, что в этом коде могут быть ошибки и т. Д…

formala.js

 class Formula {
  static get toolbox() {
    return {
      title: 'Formula',
      icon: '<?xml version="1.0" encoding="iso-8859-1"?>rn<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">rn<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"rnt width="15px" height="15px" viewBox="0 0 142.514 142.514" style="enable-background:new 0 0 142.514 142.514;"rnt xml:space="preserve">rn<g>rnt<g>rntt<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.297rntttc4.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.103rntttc1.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.236rntttc0.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,0rntttC74.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.09rntttc0,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.742rntttc-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.545rntttC13.597,130.053,20.816,142.514,34.367,142.514z"/>rntt<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.346rntttc1.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.391rntttc-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.592rntttL86.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.4rntttl10.193,13.4C119.872,125.488,121.854,126.809,124.685,126.809z"/>rnt</g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn<g>rn</g>rn</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 amp;amp; this.data.text ? this.data.text : '';
    input.value = value;

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

    this._createFormala(this.data amp;amp; 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 ',
      }
  },