HTML编辑器(1)
LRolinx/",
musicIds: "408894554",
qq: "1059658684",
email: "1059658684@qq.com",
github: "Yollx",
subPage: "https://www.cnblogs.com/LRolinx/rss",
blogId: "638719",
blogUserGuid: "87635447-b7dd-4571-ad94-08d86f2ea5cd",
blogFriendList: [
{
2024-10-08 10:16:25
原文
前言
现在网上有很多这样的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 {
width: 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-width: 1000px;
max-width: 1600px;
height: 620px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
padding: 0px 40px;
margin-top: 10px;
font-family: 'poppin';
}
#YolxRichText_Input {
width: 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;
width: 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 {
width: calc(100% - 15px);
height: 100%;
overflow: auto;
float: left;
}
.color_SkyBlue {
color: skyblue !important;
}
.YolxRichText_editor, .YolxRichText_Preview, .YolxRichText_Help {
width: 50%;
height: 500px;
overflow: auto;
position: relative;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
}
.YolxRichText_Help {
width: 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 {
width: 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;
width: 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 {
width: 26px;
height: 34px;
}
.EditorMenu ul li div {
width: 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;
width: 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;
width: 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="width: 300px;transform: translateX(-45%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">字体颜色</p>
<ul>
<li style="width:99px"><i class="fa fa-pencil" style="color: #000000;"></i></li>
<li style="width:100px"><i class="fa fa-pencil" style="color: #1c487f;"></i></li>
<li style="width:99px"><i class="fa fa-pencil" style="color: #4d80bf;"></i></li>
<li style="width:99px"><i class="fa fa-pencil" style="color: #c24f4a;"></i></li>
<li style="width:100px"><i class="fa fa-pencil" style="color: #8baa4a;"></i></li>
<li style="width:99px"><i class="fa fa-pencil" style="color: #7b5ba1;"></i></li>
<li style="width:99px"><i class="fa fa-pencil" style="color: #46acc8;"></i></li>
<li style="width:100px"><i class="fa fa-pencil" style="color: #f9963b;"></i></li>
<li style="width:99px"><i class="fa fa-pencil" style="color: #eeece0;"></i></li>
<li style="width:99px"><i class="fa fa-pencil" style="color: #ffffff;"></i></li>
<li style="width: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="width: 300px;transform: translateX(-45%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">字体颜色</p>
<ul>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #000000;"></i></li>
<li style="width:100px"><i class="fa fa-paint-brush" style="color: #1c487f;"></i></li>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #4d80bf;"></i></li>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #c24f4a;"></i></li>
<li style="width:100px"><i class="fa fa-paint-brush" style="color: #8baa4a;"></i></li>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #7b5ba1;"></i></li>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #46acc8;"></i></li>
<li style="width:100px"><i class="fa fa-paint-brush" style="color: #f9963b;"></i></li>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #eeece0;"></i></li>
<li style="width:99px"><i class="fa fa-paint-brush" style="color: #ffffff;"></i></li>
<li style="width: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="width:300px;transform: translateX(-45%);">
<p class="EditorMenu_ul_li_div_p noPaddingAndMargin">插入表情</p>
<ul>
<li><span>Emoji</span></li>
<li style="width: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>
现在就做到这里，下一篇我们继续完善
HTML编辑器(1)的更多相关文章
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- 关于Unity3D自定义编辑器的学习
被人物编辑器折腾了一个月,最终还是交了点成品上去(还要很多优化都还么做). 刚接手这项工作时觉得没概念,没想法,不知道.后来就去看<<Unity5.X从入门到精通>>中有关于 ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器
LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d ...
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
- 玩转Vim 编辑器
一:VIM快速入门 1.vim模式介绍 以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数 ...
- 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
- [BootStrap] 富编辑器，基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
- wordpress优化之结合prism.js为编辑器自定义按钮转化代码
原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...
- 关于SMARTFORMS文本编辑器出错
最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...
随机推荐
- netty学习心得1
也不是系统学习,工作需求,一点点抠的,需要自己笼统学习下. 首先功能实现: serverBootstrap.group(boss, work).channel(NioServerSocketChann ...
- 【Java并发编程】synchronized相关面试题总结
目录 说说自己对于synchronized关键字的了解 synchronized关键字的三种使用 synchronized关键字的底层原理 JDK1.6之后对synchronized关键字进行的优化 ...
- Kubernetes K8S之Ingress详解与示例
K8S之Ingress概述与说明,并详解Ingress常用示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 2C ...
- Shell学习（三）Shell参数传递
一.传参实例 ##脚本文件内容 #执行的文件名 echo $0; #第一个参数 echo $1; #第二个参数 echo $2; #第三个参数 echo $3; ##调用语句 ./testShell. ...
- springboot maven项目运行常见报错 及ajax请求报错
如图所示 tomcat运行后直接停止,也不报错 原因:我的原因是controller路径配置重名或者service没有配置@Service 遇见这错找了好久问题,网上也搜不到,特此记录一下 问题2 a ...
- 一道Postgresql递归树题
转载请注明出处: https://www.cnblogs.com/funnyzpc/p/13698249.html 也是偶然的一次,群友出了一道题考考大家,当时正值疫情最最严重的三月(借口...),披 ...
- Zookeeper 笔记小结
转自: https://www.cnblogs.com/raphael5200/p/5285583.html 1.Zookeeper的角色 » 领导者(leader),负责进行投票的发起和决议,更新 ...
- 安卓app功能或自动化测试覆盖率统计（不用instrumentation启动app）
一文带你揭秘如何采取非instrumentation启动app,打造实时统计覆盖率,一键触发覆盖率测试报告. 在上篇文章,一文带你解决Android app手工测试或者自动化测试覆盖率统计(撸代码版) ...
- obj2opengl：转换OBJ 3D模型到iPhone OpenGL ES兼容的数组中
原文如下:obj2opengl: convert obj 3D models to arrays compatible with iPhone OpenGL ES obj2opengl在GitHub中 ...
- 剑指Offer（四）：重建二叉树
一.前言 刷题平台:牛客网 二.题目 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6, ...