Developement

DOM support

---

1. DOM (Document Object Model), translated as Document Object Model, is the programming interface for HTML and XML documents.
2. HTML DOM defines standard methods for accessing and manipulating HTML documents.
3. DOM expresses HTML documents in a tree structure.

Since the editor document is based on the HTML5 structure, it fully supports the DOM programming interface.

DOM example

---

//Event handling example
editor.document.getElementById('id').addEventListener("click", (event) => {
    editor.document.getElementById('id').innerHTML = 'XXXXXX'
});

editor.document.getElementsByClassName('class name'); // Returns a collection of element objects based on class name
editor.document.querySelector('selector'); // Return the first element object based on the specified selector
editor.document.querySelectorAll('selector'); // Return based on the specified selector
...

Refer to HTML DOM Tutorial

Built-in Jqurey

---

editor.$() has a built-in Jqurey selector for the document, allowing you to operate on medical record document HTML element groups or individual HTML elements for complex document processing and event binding.

Element selection

//#id selector
editor.$('#id').html('Display text')

//.class selector
editor.$('.class').html('Display text')

//Select elements with href attributes
editor.$("[href]").html('Display text')

Set signature image

//Insert a picture in design mode and set the picture ID to img_id

//Set the image src attribute through code in form mode
//Method 1: Image URL
 editor.$('#img_id'). attr('src', '...../imgs/0001.png')

//Method 2: BASE64 encoding of images
editor.$('#img_id'). attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgA…ALCCwYlBzBAgQIECAAIEHgNkBLevR78cAAAAASUVORK5CYII=')


/**
 * Convert the corresponding base64 value according to the URL of the image
 * @param { String } imageUrl such as: http://xxxx/xxx.png
 * @returns base64 value
 * @Note Note: There may be cross-domain issues related to image access, just let the background resolve them.
 */
urlToBase64(imageUrl) {
    return new Promise((resolve, reject) => {
      let canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      let img = new Image()
      img.crossOrigin = 'Anonymous' // Solve the cross-domain problem of Canvas.toDataURL images
      img.src = imageUrl
      img.onload = function() {
        canvas.height = img.height
        canvas.width = img.width
        ctx.drawImage(img, 0, 0, img.width, img.height) // Parameters can be customized
        const dataURL = canvas.toDataURL('image/jpeg', 1) // Get Base64 encoding
        resolve(dataURL)
        canvas = null // Clear canvas element
        img = null // Clear img element
      }
      img.onerror = function() {
        reject(new Error('Could not load image at ' + imageUrl))
      }
    })
}

Event handling

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

Add elements

• append() - Insert content at the end of the selected element
• prepend() - Insert content at the beginning of the selected element
• after() - insert content after the selected element
• before() - insert content before the selected element

editor.$("p").append("Append text");

Refer to jQuery Tutorial