000部落格園線上編輯器tinymce簡明教程
阿新 • • 發佈：2021-07-03
tinymce編輯器
下圖是部落格園編輯器介面
1.查詢HTML
寫一篇文章實際上是構建了一個HTML網頁，內容和格式都最終儲存在這個HTML網頁中。如果格式上有什麼不確定的地方，都可以查詢和修改HTML本身。你可以通過下面的“HTML”按鈕來檢視：
2. 插入程式碼
對於技術部落格來說，程式碼插入是必不可少的一個環節。常規的部落格編輯器通常都沒有這個功能。部落格園的插入程式碼算是比較齊全。值得注意的是“全部摺疊”選項：
如果程式碼過長，而文章的重心又不在於分析程式碼，那麼可以勾選這個選項。程式碼會隱藏成一個”View Code“的按鈕，只有在點選之後才展開。這樣，可以讓讀者專心於文章的脈絡。讀者快速瀏覽一遍之後，覺得還有興趣的話，可以自行展開程式碼閱讀，而不會在一開始的時候就被超長的程式碼嚇走。
3. 格式與字型
格式
所謂的格式，實際上是html標籤(tag)。比如，如果採用段落格式，那麼內容就會被鑲嵌在<p></p>的標籤之間。再比如標題1，實際上是<h1>。你可以通過查詢HTML原始碼來找出每種格式對應的標籤。採用格式的好處是可以通過CSS來統一管理每一種標籤所標示的內容。
字型
最值得推薦的字型是Courier New。它是等寬字型，每一個字元的寬度相同，所以上下兩行很容易對齊，比如：
TomIDNumber = 10
VivIDNumber = 22
如果是非等寬字型，字元寬度根據字元形狀發生變化，比如i會比較窄，而o會比較寬，所以上下兩行很難對齊。比如Arial：
TomIDNumber = 10
VivIDNumber = 22
等寬字型是程式設計師的首選字型。
4. 關於顏色
每一個人都有自己的顏色喜好，有人會比較偏愛黑白的頁面。但從認知心理學的角度來說，人們更容易閱讀標出要點的段落和文字。特別是網路和電子閱讀時代，彩色相對黑白沒有額外的印刷成本，所以利用顏色標記值得一試。下劃線、粗體、斜體也是相同的道理。 (在黑白印刷時代，人們慣用這三種方式來區分重點。你甚至可以在機械打字機上見到它們)。用這些標記方式的時候，最好可以在每篇博文中保持統一。比如可以用粗體表示命令，用斜體標記引用，用紅色表示重點。這樣，人們連續閱讀同一個部落格的時候不會覺得混亂。
CSS定製
管理 -> 設定 -> “通過CSS定製頁面風”中，我們可以定製自己的CSS風格。這是很實用的功能。
新增功能的具體步驟是：
- 確保自己的部落格園後臺支援js
這個預設是不支援，需要在管理 -> 設定 ->JS許可權，點選申請開通，寫明申請理由。 - 到後臺加入指令碼
開啟部落格園後臺，進入“設定”標籤頁，在”頁面定製 CSS 程式碼“和“頁尾Html程式碼”對應的編輯框貼上你的js程式碼，然後點“儲存”按鈕儲存。 - 按格式寫文章
在寫新博文的時候，注意按照你js腳本里設定的格式來劃分章節，比如h2,h3等。當然，以前釋出的文章如果有h2,h3之類，也會自動生成目錄索引。
1.頁面定製 CSS 程式碼
在編輯器部分，我們看到所謂的格式實際上是HTML標籤。這些標籤可以通過CSS定製來統一管理和控制。
指令碼如下：
/* 廣告遮蔽 */
#ad_t2 {
display: none;
}
.c_ad_block {
display: none;
}
/*背景顏色*/
body {
background: rgba(12,100,129,1) url('https://www.cnblogs.com/images/cnblogs_com/MouHaoHao/1443195/o_2.jpg') fixed no-repeat;
background-position: 50% 5%;
background-size: cover;
}
/*左頁籤*/
#main {
margin: 0 auto;
width: 50%;
height: 515px;
background-color: rgba(245,245,245,0.7);
padding: 10px;
padding-left: 1%;
padding-right: 1%;
margin-top: 50px;
margin-bottom: 200px;
margin-left: 9%;
box-shadow: 0 2px 6px rgba(100,100,100,0.3);
float: left;
overflow-y: scroll ;
border-radius: 4px 4px 4px 4px;
}
/*文章*/
.postTitle {
border-left: 8px solid rgba(121,169,232,1);
margin-left: 220px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
border-bottom: 1px dashed rgba(197,197,197,1.00);
border-top: 1px solid rgba(119,119,119,1.00);
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: rgba(94,142,234,1.00);
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.post {
margin-top: 15px;
box-shadow: 0 2px 6px rgba(100,100,100,0.3);
}
.c_b_p_desc {
/*background: url(images/posted_time.png) no-repeat 0 1px;*/
color: #757575;
float: left;
width: auto;
clear: both;
text-align: left;
font-family: "微軟雅黑","宋體","黑體",Arial;
font-size: 13px;
padding-right: 20px;
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.cnblogs_code {
background: rgba(255,255,255,0)
}
.cnblogs_code div {
background: rgba(255,255,255,0)
}
.cnblogs_code_toolbar {
background: rgba(255,255,255,0)
}
img {
max-width: 80%;
}
/*右頁籤*/
#rightmenu {
margin: 0 auto;
width: 25%;
height: 515px;
background-color: rgba(245,245,245,0.7);
padding: 10px;
padding-left: 1%;
padding-right: 1%;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 9%;
box-shadow: 0 2px 6px rgba(100,100,100,0.3);
float:right;
overflow-y: scroll ;
overflow-x: auto;
border-radius: 4px 4px 4px 4px;
}
#rightmenu h3 {
background-color: rgba(121,169,232,1);
margin-bottom: 0px;
padding-left: 15px;
}
#footer {
display: none;
}
/*部落格名*/
#header {
height: 100px;
clear: both;
color: rgba(245,245,245,0);
}
#header h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;
margin-top: 10px;
width: 150px;
float: left;
}
#tagline {
float: right;
display: block;
}
/*隱藏反對*/
.buryit {
display: none
}
.diggit {
float: right
}
/*隱藏連結下劃線*/
a:link {text-decoration:none;}
a:visited {text-decoration:none}
a:hover {text-decoration:none}
a:active {text-decoration:underline}
/*導航*/
#my_links {
height: 120px;
box-shadow: 0 2px 6px rgba(100,100,100,0.3);
margin-bottom: 15px;
}
#my_links h3 {
float: left;
height: 120px;
width: 20px;
text-align: center;
word-break: break-all;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 0px
}
#my_links ul {
padding-left: 0px;
float: right;
display: block;
width: 150px;
list-style-type: none;
margin-bottom: 0px;
margin-top: 0px;
}
#my_links a:link, #navList a:visited, #navList a:active{
color: #000;
font-size: 18px;
font-weight: bold;
}
/*copytight*/
#my_footer {
text-align: center;
float: right;
width: 20%;
padding: 0px;
margin: 40%;
margin-top: 0px;
margin-bottom: 0px;
}
/*右側列表樣式*/
#rightmenu ul li {
margin-left: 15px;
}
/*日曆*/
#blogCalendar {
border:1px solid rgba(121,169,232,1);
background-color: white;
box-shadow: 0 2px 6px rgba(100,100,100,0.3);
}
/*藍色標題*/
#cnblogs_post_body h3 {
border-left: 5px solid #21759b;
border-right: 5px solid #21759b;
background: transparent
url(http://images.cnblogs.com/cnblogs_com/Renyi-Fan/1188097/o_11.png)
repeat scroll 0% 0%;
/* background: linear-gradient(-30deg, rgb(241, 226, 198),
rgb(242, 226, 198) 30%, rgb(243, 227, 198) 60%, rgb(244, 230, 189)
100%); */
border-radius: 6px 6px 6px 6px !important;
font-size: 16px;
font-weight: bold;
height: 22px;
line-height: 22px;
padding: 5px 0 3px 15px;
box-shadow: 0 0 0 1px #5F5A4B, 0px 0px 6px 0px rgba(10, 10, 0, 0.5);
}
#cnblogs_post_body h1 {
font-size: 250%;
color: #8888FF;
/* box-shadow: 0 0 0 1px #5F5A4B, 0px 0px 6px 0px rgba(10, 10, 0, 0.5); */
text-shadow: 1px 1px 1px #222222;
/* padding: 5px 0 5px 20px; */
margin:0px 0px 15px 0px;
}
#cnblogs_post_body h4 {
border-left: 3px solid #8888FF;
border-right: 3px solid #8888FF;
border-radius: 4px 4px 4px 4px !important;
background: #00dd99;
color: #8888FF;
padding: 3px 0 3px 18px;
font-size: 14px;
font-weight: bold;
height: 17px;
line-height: 17px;
}
#cnblogs_post_body h5 {
border-left: 3px solid #00dd99;
color: #FB02F9;
padding: 3px 0 3px 21px;
font-size: 12px;
font-weight: bold;
height: 14px;
line-height: 14px;
}
#cnblogs_post_body h2 {
background: #2B6695 !important;
border-radius: 6px 6px 6px 6px !important;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微軟雅黑", "宋體", "黑體", Arial;
font-size: 17px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 15px 0 !important;
padding: 5px 0 5px 20px;
text-shadow: 2px 2px 3px #222222;
}
2.定製公告、頁首、頁尾HTML程式碼
在管理 -> 設定中，這三者可以新增自己想要顯示的HTML元素。
指令碼如下：
<script language="javascript" type="text/javascript">
// 生成目錄索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章節標題不是h2,只需要將這裡的h2換掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目錄</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h2').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</div><p></p>';
content += '<p style="font-size:18px"><b>正文</b></p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
var qqinfo = '<p style="color:navy;font-size:12px">討論QQ群：275729032</p>';
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>
參考資料
1.https://www.cnblogs.com/xyfll7/p/7551413.html