推荐一个html富文本转成unity富文本的js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <!-- 引入 css -->
  <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  <!-- 引入 js -->
  <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/richtext-parse-to-unity-egret"></script>
</head>
<body style="padding: 60px">
  <div style="z-index:999">
    <div id="div2"></div>
    <div id="div1" style="height: 500px;"></div>
  </div>


  <button id="transfer">转化</button>

  <div style="display: flex;">
    <div style="flex:1">
      unity:
      <textarea style="width: 100%; height: 300px;" id="unity"></textarea>
    </div>
    <div style="flex:1">
      egret:
      <textarea style="width: 100%; height: 300px;" id="egret"></textarea>
    </div>
  </div>

  <script>
    const E = window.wangEditor

    const editor = E.createEditor({
      selector: '#div1',
      config: {
        MENU_CONF: {},
        placeholder: '请输入内容',
      },
      mode: 'simple'
    })

    const toolbar = E.createToolbar({
      editor,
      selector: '#div2',
      config: {
        toolbarKeys: [
          'bold',
          'italic',
          'underline',
          'color',
          '|',
          'fontSize',
          '|', 
          'lineHeight',
          '|', 
          'justifyLeft',
          'justifyCenter',
          'justifyRight',
          '|', 
          'undo',
          'redo',
          '|', 
          'clearStyle',
          'emotion',
          'fullScreen',
        ],
      }
    })


    document.getElementById('transfer').addEventListener('click', function() {
      const htmlStr = editor.getHtml()
	  console.log(htmlStr)
      const { parseEgret, parseUnity } = window['richtext-parse-to-unity-egret']
      const set = {
        sizeMap: {
          1: 36,
          2: 28,
          3: 24,
          4: 20,
          5: 16,
          6: 14,
          7: 12,
        }
      }
      document.getElementById('unity').value = parseUnity(htmlStr, set)
      document.getElementById('egret').value = parseEgret(htmlStr, set)
    })

  </script>
</body>
</html>

image

posted @ 2025-12-09 08:59  朝阳1  阅读(4)  评论(0)    收藏  举报