通过从代码编辑器显示html来动态更改标签对象
[英]Tag object being changed dynamically by displaying html from a code editor
问题描述
Hello stackoverflow community, I have a question regarding the use of the <object> html tag. 
您好stackoverflow社区，我有一个关于<object> html标记的使用的问题。 Below is a description of what I want to do: 下面是我要做什么的描述：
I am using the summernote editor, however I would like every change within the editor to be presented to the user as the html page will be. 我正在使用summernote编辑器，但是我希望编辑器中的所有更改都将呈现给用户，就像html页面一样。 I am currently using the following code: 我目前正在使用以下代码：
$('#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>
But instead of using the <p> tag along with innerHtml, I'd like to use the <object> tag, and its contents being changed daily. 但是，我不想使用<p>标记与innerHtml一起使用，而是要使用<object>标记，并且其内容每天都会更改。 If you have other better solutions, feel free to make suggestions. 如果您还有其他更好的解决方案，请随时提出建议。
Note: I have already tried using the tag but somehow using this tag hinders the resize that I need to perform between the editor and html viewer. 注意：我已经尝试使用标签，但是以某种方式使用此标签会妨碍在编辑器和html查看器之间执行调整大小。
Note 2: I'm a beginner, and my English is not good. 注意2：我是新手，英语也不好。 So sorry if something went wrong without making sense. 很抱歉，如果出现问题而没有道理。 I used Google translate to explain the issue. 我用Google翻译来解释这个问题。
1 个解决方案
解决方案1
0 2018-03-05 14:19:54
Hi Rafael — thanks for clarifying. 您好Rafael-感谢您的澄清。
The reason your code looks different in the iframe or object tags is due to the differing CSS. 您的代码在iframe或对象标记中看起来不同的原因是由于CSS的不同。 When you use an iframe and set the source dynamically, the CSS comes from the User Agent Stylesheet. 使用iframe并动态设置源时，CSS来自用户代理样式表。 The tag does not inherit the parent's styles. 标记不会继承父项的样式。 Currently, your CSS in the p tag is from Bootstrap 4. 当前，p标签中的CSS来自Bootstrap 4。
Option 1: You could customize the CSS on this element to make it appear consistent in a non-Bootstrap context. 选项1：您可以在此元素上自定义CSS，以使其在非Bootstrap上下文中显得一致。
Option 2: If you still want to change tags, I think you are better off using an iframe instead of an object tag, per the MDN docs and the discussion on this SO thread . 选项2：如果您仍想更改标签，那么我认为，根据MDN文档和对此SO线程的讨论，最好使用iframe而不是对象标签。
Change <p id="demo"></p> to <iframe id="demo"></iframe> , and your myFunction to: 将<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>";
}
If you support IE11, Edge, and Opera Mini ( srcdoc is not supported there ) you can use a polyfill . 如果您支持IE11，Edge和Opera Mini（ 那里不支持srcdoc ），则可以使用polyfill 。
One final consideration with this route is performance — I couldn't find much on this, but I suspect that setting the innerHTML of your p tag is far less expensive than re-rendering an iframe. 使用此路由的最后一个考虑因素是性能-我在这方面找不到很多东西，但是我怀疑设置p标签的innerHTML比重新渲染iframe便宜得多。 You might want to investigate and consider reducing the update interval if this becomes a problem. 您可能希望进行调查，并考虑在出现问题时缩短更新间隔。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.