Javascript 我能'；t下载到HTML中
我试着制作一个html编辑器，我得到了它的制作，但我正在尝试制作它，这样你就可以下载它，我也得到了它，但它不是作为html出来的，而是纯文本。如果你能找到答案，请帮我。当我从编辑器下载一些东西时，命名工作，编辑器工作，但当它显示时，它只显示编辑器文本中的内容，检查源代码似乎是编码器中的一些内容，但我不确定 这是代码，如果有人能找出我做错了什么，请帮助我。我已经尝试了很多事情，花了很长时间在这件事上，这是不可能的。另外，我不喜欢使用框架，所以请尽量不要发送任何涉及jquery或其他内容的内容 如果你想的话，你也可以使用我的html编辑器，但我只是想使用它，这样我就可以在学校的chromebook上编写代码，因为他们什么都阻止了我。另外，如果你有任何建议，请告诉我，因为我总是愿意学习新的代码 顺便说一句，我不是最初制作编辑器的人，我只是使用了它，因为它是我唯一可以使用的不需要互联网的编辑器，我只编辑了一点，下载功能也是由其他人制作的，我再次编辑了一点，以便它可以尝试与编辑器一起工作 引证 编辑- 下载功能-https://jsfiddle.net/TzVd3/2/Javascript 我能'；t下载到HTML中,javascript,html,css,iframe,Javascript,Html,Css,Iframe,我试着制作一个html编辑器，我得到了它的制作，但我正在尝试制作它，这样你就可以下载它，我也得到了它，但它不是作为html出来的，而是纯文本。如果你能找到答案，请帮我。当我从编辑器下载一些东西时，命名工作，编辑器工作，但当它显示时，它只显示编辑器文本中的内容，检查源代码似乎是编码器中的一些内容，但我不确定 这是代码，如果有人能找出我做错了什么，请帮助我。我已经尝试了很多事情，花了很长时间在这件事上，这是不可能的。另外，我不喜欢使用框架，所以请尽量不要发送任何涉及jquery或其他内容的内容 如果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="code.css">
<title>Html editor</title>
<style>
.btn {
position:static;
left:0;
width: 4rem;
background: rgb(0, 0, 0);
color: gold;
font-size: 1rem;
outline:none;
cursor:pointer;
height:10%;
}
.btn2 {
position:absolute;
top:60vH;
left:9px;
width: 4rem;
background: rgb(0, 0, 0);
color: gold;
font-size: 0.7rem;
outline:none;
cursor:pointer;
height:10%;
}
.btn:hover{
color:white;
background: blue;
}
.btn2:hover{
color:white;
background: blue;
}
.main-editor {
background: rgba(0, 0, 0, 0.91);
display: flex;
width: 100%;
padding: 1rem;
box-shadow:0 2px 3px black;
position:fixed;
height:100vh;
justify-content: center;
align-items: center;
border: 7px solid #36383f;
}
.first {
background-color: #ffffff;
width: 50%;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
box-shadow: 0 1px 1px rgb(22, 22, 22);
outline: none;
padding: 0.4rem;
height: 90vh;
}
.second {
background-color: rgb(255, 255, 255);
width: 50%;
overflow-y: auto;
white-space: pre;
right: 0;
box-shadow: 0 1px 1px rgb(22, 22, 22);
padding: 0.4rem;
height: 90vh;
}
</style>
</head>
<body>
<div class="main-editor">
<button class="btn" id="btn">Run</button>
<button class="btn2" onclick="downloadFile()">Download</button>
<input type="text" value="Default" placeholder="Input Name" oninput="getNameInput()" id="nameInput" style="position:absolute;left:3px;top:3px;border:3px inset lightgray;">
<div class="first" id="main" contenteditable>
writecode
</div>
<iframe class="second">
</iframe>
</div>
<script src="editor.js"></script>
<script>
const first = document.querySelector(".first");
const iframe = document.querySelector("iframe");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});
first.addEventListener('keyup',()=>{
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})
first.addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
</script>
<script>
var name;
function downloadInnerHtml(filename, elId, mimeType) {
var elHtml = document.getElementById(elId).innerHTML;
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click();
}
function getNameInput() {
name = document.getElementById("nameInput").value;
console.log(name);
fileName = name + ".html"
}
var fileName = "default.html"; // You can use the .txt extension if you want
function downloadFile() {
fileName = name + ".html"
console.log("Download");
downloadInnerHtml(fileName, "main",'text/html');
}
</script>
</body>
</html>
Html编辑器
.btn{
位置：静态；
左：0；
宽度：4rem；
背景：rgb（0,0,0）；
颜色：金色；
字号：1rem；
大纲：无；
光标：指针；
身高：10%；
}
.btn2{
位置：绝对位置；
顶部：60vH；
左：9px；
宽度：4rem；
背景：rgb（0,0,0）；
颜色：金色；
字体大小：0.7rem；
大纲：无；
光标：指针；
身高：10%；
}
.btn:悬停{
颜色：白色；
背景：蓝色；
}
.btn2：悬停{
颜色：白色；
背景：蓝色；
}
.主编{
背景：rgba（0,0,0,0.91）；
显示器：flex；
宽度：100%；
填充：1rem；
盒影：0 2×3×黑色；
位置：固定；
高度：100vh；
证明内容：中心；
对齐项目：居中；
边框：7px实心#36383f；
}
.首先{
背景色：#ffffff；
宽度：50%；
溢出x：隐藏；
溢出y：自动；
空白：预处理；
盒影：0 1px 1px rgb（22,22,22）；
大纲：无；
填充：0.4rem；
高度：90vh；
}
.第二{
背景色：rgb（255、255、255）；
宽度：50%；
溢出y：自动；
空白：预处理；
右：0；
盒影：0 1px 1px rgb（22,22,22）；
填充：0.4rem；
高度：90vh；
}
跑
下载
写代码
const first=document.querySelector（“.first”）；
const iframe=document.querySelector（“iframe”）；
const btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，（）=>{
var html=first.textContent；
iframe.src=“data:text/html；charset=utf-8，”+encodeURI（html）；
});
首先，addEventListener（'keyup'，（）=>{
var html=first.textContent；
iframe.src=“data:text/html；charset=utf-8，”+encodeURI（html）；
})
第一个。addEventListener（“粘贴”，函数（e）{
e、 预防默认值（）；
var text=e.clipboardData.getData（“text/plain”）；
document.execCommand（“insertText”，false，text）；
});
变量名；
函数下载InnerHTML（文件名、elId、mimeType）{
var elHtml=document.getElementById（elId）.innerHTML；
var link=document.createElement（'a'）；
mimeType=mimeType | |“text/plain”；
link.setAttribute（'下载'，文件名）；
link.setAttribute（'href'，'data:'+mimeType+'；charset=utf-8'，+encodeURIComponent（elHtml））；
link.click（）；
}
函数getNameInput（）{
name=document.getElementById（“nameInput”）.value；
console.log（名称）；
fileName=name+“.html”
}
var fileName=“default.html”；//如果需要，可以使用.txt扩展名
函数下载文件（）{
fileName=name+“.html”
console.log（“下载”）；
下载InnerHTML（文件名，“main”，“text/html”）；
}