前言
现在网上有很多这样的HTML编辑器，这种编辑器无疑给人带来了很多方便，所以自己也想尝试制作一款这样的HTML编辑器，既然要制作，那就肯定是先把UI搭起来，再慢慢完善功能
设计思路
我的思路就是将div标签设置一个属性（contenteditable="true"），使div成为可编辑的div
并且我发现可编辑div有个特征：在内部换行会将上一个标签复制下来，所以为了防止这种问题，我决定在内部加入<p><br></p>这样，每次换行就会自动复制<p><br></p>标签
把这些东西弄好后，我就开始写UI，俗话说:交互也是一门技术
UI用的Icon使用了图标字体
后面使用html写好了交互的菜单以及用css做了交互效果
UI效果
交互效果
鼠标移到Icon
鼠标移到有下拉框的Icon
开启功能
完整代码
引用的css文件
/Icon字体/
Css
@font-face {
font-family: 'poppin';
src: url('../../Content/Font/poppin.ttf') format('truetype');
}
@font-face {
font-family: 'SEGUIEMJ';
src: url('../Font/SEGUIEMJ.TTF') format('truetype');
}
*::-webkit-scrollbar {
3px;
height:1px;
}
*::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #0094ff;
}
*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #ccc;
}
body {
font-family: 'poppin';
margin: 0;
padding: 0px;
}
#YolxRichText {
min- 1000px;
max- 1600px;
height: 620px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
padding: 0px 40px;
margin-top: 10px;
font-family: 'poppin';
}
#YolxRichText_Input {
calc(100% - 40px);
font-size: 16px;
color: rgba(0,0,0,.8);
letter-spacing: 2px;
margin: 0;
padding: 10px 20px 245px;
outline: none;
}
.YolxRichText_Input_token {
white-space: pre-wrap;
}
#YolxRichText_Ouput {
position: absolute;
top: 0px;
right: 0px;
100%;
height: 500px;
font-size: 12px;
color: #fff;
letter-spacing: 2px;
}
#YolxRichText_Ouput_Preview {
padding: 10px 20px 245px;
color: #000;
}
#YolxRichText_Ouput h1 {
text-align: center;
border-bottom: 2px dotted #ff6a00;
color: #ff6a00;
}
#YolxRichText_Input_section * {
display: inline;
}
.editor {
calc(100% - 15px);
height: 100%;
overflow: auto;
float: left;
}
.color_SkyBlue {
color: skyblue !important;
}
.YolxRichText_editor, .YolxRichText_Preview, .YolxRichText_Help {
50%;
height: 500px;
overflow: auto;
position: relative;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
}
.YolxRichText_Help {
20%;
font-size: 14px;
padding: 0px 10px;
display:none;
}
.YolxRichText_Help p {
display:block;
}
.YolxRichText_Help p span {
display: block;
}
br {
line-height: 26px;
}
.EditorMenu {
100%;
height: 36px;
position: relative;
float: left;
box-sizing: border-box;
background: #f1f1f1;
border: 1px solid #ccc;
border-bottom: none;
}
.EditorMenu ul {
margin: 0;
padding: 0px;
height: 100%;
display: flex;
text-align: center;
margin: 0px 5px;
}
.EditorMenu ul li {
display: block;
36px;
line-height: 2.3em;
position: relative;
}
.EditorMenu ul li:hover {
cursor: pointer;
}
.EditorMenu ul li:hover i {
color: #000;
}
.EditorMenu ul li:hover div {
z-index: 2;
display: block;
animation: EditorMenuAnima ease 0.5s forwards;
}
@keyframes EditorMenuAnima {
0% {
top:-100px;
}
30% {
top: 35px;
}
60% {
top: 20px;
}
100% {
top: 35px;
}
}
.EditorMenu ul li svg {
26px;
height: 34px;
}
.EditorMenu ul li div {
100px;
z-index: 1;
position: absolute;
top: 35px;
left: 0px;
background-color: #fff;
border: 1px solid #f1f1f1;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-top:1px solid #ccc;
margin: 0;
display: none;
transition: all ease 0.5s;
box-sizing: border-box;
overflow: hidden;
}
.EditorMenu ul .editor_menu_face {
}
.EditorMenu ul .editor_menu_face div ul {
display: flex;
}
.EditorMenu ul .editor_menu_face .face {
display: block;
position: initial;
100%;
padding: 10px;
border: none;
max-height: 138px;
overflow-y: auto;
}
.EditorMenu ul .editor_menu_face .face span {
font-size: 24px;
padding: 0px 4px;
}
.EditorMenu ul .editor_menu_face .face span:hover {
background:#ccc;
border-radius:3px;
}
.EditorMenu ul li div p {
}
.EditorMenu_ul_li_div_p {
text-align: center;
color: #999;
line-height: 2;
border-bottom: 1px solid #f1f1f1;
font-size: 13px;
}
.EditorMenu ul li ul {
display: block;
margin: 0px;
}
.EditorMenu ul li div ul li {
color: #333;
padding: 5px 0;
100%;
float: left;
}
.EditorMenu ul li div ul li:hover {
background: #ccc;
}
.noPaddingAndMargin {
margin: 0;
padding: 0;
}
.EditorMenu ul li i {
color: #999;
}
.LinesOfCode {
height: 100%;
float: left;
background: #eee;
padding: 10px 5px 0px 5px;
}
.LinesOfCode ul {
text-align:left;
font-size:12px;
}
.LinesOfCode ul li {
margin: 20px 0px;
}
Html
<div id="YolxRichText">
<div class="EditorMenu">
<ul>
<li title="撤销"><i class="fa fa-undo"></i></li>
<li title="重做"><i class="fa fa-repeat"></i></li>
<li title="标题">
<i class="fa fa-header"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置标题</p>
<ul>
<li><h1 class="noPaddingAndMargin">H1</h1></li>
<li><h2 class="noPaddingAndMargin">H2</h2></li>
<li><h3 class="noPaddingAndMargin">H3</h3></li>
<li><h4 class="noPaddingAndMargin">H4</h4></li>
<li><h5 class="noPaddingAndMargin">H5</h5></li>
<li><p class="noPaddingAndMargin">正文</p></li>
</ul>
</div>
</li>
<li title="字体">
<i class="fa fa-font"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置字体</p>
<ul>
<li>poppin</li>
<li>微软雅黑</li>
<li>宋体</li>
<li>A字体</li>
<li>B字体</li>
<li>C字体</li>
</ul>
</div>
</li>
<li title="字号">
<i class="fa fa-text-height"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置字号</p>
<ul>
<li>x-small</li>
<li>small</li>
<li>normal</li>
<li>large</li>
<li>x-large</li>
<li>xx-large</li>
</ul>
</div>
</li>
<li title="颜色">
<i class="fa fa-pencil"></i>
<div style=" 300px;transform: translateX(-45%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">字体颜色</p>
<ul>
<li style="99px"><i class="fa fa-pencil" style="color: #000000;"></i></li>
<li style="100px"><i class="fa fa-pencil" style="color: #1c487f;"></i></li>
<li style="99px"><i class="fa fa-pencil" style="color: #4d80bf;"></i></li>
<li style="99px"><i class="fa fa-pencil" style="color: #c24f4a;"></i></li>
<li style="100px"><i class="fa fa-pencil" style="color: #8baa4a;"></i></li>
<li style="99px"><i class="fa fa-pencil" style="color: #7b5ba1;"></i></li>
<li style="99px"><i class="fa fa-pencil" style="color: #46acc8;"></i></li>
<li style="100px"><i class="fa fa-pencil" style="color: #f9963b;"></i></li>
<li style="99px"><i class="fa fa-pencil" style="color: #eeece0;"></i></li>
<li style="99px"><i class="fa fa-pencil" style="color: #ffffff;"></i></li>
<li style="99px"><i class="fa fa-magic" style="color: coral;"></i></li>
</ul>
</div>
</li>
<li title="背景色">
<i class="fa fa-paint-brush"></i>
<div style=" 300px;transform: translateX(-45%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">字体颜色</p>
<ul>
<li style="99px"><i class="fa fa-paint-brush" style="color: #000000;"></i></li>
<li style="100px"><i class="fa fa-paint-brush" style="color: #1c487f;"></i></li>
<li style="99px"><i class="fa fa-paint-brush" style="color: #4d80bf;"></i></li>
<li style="99px"><i class="fa fa-paint-brush" style="color: #c24f4a;"></i></li>
<li style="100px"><i class="fa fa-paint-brush" style="color: #8baa4a;"></i></li>
<li style="99px"><i class="fa fa-paint-brush" style="color: #7b5ba1;"></i></li>
<li style="99px"><i class="fa fa-paint-brush" style="color: #46acc8;"></i></li>
<li style="100px"><i class="fa fa-paint-brush" style="color: #f9963b;"></i></li>
<li style="99px"><i class="fa fa-paint-brush" style="color: #eeece0;"></i></li>
<li style="99px"><i class="fa fa-paint-brush" style="color: #ffffff;"></i></li>
<li style="99px"><i class="fa fa-magic" style="color: coral;"></i></li>
</ul>
</div>
</li>
<li title="加粗"><i class="fa fa-bold"></i></li>
<li title="斜体"><i class="fa fa-italic"></i></li>
<li title="下划线"><i class="fa fa-underline"></i></li>
<li title="删除线"><i class="fa fa-strikethrough"></i></li>
<li title="对齐方式">
<i class="fa fa-paragraph"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">对齐方式</p>
<ul>
<li title="靠左"><i class="fa fa-list-ol"></i></li>
<li title="居中"><i class="fa fa-list-ul"></i></li>
<li title="靠右"><i class="fa fa-list-ul"></i></li>
</ul>
</div>
</li>
<li class="editor_menu_face" title="插入表情">
<i class="fa fa-meh-o"></i>
<div style="300px;transform: translateX(-45%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">插入表情</p>
<ul>
<li><span>Emoji</span></li>
<li style="1px;background:#ccc;"></li>
<li><span>更多表情</span></li>
</ul>
<div class="face">
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
<span>?</span>
</div>
</div>
</li>
<li title="设置列表">
<i class="fa fa-list-ul"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">设置列表</p>
<ul>
<li><i class="fa fa-list-ol" title="有序列表"></i></li>
<li><i class="fa fa-list-ul" title="无序列表"></i></li>
</ul>
</div>
</li>
<li title="媒体">
<i class="fa fa-tv"></i>
<div style="transform: translateX(-35%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">插入媒体</p>
<ul>
<li><i class="fa fa-youtube-play" title="视频"></i></li>
<li><i class="fa fa-music" title="音乐"></i></li>
</ul>
</div>
</li>
<li title="超链接"><i class="fa fa-chain"></i></li>
<li title="代码块"><i class="fa fa-terminal"></i></li>
<li title="引用"><i class="fa fa-quote-left"></i></li>
<li title="表格"><i class="fa fa-table"></i></li>
<li title="图片"><i class="fa fa-image"></i></li>
<li title="导入"><i class="fa fa-importfile"><svg t="1552977381714" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2344" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" class="icon"><path d="M708.266667 460.8h-140.8V307.2H384v25.6a34.133333 34.133333 0 1 1-68.266667 0V290.133333c0-28.2752 22.9248-51.2 51.2-51.2h298.666667l110.933333 128v366.933334c0 28.2752-22.9248 51.2-51.2 51.2H366.933333c-28.2752 0-51.2-22.9248-51.2-51.2v-42.666667a34.133333 34.133333 0 1 1 68.266667 0v25.6h324.266667v-256z m0-68.266667v-0.132266l-72.533334-83.694934V392.533333h72.533334z m-352.674134 149.905067H277.282133c-16.469333 0-29.815467-14.574933-29.815466-32.554667 0-17.975467 13.3504-32.5504 29.815466-32.5504h78.3104l-27.997866-25.706666a25.924267 25.924267 0 0 1 0-38.190934 30.754133 30.754133 0 0 1 41.6 0l83.2 76.386134a25.8688 25.8688 0 0 1 8.375466 20.0704 25.8432 25.8432 0 0 1-8.375466 20.053333l-83.2 76.3904a30.754133 30.754133 0 0 1-41.6 0 25.924267 25.924267 0 0 1 0-38.190933l27.997866-25.706667z" fill="#999999" p-id="2345"></path></svg></i></li>
<li title="导出"><i class="fa fa-derivefile"><svg t="1552977587969" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2453" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" class="icon"><path d="M674.133333 682.666667v51.2c0 28.2752-22.9248 51.2-51.2 51.2H264.533333c-28.2752 0-51.2-22.9248-51.2-51.2V290.133333c0-28.2752 22.9248-51.2 51.2-51.2h358.4c28.2752 0 51.2 22.9248 51.2 51.2v51.2a34.133333 34.133333 0 1 1-68.266666 0v-34.133333H281.6v409.6h324.266667v-34.133333a34.133333 34.133333 0 1 1 68.266666 0z m31.325867-140.228267h-78.3104c-16.469333 0-29.815467-14.574933-29.815467-32.554667 0-17.975467 13.3504-32.5504 29.815467-32.5504h78.3104l-27.997867-25.706666a25.924267 25.924267 0 0 1 0-38.190934 30.754133 30.754133 0 0 1 41.6 0l83.2 76.386134a25.8688 25.8688 0 0 1 8.375467 20.0704 25.8432 25.8432 0 0 1-8.375467 20.053333l-83.2 76.3904a30.754133 30.754133 0 0 1-41.6 0 25.924267 25.924267 0 0 1 0-38.190933l27.997867-25.706667zM443.733333 588.782933a31.338667 31.338667 0 0 1-22.976-8.802133L375.466667 535.9104v24.0512c0 15.927467-13.371733 28.8384-29.866667 28.8384s-29.866667-12.910933-29.866667-28.842667v-95.914666c0-15.931733 13.371733-28.842667 29.866667-28.842667l0.541867 0.004267a31.317333 31.317333 0 0 1 22.434133 8.814933L443.733333 517.149867l75.157334-73.130667a31.317333 31.317333 0 0 1 22.434133-8.814933L541.866667 435.2c16.494933 0 29.866667 12.910933 29.866666 28.842667v95.914666c0 15.931733-13.371733 28.842667-29.866666 28.842667s-29.866667-12.910933-29.866667-28.842667v-24.046933l-45.290667 44.0704a31.338667 31.338667 0 0 1-22.976 8.802133z" fill="#999999" p-id="2454"></path></svg></i></li>
<li title="新建"><i class="fa fa-newfile"><svg t="1552977627227" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2562" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" class="icon"><path d="M511.278933 426.756267c-17.109333 22.741333 72.738133 14.208 68.458667 18.474666-47.061333 31.266133-88.4224 54.0032-149.751467 78.161067-41.361067 15.6288-86.997333 110.843733-104.1152 149.213867-18.538667 38.370133-21.393067 58.261333-27.093333 76.736-1.429333 5.687467-9.984 24.157867-27.101867 17.053866-17.1136-5.6832-17.1136-25.578667-14.263466-34.103466 48.494933-170.530133 126.933333-305.536 215.36-405.009067 19.968-22.741333 48.490667-39.790933 71.313066-46.8992 98.4064-28.420267 161.160533-24.157867 223.914667-24.157867-12.834133 18.474667-25.672533 35.528533-39.936 52.5824-2.850133 2.8416-115.52 17.0496-132.637867 39.790934-17.109333 22.737067 91.281067 7.104 88.426667 9.9456a723.473067 723.473067 0 0 1-49.92 45.474133c-2.850133 1.4208-105.536-1.4208-122.653867 22.741333zM605.866667 605.866667v-59.733334a34.133333 34.133333 0 1 1 68.266666 0v59.733334h59.733334a34.133333 34.133333 0 1 1 0 68.266666h-59.733334v59.733334a34.133333 34.133333 0 1 1-68.266666 0v-59.733334h-59.733334a34.133333 34.133333 0 1 1 0-68.266666h59.733334z" fill="#999999" p-id="2563"></path></svg></i></li>
<li title="保存"><i class="fa fa-save"></i></li>
<li title="预览"><i class="fa fa-eye color_SkyBlue"></i></li>
<li title="帮助"><i class="fa fa-question-circle-o"></i></li>
<li title="切换编辑器"><i class="fa fa-wrench color_SkyBlue"></i></li>
</ul>
</div>
<div class="YolxRichText_editor">
<div class="LinesOfCode">
<ul class="noPaddingAndMargin">
<li>1</li>
</ul>
</div>
<div class="editor">
<div id="YolxRichText_Input" tabindex="0" contenteditable="true"><p><br></p></div>
</div>
</div>
<div class="YolxRichText_Preview">
<div id="YolxRichText_Ouput">
<h1>预览</h1>
<div id="YolxRichText_Ouput_Preview">
</div>
</div>
</div>
<div class="YolxRichText_Help">
<h1>帮助文档</h1>
<hr />
<h3>快捷键</h3>
<p>
<span>撤销：Ctrl / Command + Z</span>
<span>重做：Ctrl / Command + Shift + Z || Ctrl / Command + Y</span>
<span>加粗：Ctrl / Command + B</span>
<span>斜体：Ctrl / Command + I</span>
<span>斜体：Ctrl / Command + I</span>
<span>标题：Ctrl / Command + Shift + H</span>
<span>无序列表：Ctrl / Command + Shift + U</span>
<span>有序列表：Ctrl / Command + Shift + O</span>
<span>检查列表：Ctrl / Command + Shift + C</span>
<span>插入代码：Ctrl / Command + Shift + K</span>
<span>插入链接：Ctrl / Command + Shift + L</span>
<span>插入图片：Ctrl / Command + Shift + G</span>
</p>
<hr />
<h3>标题 Title</h3>
<p>
<span>$[Title|1] 1级标题 <span style="color:#46acc8">示例:$[Title|1]HelloWorld</span></span>
<span>$[Title|2] 2级标题 <span style="color:#46acc8">示例:$[Title|2]HelloWorld</span></span>
<span>$[Title|3] 3级标题 <span style="color:#46acc8">示例:$[Title|3]HelloWorld</span></span>
<span>$[Title|4] 4级标题 <span style="color:#46acc8">示例:$[Title|4]HelloWorld</span></span>
<span>$[Title|5] 5级标题 <span style="color:#46acc8">示例:$[Title|5]HelloWorld</span></span>
<span>$[Title|p] 正文 <span style="color:#46acc8">示例:$[Title|p]HelloWorld</span></span>
</p>
<hr />
<h3>文本 Text</h3>
<p>
<span>$[Text|b]Value^ 加粗文本 <span style="color:#46acc8">示例:$[Text|b]HelloWorld^</span></span>
<span>$[Text|i]Value^ 斜体文本 <span style="color:#46acc8">示例:$[Text|i]HelloWorld^</span></span>
<span>$[Text|d]Value^ 删除文本 <span style="color:#46acc8">示例:$[Text|d]HelloWorld^</span></span>
<span>$[Text|u]Value^ 重点文本 <span style="color:#46acc8">示例:$[Text|u]HelloWorld^</span></span>
</p>
<hr />
<h3>代码 Code</h3>
<p>
<span>$[Code|*]^ 自识别代码 <span style="color:#46acc8">$[Code|*]HelloWorld^</span></span>
</p>
<hr />
<h3>列表 List</h3>
<p>
<span>$[List|u]^ 无序列表 <span style="color:#46acc8">$[List|u]HelloWorld^</span></span>
<span>$[List|o]^ 有序列表 <span style="color:#46acc8">$[List|o]HelloWorld^</span></span>
</p>
<hr />
<h3>表格 Table</h3>
<p>
<span>$[Table|*]^ 表格 <span style="color:#46acc8">$[Table|*]HelloWorld^</span></span>
</p>
<hr />
<h3>注释 Annotation</h3>
<p>
<span>$[Annotation|*]^ 注释 <span style="color:#46acc8">$[Annotation|*]HelloWorld^</span></span>
</p>
</div>
</div>
现在就做到这里，下一篇我们继续完善