跳至主要內容

引用步骤

大约 2 分钟

提示

开发过程发现问题，请在Gitee新建问题open in new window反馈，谢谢！

第一步：下载代码

  1. 编辑器主程序

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

  1. 下载第三方开源js文件

下载 x-emr-vue.zipopen in new window，并解压缩到本地磁盘。

第二步：复制文件

复制解压文件内部的 editor.html 和 vender 文件夹到本地工程的静态资源目录。

复制好的文件夹结构如下示例：

├─public
│      editor.html  //编辑器加载页面          (可修改相对路径)
├─js
│      editor.js    //编辑器主程序代码        (必选)
└ vender            
       jquery       //Jquery等第三方JS代码

第三步：修改路径&配置

  1. 修改 editor.html中的相对路径即可
  2. 修改 editor.html中的 option，详细设置参考配置项

也可以在本地工程的Web视图文件中编辑以下代码，例如：JSP，PHP文件，模板引擎Thymeleaf模板文件，Velocity模板文件，ASP.NET框架的 .aspx 文件等

<!DOCTYPE html>
<html>
    <head>
        <!--如果不配置，编辑器默认背景色为 #f3f5f7 -->
        <style>
          :root {--background-color: #f3f5f7;}  
        </style>
        <link rel="shortcut icon" href="./img/favicon.svg" type="image/svg+xml"/>
        <link rel="stylesheet" href="./vender/jquery/zTreeStyle/zTreeStyle.css" type="text/css"> <!--仅设计模式需要引用-->
        <script src = "./vender/jquery/jquery.js"></script><!--必须引用-->
        <script src = "./vender/date97/WdatePicker.js"></script><!--必须引用-->
        <script src = "./vender/jquery/jquery.ztree.core.min.js"></script> <!--仅设计模式需要引用-->
        <script src = "./vender/jquery/jquery.ztree.exedit.min.js"></script><!--仅设计模式需要引用-->
        <script src = "./vender/jquery/jquery.ztree.exhide.min.js"></script><!--仅设计模式需要引用-->
        <script src = "/vender/fabric.js"></script><!--仅修改图片标注需要引用-->
        <script src = "/vender/codemirror.js"></script><!--仅代码脚本需要引用-->
        <script src="./js/editor.js"></script><!--必须引用-->
        <script>
          $(function() {
            //配置项可以不设置，会使用默认设置
            let option = {
              license: 'XXXXXXXXXXXXXXXXXX', //授权字符串
              mode: 'design'//设计模式
            }
            //编辑器初始化
            editor.init(option)
            
          })
      </script>
    </head>
    <body>
        <!-- 默认id 为editor -->
        <div id="editor" style="width:100%; height:100%;"></div>
    </body>
</html>

VUE框架集成

  1. vue3版本参考 x-emr-vueopen in new window 代码
  2. vue2版本参考 x-emr-vue2open in new window 代码

其他框架集成

原理通用：使用 IFRAME 进行嵌入，隔离应用系统框架的代码和编辑器代码的相互影响。