如何解决DIV 和 TD 未显示 CKEDITOR 内嵌工具栏它适用于 TD 标签内的 SPAN
CKEDITOR 内嵌工具栏不显示 DIV 和 TD，但两个标签内的文本都是可编辑的。 CKEDITOR 在 Angular 6 项目中的实现。我们要编辑电子邮件模板的所有内容。如果我们在 TD 内使用多个 SPAN 标签，它会起作用，但工具栏不显示底部跨度元素。所以我们需要在一个元素中设置可编辑的所有模板，允许编辑和打开这个工具栏（DIV 和 TD）。
CKEDITOR.dtd.$editable.span = 1
CKEDITOR.dtd.$editable.a = 1
contentEditableElement1.forEach(element => {
try {
element.setAttribute("contenteditable","true");
CKEDITOR.inline(element,{
filebrowserbrowseUrl: '/ckfinder/ckfinder.html',filebrowserUploadUrl:'/ckfinder/connector?command=QuickUpload&type=Files¤tFolder=/archive/',filebrowserImageUploadUrl:'/ckfinder/connector?command=QuickUpload&type=Images¤tFolder=/userfiles/',filebrowserLinkbrowseUrl: '/ckfinder/ckfinder.html?id=' + this.CurrentUserID,format_tags: 'p;h2;h3;h4;h5;h6;div,section;button;span',filebrowserImagebrowseUrl: '/ckfinder/ckfinder.html?type=Images&id=' + this.CurrentUserID,toolbarCanCollapse: true,extraAllowedContent: 'style;*(*)[*]{*}<*>'
});
} catch (error) {
}
});
需要编辑的邮件模板
<table id="i9hf" width="650" cellspacing="0" cellpadding="0" border="0" align="center" style="Box-sizing: border-Box; border: 1px solid #ccc;">
<tbody id="il3f" style="Box-sizing: border-Box;">
<tr id="i4p6" style="Box-sizing: border-Box;">
<td id="i5e5" height="60" align="left" style="Box-sizing: border-Box; padding: 15px;">
<table id="impa" width="100%" cellspacing="0" cellpadding="0" border="0" style="Box-sizing: border-Box;">
<tbody id="ixt8" style="Box-sizing: border-Box;">
<tr id="i7ja" style="Box-sizing: border-Box;">
<td id="inhp" width="145" style="Box-sizing: border-Box;">
####logo####
</td>
<td id="iytc" width="1" valign="bottom" style="Box-sizing: border-Box; border-right: 1px solid #cccccc;">
</td>
<td id="iesc8" align="right" style="Box-sizing: border-Box; padding-left: 35px; text-align: right;">
<img id="iobbu" src="IMGABC.JPG" style="Box-sizing: border-Box; color: black; text-align: right;">
</td>
<td id="i8stp" style="Box-sizing: border-Box;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="izez6" style="Box-sizing: border-Box;">
<td id="ieo0g" align="left" style="Box-sizing: border-Box; padding-top: 10px; padding-right: 15px; padding-left: 15px; padding-bottom: 20px; border-bottom: 1px solid #cccccc; color: #000000;">
<table id="i92fq" width="100%" height="150" style="Box-sizing: border-Box; height: 150px; margin: 0 auto 10px auto; padding: 0 0 0 0; width: 100%;">
<tbody id="ioa8e" style="Box-sizing: border-Box;">
<tr id="iivq9" style="Box-sizing: border-Box;">
<td id="ia9is" valign="top" style="Box-sizing: border-Box; font-size: 12px; font-weight: 300; vertical-align: top; color: rgb(111,119,125); margin: 0; padding: 0;">
<img id="inffq" src="kb4eecback.jpg" width="616" height="128" style="Box-sizing: border-Box; color: black; max-width: autopx; min-height: autopx; border-radius: 0 0 0 0; width: 616px; height: 128px;">
</td>
</tr>
</tbody>
</table>
<table id="io4jgm" width="100%" height="150" style="Box-sizing: border-Box; height: 150px; margin: 0 auto 10px auto; padding: 0 0 0 0; width: 100%; line-height: 21px;">
<tbody id="iwdqt" style="Box-sizing: border-Box;">
<tr id="ir9rl" style="Box-sizing: border-Box;">
<td id="i4jh0j" valign="top" style="Box-sizing: border-Box; font-size: 12px; font-weight: 300; vertical-align: top; color: rgb(111,125); margin: 0; padding: 0;">
<p id="iwg6d" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 16px; line-height: 22px; color: #666666; text-align: left; margin-top: 15px; max-width: autopx; min-height: autopx; border-radius: 0 0 0 0;">
</p>
<span id="divMain5" style="Box-sizing: border-Box; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,Helvetica,sans-serif; text-align: center;"><span draggable="false" data-highlightable="1" id="ijyvu-2-2" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;">Many of the email addresses and identities of your organisation are exposed on the internet and easy to find for cyber-criminals. With that email attack surface,they can launch social engineering,spear phishing and ransomware attacks on your organisation.<br id="ir56l" style="Box-sizing: border-Box;"><br id="ix3ro" style="Box-sizing: border-Box;">Our partner KNowBe4’s Email Exposure Check Pro (EEC) identifies the at-risk users in your organisation by crawling business social media information and hundreds of breach databases. This is done in two stages:</span></span>
<p id="ik9pv" style="Box-sizing: border-Box;">
</p>
<p id="iffnp" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 16px; line-height: 22px; color: #666666; text-align: left; margin-top: 15px; max-width: autopx; min-height: autopx; border-radius: 0 0 0 0;">
</p>
<div id="i4iui" style="Box-sizing: border-Box; padding: 0 0 0 0; font-family: Arial,sans-serif; font-weight: 700; font-size: 18px; color: #fa5a0b; max-width: autopx; min-height: autopx; border-radius: 0 0 0 0;">
<strong draggable="false" data-highlightable="1" id="itpmri-2-2-2" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #fa5a0b;"><span draggable="false" data-highlightable="1" id="ivpmqg" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;">First Stage:</span></strong>
</div>
<p id="i16nl" style="Box-sizing: border-Box;">
</p>
<p id="ilwqc" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 16px; line-height: 22px; color: #666666; text-align: left; margin-top: 15px;">
<span id="iz0ud" style="Box-sizing: border-Box; padding: 0 0 0 0; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center;"><span draggable="false" data-highlightable="1" id="ixlyg" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;"><span draggable="false" data-highlightable="1" id="ipvp2r" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;"><span draggable="false" id="imqka3-2-2-2-2" style="Box-sizing: border-Box;">Does
deep web searches to find any publicly available organisational data.
This will show you what your organisational structure looks like to an
attacker,which they can use to craft targeted spear phishing attacks.</span></span></span></span>
</p>
<div id="ir9kfm" style="Box-sizing: border-Box; padding: 0 0 20px 0; max-width: autopx; min-height: autopx; border-radius: 0 0 0 0; font-family: Arial,sans-serif; font-size: 16px; font-weight: 700; color: #fa5a0b;">Second Stage:
<br draggable="true" id="iu92im-2" style="Box-sizing: border-Box;">
</div>
<div id="i2r9v2" style="Box-sizing: border-Box; padding: 0 0 20px 0; font-family: Arial,sans-serif; font-size: 16px; color: #666666;">
<span draggable="false" data-highlightable="1" id="ixlyg-2-2" style="Box-sizing: border-Box;">Finds
any users that have had their account information exposed in any of
several hundred breaches. These users are particularly at-risk because
an attacker kNows more about that user,up to and including their actual
passwords!</span>
</div>
<div id="iim1fl" style="Box-sizing: border-Box; padding: 0 0 20px 0; font-family: Arial,sans-serif; font-size: 16px; font-weight: 700; color: #fa5a0b;">Your EEC Pro Reports:
<br draggable="true" id="ij0ab1-2" style="Box-sizing: border-Box;">
</div>
<div id="ifyzn7" style="Box-sizing: border-Box; padding: 0 0 20px 0; font-family: Arial,sans-serif; font-size: 16px; color: #666666;">
<span draggable="false" id="iaeegn-2-2" style="Box-sizing: border-Box;">KNowBe4
will email you back a summary report PDF of the number of exposed
emails,identities and risk levels found. You will also get a link to
the full detailed report of actual users found,including breach name
and if a password was exposed.</span>
</div>
<div id="i6kuyw" style="Box-sizing: border-Box; padding: 0 0 0 0; font-family: Arial,sans-serif; font-size: 16px; color: #666666;">
<div draggable="true" id="ifv0ws-2" style="Box-sizing: border-Box; font-weight: 700; color: #fa5a0b;">
<span draggable="false" data-highlightable="1" id="ibl37-2-2-2-2" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;"><span draggable="false" data-highlightable="1" id="ibl37-2-2-2-2-2" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;">To request a KNowBe4 Email Exposure Check Pro Report,please select the button below to complete the form.</span></span>
</div>
</div>
<p id="isw8b" style="Box-sizing: border-Box;">
</p>
<p id="itvxn" style="Box-sizing: border-Box; margin-top: 15px; text-align: center; padding: 20px 0 40px 0; max-width: autopx; min-height: autopx; border-radius: 0 0 0 0;">
<span id="btn2" style="Box-sizing: border-Box; padding: 0 0 0 0; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center;"><a href="#" id="i6br2" style="Box-sizing: border-Box;"></a></span>
<a id="ikofn" target="_blank" style="Box-sizing: border-Box; max-width: autopx; min-height: autopx; font-size: 13px; text-align: center; color: #ffffff; font-family: Arial,sans-serif; font-weight: 700; background-color: #f16622; border-radius: 10px 10px 10px 10px; vertical-align: middle; padding: 15px 15px 15px 15px;">'INSERT UNIQUE TRACKING LINK - REMOVE TEXT BEFORE SENDING' Request Report</a>
</p>
</td>
</tr>
</tbody>
</table>
<h1 id="i4esl" style="Box-sizing: border-Box; font-size: 25px; line-height: 30px; color: #333333; font-family: Arial,sans-serif; font-weight: normal;">
</h1>
<p id="icuwx" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 18px; line-height: 22px; color: #333333; text-align: left; font-weight: normal; margin-top: 15px;">
</p>
<p id="ikeft" style="Box-sizing: border-Box;">
</p>
<p id="id4pg" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 18px; line-height: 22px; color: #333; font-weight: normal; margin-top: 10px; text-align: center; padding: 0 0 0 0;">
<span id="divMain8" style="Box-sizing: border-Box; padding: 0 0 0 0; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center;"> ####logo####
</span>
</p>
</td>
</tr>
<tr id="if3i5" style="Box-sizing: border-Box;">
<td id="ibwqp" align="left" style="Box-sizing: border-Box; padding: 15px;">
<table id="i2p92" width="100%" style="Box-sizing: border-Box;">
<tbody id="iwmyi" style="Box-sizing: border-Box;">
<tr id="iq6vy" style="Box-sizing: border-Box;">
<td id="iwrld" width="315" style="Box-sizing: border-Box; color: #666666; padding: 0 0 0 0;">
<p id="in8tm" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 12px; line-height: 16px; color: #333; text-align: left; font-weight: normal;">
<span draggable="false" id="irppy-2" style="Box-sizing: border-Box;"> ####CompanyName####</span>
</p>
<p id="iyp56" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 12px; line-height: 16px; color: #333; text-align: left; font-weight: normal;">
<span draggable="false" id="i5b9l-2-2-2" style="Box-sizing: border-Box;">T: ####DirectPhone####<br id="i4kdt" style="Box-sizing: border-Box;"></span>
</p>
<p id="ihbj3y" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 12px; line-height: 16px; color: #333; text-align: left; font-weight: normal;">
<span draggable="false" data-highlightable="1" id="iqzu7" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;">W: ####Website####</span>
<span draggable="false" id="i0lcz4-2" style="Box-sizing: border-Box;"></span>
</p>
<p id="iqgwxi" style="Box-sizing: border-Box; font-family: Arial,sans-serif; font-size: 12px; line-height: 16px; color: #333; text-align: left; font-weight: normal;">
<span draggable="false" data-highlightable="1" id="i89vi7-2" style="Box-sizing: border-Box;">E: </span>
<span draggable="false" data-highlightable="1" id="iozlj" class="gjs-comp-selected" style="Box-sizing: border-Box; color: #666666;"> ####Emailaddress####</span>
<span draggable="false" id="isalp6-2" style="Box-sizing: border-Box;"></span>
</p>
</td>
<td id="iud9j" valign="middle" align="right" style="Box-sizing: border-Box;">
<table id="ihkwk" cellspacing="0" cellpadding="0" border="0" style="Box-sizing: border-Box;">
<tbody id="ij3f2" style="Box-sizing: border-Box;">
<tr id="ivh0x" style="Box-sizing: border-Box;">
<td id="iw47i" valign="top" align="right" style="Box-sizing: border-Box;">
<span id="divMain9" style="Box-sizing: border-Box; padding: 0 0 0 0; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center;"></span>
</td>
<td id="i0twy" width="33" valign="top" align="right" style="Box-sizing: border-Box;">
<a id="iirkwd" style="Box-sizing: border-Box; color: #333333; max-width: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center; display: inline-block; padding: 5px; min-height: 50px; min-width: 50px;"><img alt="Facebook" src="twittericon.png" id="ijq4y" style="Box-sizing: border-Box;"></a>
<span id="divMain10" style="Box-sizing: border-Box; padding: 0 0 0 0; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center;"></span>
</td>
<td id="iqeqi" width="45" valign="top" align="right" style="Box-sizing: border-Box;">
<a id="i1x2x4" style="Box-sizing: border-Box; color: #333333; max-width: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center; display: inline-block; padding: 5px; min-height: 50px; min-width: 50px;"><img alt="Twitter" src="linkedinicon.png" id="i3m7e" style="Box-sizing: border-Box;"></a>
<span id="divMain11" style="Box-sizing: border-Box; padding: 0 0 0 0; color: #333333; max-width: autopx; min-height: autopx; font-size: 16px; font-family: Arial,sans-serif; text-align: center;"></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。