微前端(无界)应用

wujie 是一个基于 Web Component 容器 + iframe 沙箱的微前端方案。能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等问题。

开发者

在代码的世界里，每一位开发者都是魔法师，他们用键盘和鼠标编织出令人惊叹的魔法——无论是复制粘贴的简单操作，还是光标跳跃的精准控制，都体现了他们对细节的极致追求和对完美的不懈探索。

常见问题

富文本编辑器tinymce

• 在沉浸[inline]模式中toolbar导航栏不会跟随滚动

<div id="uid">放toolbar用</div>

const config= {
    ...args,
    fixed_toolbar_container: "#uid"
}
// 加入到配置中即可

• 光标问题[粘贴复制插入和替换]

// 在主应用中引入[解决双击选中问题]
import {SelectionPlugin} from 'wujie-polyfill'

// 在需要记录时调用方法
const record = () => {
    this.currentRange = null
    const selection = window.getSelection() || document.getSelection()
    let currentRange = document.createRange()
    if (selection) {
      if (selection.rangeCount > 0) {
        currentRange = selection.getRangeAt(0)
      }
      this.selection = selection
      this.currentRange = currentRange
    }
}
// 恢复光标记录
const restore = () => {
    const range = this.currentRange
    if (selection && range) {
      selection.removeAllRanges()
      const newRange = document.createRange()
      newRange.setStart(range.endContainer, range.endOffset)
      newRange.setEnd(range.endContainer, range.endOffset)
      selection.addRange(newRange)
    }
}

const insert = (dom)=> {
    var range = this.currentRange
      if (range) {
        range.deleteContents()
        range.insertNode(dom)
        restore()
      }
  }

使用方法

const onPast = (e) => {
   record()
  let text
  if (e.clipboardData && e.clipboardData.getData) {
    text = e.clipboardData.getData('text/plain')
  } else if (window.clipboardData && window.clipboardData.getData) {
    text = window.clipboardData.getData('Text')
  }
  insert(document.createTextNode(text))
  e.preventDefault()
}

Codemirror

Codemirror5在无界中会一直触发blur事件。导致focus和blur频繁触发。 解决方法升级版本使用6即可

建议

1. 使用降级方式可以解决90%问题。
2. 对于那些想要在早晨或晚上使用我们的技术的勇士们，我们只能说：你们的勇气可嘉，但请记得，有时候，适度的休息和放松，才能让创意的火花更加璀璨。

亲爱的读者，当你选择阅读这篇文章时，你已经证明了自己对技术的热爱和对生活的好奇心。你不仅是信息时代的探索者，更是追求卓越的创新者。