contenteditable属性
当div加上contenteditable="true"即可进入编辑
关闭拼写检查
spellcheck="false"
首文字没有标签问题
<body>
<!-- 开启编辑，关闭拼写检查 -->
<div contenteditable="true" spellcheck="false" class="box">
<p><br></p>
</div>
<div>
<button class="btn">获取</button>
</div>
<script>
document.querySelector('.btn').addEventListener('click', function () {
console.log('点击了');
let element = document.querySelector('.box')
let html = element.innerHTML
console.log(html);
})
document.querySelector('.box').addEventListener('input', function (e) {
let element = document.querySelector('.box')
let html = element.innerHTML
console.log(html);
if (html.length == 0) {
element.innerHTML = '<p><br></p>'
}
})
</script>
</body>
渲染标题
<body>
<!-- 开启编辑，关闭拼写检查 -->
<div contenteditable="true" spellcheck="false" class="box">
<p><br></p>
</div>
<div>
<button class="btn">获取</button>
</div>
<script>
document.querySelector('.btn').addEventListener('click', function () {
console.log('点击了');
let element = document.querySelector('.box')
let html = element.innerHTML
console.log(html);
})
document.querySelector('.box').addEventListener('input', function (e) {
let element = document.querySelector('.box')
let html = element.innerHTML
console.log(html);
if (html.length == 0) {
element.innerHTML = '<p><br></p>'
}
let allItem = document.querySelectorAll('.box p')
console.log(allItem);
for (const element of allItem) {
console.log(element.textContent);
// 一级标题
if (element.textContent.includes('# ')) {
element.classList.add('com_h1')
} else {
element.classList.remove('com_h1');
}
}
})
</script>
</body>
粘贴
// 粘贴
document.querySelector('.box').addEventListener('paste', function (event) {
// 阻止默认粘贴
event.preventDefault();
if (event.clipboardData.getData('text/plain').length > 0) {
// 文本
console.log(event.clipboardData.getData('text/plain'));
let data = event.clipboardData.getData('text/plain')
let dataList = data.split('\n')
for (let index = 0; index < dataList.length; index++) {
let element = dataList[index];
element = element.replaceAll(' ', ' ')
let node = document.createElement('p')
node.innerHTML = element
document.querySelector('.box').appendChild(node)
}
} else if (event.clipboardData.files[0].type.includes('image')) {
// 图片
let blob = event.clipboardData.files[0]
console.log(blob);
let formData = new FormData().append('file', blob)
console.log(formData);
}
})
