Javascript 如何在生成的contentEditables div的顶部和底部添加固定的非可编辑内容？

我试图在动态生成的div上“模拟”固定的和不可编辑的页眉和页脚，content editable=true

首先，我尝试使用以下css放置页眉和页脚：

.header{
                /*margin:-100px 0px;*/
                margin-left: -2cm;
                background-color: red;
                vertical-align:middle; 
                text-align:center;
            }
            .footer{
                background-color: darkgray;
                margin-top: 735px;
                height: 100px;
                margin-left: -2cm;
            }

并尝试在第一页启用标题，效果良好：

<div id="editor">
            <div contenteditable="true" class="page" id="page-1">
                <div class="header" contenteditable="false">
                    <img class="brasao" alt="brasao-rj*" src="https://i.imgur.com/ktmBQCS.png" />
                    <span>Procuradoria Geral do Estado do Rio de Janeiro</span>
                </div>
                <b>hello</b>
                <div class="footer" contenteditable="false">
                    Rua Carmo do Cajuru 128
                </div>
            </div>
        </div>

完整代码如下：

---

（不带页眉和页脚的版本：）

那么，如何在这些内容可编辑的div上模拟页眉和页脚呢

---

提前谢谢

仅使

.body

元素

内容可编辑

并在超过某个高度时将其设置为false：

让bodyMHeight=$（.page”）.height（）-$（.header”）.height（）-$（.footer”）.height（）；
$（“.body”）.on（“输入”，函数（）{
//console.log（$（“.body”）.height（），bodyMHeight）；
如果（$（“.body”）.height（）>bodyMHeight）{
//控制台。登录（“结束”）；
$（this.attr（“contenteditable”，“false”）；
}否则{
//控制台日志（“未结束”）；
}
});
正文{
保证金：0；
}
.第页{
显示器：flex；
柔性流动：柱；
高度：100vh；
最小高度：250px；
}
.标题{
背景色：红色；
文本对齐：居中；
}
.标题img{
高度：100px；
}
.身体{
弹性：1；
溢出包装：断开单词；
}
.页脚{
背景色：暗灰色；
最小高度：100px；
}

里约热内卢检察官
你好
鲁阿·卡莫·杜卡朱鲁128
我在没有jQuery的情况下成功地做到了这一点。其概念是在内容周围添加一个包装器，并向该包装器而不是页面添加事件。此外，我还创建了一个模板HTML页面，这样代码就可以在不执行清理的情况下进行克隆

为了保持页脚在底部，我将页面显示改为
flex
，将
flex方向改为
列
。然后为页脚设置
margintop:auto

代码如下：


函数编解码器（divId）{
const root=document.getElementById（divId）
常数a4={
身高：830，
宽度：595，
线高：30
};
const template=document.querySelector（“#template”）；
const headerHeight=root.querySelector（“#page-1.header”）.offsetHeight；
const footerHeight=root.querySelector（“#page-1.footer”）.offsetHeight；
常量getChildrenHeight=（元素）=>{
总计=parseFloat（getComputedStyle（元素）.paddingBottom）；
if（element.childNodes）{
for（让元素的子元素.childNodes）{
开关（子节点类型）{
案例节点。元素节点：
总计+=儿童。离视；
打破
案例节点.TEXT\u节点：
让range=document.createRange（）；
范围。选择节点内容（子项）；
rect=range.getBoundingClientRect（）；
总计+=（矩形底部-矩形顶部）；
打破
}
}
}
返回总数；
};
const getPageHeight=（内容）=>{
const children=getChildrenHeight（content）；
返回children+headerHeight+footerhight；
};
const setSelection=（节点，偏移量）=>{
让range=document.createRange（）；
让sel=window.getSelection（）；
range.setStart（节点、偏移）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
};
常量addPage=（）=>{
const newPage=template.cloneNode（true）；
const pages=root.getElementsByClassName（'page'）；
newPage.id='page-'+（pages.length+1）；
newPage.className='page'；
root.appendChild（newPage）；
newPage.querySelector（“.content”）.focus（）；
newPage.querySelector（“.content”）.addEventListener（'input'，onInput）；
新建页面。_emptyPage=true；
返回newPage.querySelector（“.content”）；
};
输入函数（e）{
const content=this；
const page=这个最近的（“.page”）
const previousPage=page.previousElement同级；
const nextPage=page.nextElementSibling；
const pageHeight=getPageHeight（内容）；
const lastChild=content.lastChild；
const cloneChild=lastChild.cloneNode（true）；
const textContent=content.innerText；
if（（页面高度===0 | | textContent.length a4.height&&！下一页）{
lastChild.remove（）；
addPage（）.appendChild（cloneChild）；
}否则如果（页面高度>a4.高度和下一页（&N））{
lastChild.remove（）；
nextPage.querySelector（“.content”）.insertBefore（cloneChild，nextPage.querySelector（.content”）.firstChild）；
让selection=getSelection（）.getRangeAt（0）.startContainer.parentElement.closest（'div'）；
如果（选择===page.lastChild）{
选举（cloneChild，0）；
}
}否则如果（页面高度

#编辑器{
背景颜色：灰色；
边框：1px黑色；
填料：1米2米；
}
.第页{
背景色：白色；
边框：纯黑；
/*填充物：10em2em*/
宽度：595px；
高度：841px；
显示器：flex；
弯曲方向：立柱；
}
.内容{
单词包装：打断单词；
溢出包装：断开单词；
空白：正常；
左：2厘米；
垫底：2cm；
}
.标题{
背景色：红色；
文本对齐：居中；
}
.页脚{
背景色：暗灰色；
页边顶部：自动；
高度：100px；
}
布拉索先生{
高度：60px；
宽度：60px；
}
#模板{
显示：无；
}
我的编辑器
里约热内卢检察官
你好
鲁阿·卡莫·杜卡朱鲁128
const getHeader = () => {
    let header = document.createElement('div');
    header.setAttribute('contenteditable', false);
    header.setAttribute('class', 'header');
    let imgBrasao = document.createElement('img');
    imgBrasao.class = 'brasao';
    imgBrasao.setAttribute('class', 'brasao');
    imgBrasao.src = 'https://i.imgur.com/ktmBQCS.png';
    let spanPGE = document.createElement('span');
    spanPGE.textContent = 'Procuradoria Geral do Estado do Rio de Janeiro';
    header.appendChild(imgBrasao);
    header.appendChild(spanPGE);
    return header;
};    
const getFooter = () => {
    let footer = document.createElement('div');
    footer.setAttribute('contenteditable', false);
    footer.setAttribute('class', 'footer');
    let spanPGE = document.createElement('span');
    spanPGE.textContent = 'Rua Carmo do Cajuru 128 - Centro RJ';
    footer.appendChild(spanPGE);
    return footer;
};