百度 ueditor 一个编辑器实例，如何同时显示两个编辑区域？

微wx笑 2025-04-26【前端开发】11 0 0关键字：百度 Ueditor 编辑器

百度 ueditor 一个编辑器实例，如何同时显示两个编辑区域？看看豆包给出的答案：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="wid

百度 ueditor 一个编辑器实例，如何同时显示两个编辑区域？UTT无知

UTT无知

看看豆包给出的答案：UTT无知

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两个 UEditor 编辑区域</title>
    <!-- 引入 UEditor 的 CSS 文件 -->
    <link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css">
</head>
 
<body>
    <!-- 第一个编辑区域的容器 -->
    <div id="editor1" style="width: 800px; height: 300px;"></div>
    <!-- 第二个编辑区域的容器 -->
    <div id="editor2" style="width: 800px; height: 300px;"></div>
 
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 UEditor 的配置文件 -->
    <script src="ueditor/ueditor.config.js"></script>
    <!-- 引入 UEditor 的核心文件 -->
    <script src="ueditor/ueditor.all.min.js"></script>
    <script>
        // 初始化第一个编辑器实例
        var editor1 = UE.getEditor('editor1');
        // 初始化第二个编辑器实例
        var editor2 = UE.getEditor('editor2');
    </script>
</body>
 
</html>

它这个方案是搞两个编辑器的实例出来；UTT无知

我要求的是一个编辑器实例，如何同时显示两个编辑区域，看来还得靠自己；UTT无知

先看一下效果：UTT无知

UTT无知

实现方法相关代码：UTT无知

UE.registerUI('split_editor', function(editor, uiName) {
    editor.registerCommand(uiName, {
        execCommand: function() {
            var ueditor_0 = document.getElementById("ueditor_0");
            if (!ueditor_0){
                console.log("split_editor 失败，document.getElementById(\"ueditor_0\") 为空");
                return false;
            }
           
            var ueditor_1 = document.getElementById("ueditor_1");
            if (ueditor_1){
              if (ueditor_1.style.display === "none"){
                  ueditor_0.width = "50%";
                  ueditor_1.style.display = "";
                  ueditor_1.width = "49.8%";
              }else{
                  ueditor_1.style.display = "none";
                  ueditor_0.width = "100%";
              }
            }else{
              ueditor_0.width = "50%";
              ueditor_1 = document.createElement("iframe");
              ueditor_1.id = "ueditor_1";
              ueditor_1.width = "49.8%";
              ueditor_1.height = "100%";
              ueditor_1.frameBorder = "0";
              ueditor_1.style.borderLeftWidth = "1px";
              ueditor_1.style.borderLeftColor = "#D0D0D0";
              ueditor_1.style.borderLeftStyle = "solid";
              ueditor_1.src = "javascript:void(function(){document.open();document.write(\"<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' class='view'><head><style type='text/css'>.view{padding:0;word-wrap:break-word;cursor:text;height:90%;} body{margin:8px;font-family:sans-serif;font-size:16px;}p{margin:5px 0;}</style><link rel='stylesheet' type='text/css' href='https://ivu4e.cn/e/extend/ueditor/themes/iframe.css'/></head><body class='view' contenteditable='true'></body><script type='text/javascript' id='_initialScript'>setTimeout(function(){editor = window.parent.UE.instants['ueditorInstant0'];document.body.innerHTML = editor.getContent();},0);var _tmpScript = document.getElementById('_initialScript');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>\");document.close();}())";
              document.getElementById("edui1_iframeholder").append(ueditor_1);
            }
        }
    });
    var btn = new UE.ui.Button({
        name: uiName,
        title: "将编辑区域一分为二",
        cssRules: 'background-position: -840px -76px;',
        onclick: function() {
            editor.execCommand(uiName);
        }
    });
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    return btn;
});