添加 CSS 时自定义代码编辑器无法正常工作和中断
Posted
技术标签:
【中文标题】添加 CSS 时自定义代码编辑器无法正常工作和中断【英文标题】：Custom code editor not working and breaks when adding CSS 【发布时间】：2021-07-22 22:49:49 【问题描述】：我正在制作自己的自定义代码编辑器。我首先通过 TutorialRepulblic 对它进行建模： https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-inject-html-into-an-iframe-from-the-textarea 我没有更改从文本区域获取文本并将其插入 Iframe 的 JS，我只是添加了 CSS，它就坏了。我已经删除了 CSS 并且它可以工作，但是当我重新添加它时它会中断。任何人都可以帮忙吗？我将在下面包含一个代码 sn-p 以便您查看：
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>我对 jQuery 不是很好，但我想我可以理解将文本插入 iframe 的代码是如何工作的，但我只是不明白添加 CSS 是如何破坏它的。谢谢！
【问题讨论】：
【参考方案1】：内容正在添加到 iframe 正文中，但隐藏在标题 div 下方 更新结果css
.result
position: absolute;
right: 0px;
top: 500px;
width: 55%;
height: 100%;
border: none;
color: black;
border-left: 15px solid #282c34;
【讨论】：
非常感谢，我想我从来没有想过，我以为我的 jQuery 可能有问题！以上是关于添加 CSS 时自定义代码编辑器无法正常工作和中断的主要内容，如果未能解决你的问题，请参考以下文章
编辑单元格时自定义 UITableViewCell 反向缩进
编辑 tableView 时自定义单元格 imageView 移到左侧