二次开发

DOM支持

---

1. DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
2. HTML DOM 定义了访问和操作 HTML 文档的标准方法。
3. DOM 以树结构表达 HTML 文档。

由于编辑器文档是基于HTML5结构，完全支持DOM编程接口。

DOM示例

---

//事件处理示例
editor.document.getElementById('id').addEventListener("click", (event) => {
    editor.document.getElementById('id').innerHTML = 'XXXXXX'
});

editor.document.getElementsByClassName('类名')；// 根据类名返回元素对象集合
editor.document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
editor.document.querySelectorAll('选择器'); // 根据指定选择器返回
...

参考HTML DOM 教程

内置Jqurey

---

editor.$()为文档内置Jqurey选择器, 允许您对病历文档HTML元素组或单个HTML元素进行操作, 用于复杂的文档处理及事件绑定等。

元素选择

//#id 选择器
editor.$('#id').html('显示文本')

//.class 选择器
editor.$('.class').html('显示文本')

//选取带有 href 属性的元素
editor.$("[href]").html('显示文本')

设置签名图片

//设计模式下插入图片，设置图片标识为　img_id

//表单模式下通过代码设置图片src属性
//方式1：图片URL
 editor.$('#img_id'). attr('src',  '...../imgs/0001.png')

//方式2：图片的BASE64编码
editor.$('#img_id'). attr('src',  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgA…ALCCwYlBzBAgQIECAAIEHgNkBLevR78cAAAAASUVORK5CYII=')


/**
 * 根据图片的url转换对应的base64值
 * @param { String } imageUrl 如：http://xxxx/xxx.png
 * @returns base64取值
 * @Note 注意：可能涉及图片访问有跨域问题，让后台解决即可。
 */
urlToBase64(imageUrl) {
    return new Promise((resolve, reject) => {
      let canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      let img = new Image()
      img.crossOrigin = 'Anonymous' // 解决Canvas.toDataURL 图片跨域问题
      img.src = imageUrl
      img.onload = function() {
        canvas.height = img.height
        canvas.width = img.width
        ctx.drawImage(img, 0, 0, img.width, img.height) // 参数可自定义
        const dataURL = canvas.toDataURL('image/jpeg', 1) // 获取Base64编码
        resolve(dataURL)
        canvas = null // 清除canvas元素
        img = null // 清除img元素
      }
      img.onerror = function() {
        reject(new Error('Could not load image at ' + imageUrl))
      }
    })
}

事件处理

editor.$("#id").click(function(){
  $(this).hide();
});

添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

editor.$("p").append("追加文本");

参考jQuery教程