添加CSS时自定义代码编辑器不工作并中断
我正在制作自己的自定义代码编辑器。我首先通过tutorialrepulblic：https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-inject-html-into-an-iframe-from-the-textaRea对此进行建模，我没有更改从文本区域获取文本并将其插入Iframe的JS，我只是添加了CSS，它就坏了。我已经删除了CSS，它工作，但当我添加它回来，它打破。有人能帮忙吗？我将在下面包含一个代码片段，以便您可以看到：
null
function updateIframe() {
var myFrame = $("#myframe").contents().find('body');
var textareaValue = $("textarea").val();
myFrame.html(textareaValue);
}body {
overflow: hidden;
}
.editor {
resize: none;
position: absolute;
top: 50px;
left: 0px;
width: 44%;
border: none;
background-color: #282c34;
height: 100%;
color: #fff;
font-size: 15px;
padding-left: 10px;
padding-right: 15px;
padding-top: 10px;
}
.run {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 150px;
background-color: #04aa6d;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.run:hover {
background-color: #fff;
color: #616161;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: #616161;
}
.result {
position: absolute;
right: 0px;
top: 0px;
width: 55%;
height: 100%;
border: none;
border-left: 15px solid #282c34;
}<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<iframe class="result" id="myframe"> RESULT HERE </iframe>
<textarea id="textarea" class="editor">
</textarea>
<div class="header">
<button class="run" onclick="updateIframe()">Run ⇛</button>
</div>
</body>
</html>null
我并不擅长jQuery，但我想我可以理解将文本插入Iframe代码是如何工作的，但我就是不理解添加CSS是如何破坏它的。谢谢！
共有1个答案
内容正在添加到iframe正文中，但隐藏在header div update the result css下面
.result {
position: absolute;
right: 0px;
top: 500px;
width: 55%;
height: 100%;
border: none;
color: black;
border-left: 15px solid #282c34;
}
-
问题内容： 我正在使用一个Android应用程序，该应用程序加载HTML页面并在Web视图中显示它。问题是我想添加我的自定义CSS（加载的HTML没有任何CSS或指向CSS的链接）。如何使用jsoup将自定义css添加到HTML代码中？我无法修改html。Webview之后如何打开它？谢谢 问题答案： 几种方法。您可以用来将HTML附加到元素上。 或者，用于向现有元素添加属性。这是一个添加到所有链
-
我正在尝试将web项目转换为Spring。我已经加入了Spring Security，但是旧的项目使用SHA-1转换成十六进制字符串来加密用户密码。
-
本文向大家介绍SpringBoot添加自定义拦截器的实现代码，包括了SpringBoot添加自定义拦截器的实现代码的使用技巧和注意事项，需要的朋友参考一下 在Controller层时，往往会需要校验或验证某些操作，而在每个Controller写重复代码，工作量比较大，这里在Springboot项目中 ，通过继承WebMvcConfigurerAdapter，添加拦截器。 1、WebMvcConfi
-
在“SQL 编辑器”选项卡，你可以创建和编辑视图的 SELECT 语句 SQL。Navicat Data Modeler 为编辑视图定义提供广泛的高级功能，例如：编辑代码功能、智能自动完成代码、设置 sql 格式及更多。 【提示】当你在视图创建工具创建视图，SELECT 语句将会自动生成。 美化 SQL（仅适用于非 Essentials 版） 若要格式化凌乱的 SQL 代码到一个结构良好的脚本，你
-
你马上就要写下第一行代码，现在该下载一个代码编辑器了！ 注意在之前章节你可能已经完成了这一步，如果那样的话，你可以直接进入下一章节。 有很多不同的编辑器，通常根据个人偏好选择。 大部分 Python程序员使用像 PyCharm这样复杂但是功能强大的IDE (集成开发环境)。 然而，这可能不太适合初学者。我们建议使用同样强大但是更为简单的编辑器。 下面是我们的建议，但是你可以随时咨询你的教练。那样会
-
程序员接触时间最长的就是代码编辑器。 代码编辑器主要分两种：IDE（集成开发环境）和轻量编辑器。很多人喜欢这两种各选一个。 IDE IDE（集成开发环境）是指用于管理整个项目的，具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的“开发环境”。 IDE 加载项目（通常包含很多文件），并且允许在不同文件之间导航（navigation）。IDE 还提供基于整个项目（不仅仅是打开的文件