Skip to main content

Development Guide

About 1 min

Download code

  1. Editor program

https://www.x-emr.cn/js/editor.jsopen in new window

  1. Download third-party open source js files

File Directory

├─public
│ editor.html //Editor loading page (relative path can be modified)
├─js
│ editor.js //Editor main program code (required)
└ sell            
       jquery //Jquery and other third-party JS codes

Local reference

  1. Just modify the relative path in editor.html
  2. Modify the option in editor.html. For detailed settings, please refer to Configuration Item

You can also modify the following code in your own html view file

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="./img/favicon.svg" type="image/svg+xml"/>
        <link rel="stylesheet" href="./vender/jquery/zTreeStyle/zTreeStyle.css" type="text/css"> <!--Only design mode needs to be referenced-->
        <script src = "./vender/jquery/jquery.js"></script><!--must be quoted-->
        <script src = "./vender/jquery/jquery.ztree.core.min.js"></script> <!--Only design mode needs to be referenced-->
        <script src = "./vender/jquery/jquery.ztree.exedit.min.js"></script><!--Only design mode requires a reference-->
        <script src = "./vender/jquery/jquery.ztree.exhide.min.js"></script><!--Only design mode requires a reference-->
        <script src = "/vender/fabric.js"></script><!--Only modification of image annotation requires citation-->
        <script src = "/vender/codemirror.js"></script><!--Only code scripts need to be referenced-->
        <script src="./js/editor.js"></script><!--must be quoted-->
        <script>
          $(function() {
            //Configuration items do not need to be set, default settings will be used
            let option = {
              license: 'XXXXXXXXXXXXXXXXXX', //Authorization string
              mode: 'design'//Design mode
            }
            //Editor initialization
            editor.init(option)
            //Specify the document ID to load the medical record document
            editor.loadUrl('./doc/100.html','100').then(function(){
                //Set text
                editor.setBindObject('Jiang Hualiang','patientName')
            })
          })
      </script>
    </head>
    <body>
        <!-- The default id is editor -->
        <div id="editor" style="width:100%; height:100%;"></div>
    </body>
</html>

VUE framework integration

  1. vue3 version reference x-emr-vueopen in new window code
  2. vue2 version reference x-emr-vue2open in new window code

Other framework integration

The principle is general: use IFRAME for embedding to isolate the interaction between the application system framework code and the editor code.