Question

Hello stackoverflow社区，我对使用<object> html标记有疑问。以下是我想要做的事情的描述：

我正在使用summernote编辑器，但我希望编辑器中的每个更改都会以html页面的形式呈现给用户。我目前正在使用以下代码：

$('#summernote').summernote({
            placeholder: 'Hello bootstrap 4',
            tabsize: 2,
            height: 300,
            lang: 'pt-BR'
        });
        $("#summernote").on("summernote.change", function(e) { // callback as jquery custom event 
            console.log('it is changed');
            myFunction();
        });

        var i = 0;
        var dragging = false;
        $('#dragbar').mousedown(function(e) {
            e.preventDefault();

            dragging = true;
            var main = $('#main');
            var ghostbar = $('<div>', {
                id: 'ghostbar',
                css: {
                    height: main.outerHeight(),
                    top: main.offset().top,
                    left: main.offset().left
                }
            }).appendTo('body');

            $(document).mousemove(function(e) {
                ghostbar.css("left", e.pageX + 2);
            });

        });

        $(document).mouseup(function(e) {
            if (dragging) {
                var percentage = (e.pageX / window.innerWidth) * 100;
                var mainPercentage = 100 - percentage;

                $('#console').text("side:" + percentage + " main:" + mainPercentage);

                $('#sidebar').css("width", percentage + "%");
                $('#main').css("width", mainPercentage + "%");
                $('#ghostbar').remove();
                $(document).unbind('mousemove');
                dragging = false;
            }
        });

        function myFunction(data) {
            var text = $('#summernote').summernote('code');
            document.getElementById("demo").innerHTML = "<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>"; 
            console.log(document.getElementById("demo"));
            console.log(text);
        }

.clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

        #main {
            float: right;
            width: 50%;
        }

        #sidebar {
            width: 50%;
            float: left;
            overflow-y: hidden;
        }

        #dragbar {
            /*background-color: #a9a9a9;*/
            background: transparent;
            height: 100%;
            float: right;
            width: 3px;
            cursor: col-resize;
        }

        #ghostbar {
            width: 3px;
            background-color: #a9a9a9;
            opacity: 0.5;
            position: absolute;
            cursor: col-resize;
            z-index: 999
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Summernote Editor</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
    <script src="summernote-pt-BR.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <!--<div id="summernote"></div>-->
            <div id="sidebar" class="col">
                <span id="position"></span>
                <div id="dragbar">
                </div>
                sidebar
                <form method="post">
                    <textarea id="summernote" name="editordata"></textarea>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </form>
            </div>
           <div id="main">main 
               <p id="demo"></p>                
           </div>
        </div>
    </div>
</body>

</html>

但是我不想使用<p>标记和innerHtml，而是使用<object>标记，并且每天都会更改其内容。如果您有其他更好的解决方案，请随时提出建议。

注意：我已经尝试过使用标签，但不知何故使用此标签会阻碍我需要在编辑器和html查看器之间执行的调整大小。

注2：我是初学者，我的英语不好。如果出现问题没有意义，那就很抱歉。我用谷歌翻译来解释这个问题。

Answer 1

嗨拉斐尔 - 谢谢你澄清。

您的代码在iframe或对象标记中看起来不同的原因是由于CSS不同。当您使用iframe并动态设置源时，CSS来自用户代理样式表。标记不会继承父级的样式。目前，p标签中的CSS来自Bootstrap 4。

选项1：您可以自定义此元素上的CSS，使其在非Bootstrap上下文中显示一致。

选项2：如果您仍想更改代码，我认为您最好使用iframe而不是object代码，根据MDN文档和this SO thread上的讨论

将<p id="demo"></p>更改为<iframe id="demo"></iframe>，将myFunction更改为：

function myFunction(data) {
  var text = $('#summernote').summernote('code');            
  var frame=document.getElementById("demo");
  frame.srcdoc="<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>"; 
}

如果您支持IE11，Edge和Opera Mini（srcdoc is not supported there），则可以使用polyfill。

这条路线的最后一个考虑因素是性能 - 我在这方面找不到多少，但我怀疑设置p标签的innerHTML要比重新渲染iframe便宜得多。如果这成为问题，您可能需要调查并考虑减少更新间隔。

通过从代码编辑器

1 个答案: