introduce

Haven’t updated articles, had been in CSDN written above, the change to the nuggets, recently because the job need to study the rich text editor, found on the market many editors are old, so chose wangEditor, this project has more to 4 X version, use the TS refactoring, the editor is beautiful and lightweight, Two custom menus are added to this foundation, namely formula editor KityFormula and formula pad myScript-math-Web.

Finish the demo first

  • Github:github.com/mirror29/wa…

wangEditor

  • Website: www.wangEditor.com
  • Documents: www.wangEditor.com/doc

kityformula

  • Github:github.com/fex-team/ki…

myscript-math-web

  • Github:github.com/MyScript/my…
  • Liverpoolfc.tv: developer.myscript.com/

Hit the pit

The editor demo

I am a direct Clone project example, github address github.com/wangeditor-…

run

git clone https://github.com/wangeditor-team/wangEdior-with-vue.git
Copy the code

Kityformula plug-in

Kityformula project is a bit old. As it is an open source project of Baidu, I only found that the plug-in was integrated into Baidu UEditor. When I looked at the UEditor source code, I found that the plug-in adopted the mode of IFrame, which gave me the idea of integrating into wangEditor. It took some time to export the formula. Originally, I used the API execCommand(‘get.image.data’) to obtain the base64 image generated by the formula, but for some unknown reasons, I couldn’t get it, so I changed to latex online formula image transfer. Editor.cmd. do should also be used when content is inserted into the editor, but the console failed to close the popup window when demo was running, so EDITor.txt.append was used instead, my own project ran without any problem, I wonder if it is because my own project is TS.

Myscript – math – web plug-in

The operation of this project requires the installation of polymer to run

npm install -g polymer-cli
Copy the code

The installation

npm install myscript-math-web
Copy the code

Create the index.html file

<html>
    <head>
        <script type="module" src="node_modules/myscript-math-web/myscript-math-web.js"></script> 
        <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 
        <style>
            myscript-math-web {
                height: 100vh;
            }
        </style> 
    </head>
    <body>
      <myscript-math-web
        applicationkey="YOUR MYSCRIPT DEVELOPER APPLICATION KEY"
        hmackey="YOUR MYSCRIPT DEVELOPER HMAC KEY">
      </myscript-math-web>
    </body>
</html>
Copy the code

Need to pay attention to this plugin needs our application applicationkey hmackey, with application address is developer.myscript.com/getting-sta…

Fill in the necessary information and send it to the mailbox. You need to set up the operation activation within 10 minutes of the project

And then run it

polymer serve
Copy the code

You have to package it if you want to put it in your own project

polymer build
Copy the code

I can access it locally by opening index.html. My own project is already packaged, and the example on Giuhub runs by simply setting ApplicationKey and hmacKey in public-myScriptmath-index.html

conclusion

This two plug-in related information is relatively little, fortunately, I have gradually adapted to read the source code, according to the source code and other people’s project examples can be made by themselves, but in the process of learning to find their English reading ability still need to improve, for myscript-Math-Web this foreign plug-in, browsing documents will be more painful