给wordpress添加一个简单的文字编辑器比如粗体、斜体、下划线、删除线、链接、图片、代码、引用、隐藏、表情、等等功能，这样显得你的主题很实用美观~~
让我们一起动手吧~
首先把以下代码添加到您的博客主题的Fuctions.php中，
<code>
<?php
// -- START ----------------------------------------
function wp_smilies() {
global $wpsmiliestrans;
if ( !get_option('use_smilies') or (empty($wpsmiliestrans))) return;
$smilies = array_unique($wpsmiliestrans);
$link='';
foreach ($smilies as $key => $smile) {
$file = get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$smile;
$value = " ".$key." ";
$img = "<img src=\"{$file}\" alt=\"{$smile}\" />";
$imglink = htmlspecialchars($img);
$link .= "<span><a href=\"#commentform\" title=\"{$smile}\" onclick=\"document.getElementById('comment').value += '{$value}'\">{$img}</a></span>";
}
echo '<div class="editor_tools clearfix">
<span><a href="javascript:SIMPALED.Editor.strong()" title="粗体" class="et_strong">粗体</a></span>
<span><a href="javascript:SIMPALED.Editor.em()" title="斜体" class="et_em">斜体</a></span>
<span><a href="javascript:SIMPALED.Editor.underline()" title="下划线" class="et_underline">下划线</a></span>
<span><a href="javascript:SIMPALED.Editor.del()" title="删除线" class="et_del">删除线</a></span>
<span><a href="javascript:SIMPALED.Editor.ahref()" title="链接" class="et_ahref">链接</a></span>
<span><a href="javascript:SIMPALED.Editor.img()" title="图片" class="et_img">图片</a></span>
<span><a href="javascript:SIMPALED.Editor.code()" title="代码" class="et_code">代码</a></span>
<span><a href="javascript:SIMPALED.Editor.quote()" title="引用" class="et_quote">引用</a></span>
<span><a href="javascript:SIMPALED.Editor.private()" title="隐藏" class="et_private">隐藏</a></span>
<span><a href="javascript:SIMPALED.Editor.smilies()" title="表情" class="et_smilies">表情</a></span>
<div id="smilies-container"><div class="wp_smilies">'.$link.'</div></div></div>';
}
if (is_user_logged_in()) {
add_filter('comment_form_logged_in_after', 'wp_smilies');
}
else {
add_filter( 'comment_form_after_fields', 'wp_smilies');
}
function private_content($atts, $content = null)
{ if (current_user_can('create_users'))
return '' . $content . ''; return '***隐藏内容仅管理员可见***'; }
add_shortcode('private', 'private_content');
add_filter('comment_text', 'do_shortcode'); /* 添加隐藏短代码*/
// -- END ----------------------------------------
?>
</code>
<?php
// -- START ----------------------------------------
function wp_smilies() {
global $wpsmiliestrans;
if ( !get_option('use_smilies') or (empty($wpsmiliestrans))) return;
$smilies = array_unique($wpsmiliestrans);
$link='';
foreach ($smilies as $key => $smile) {
$file = get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$smile;
$value = " ".$key." ";
$img = "<img src=\"{$file}\" alt=\"{$smile}\" />";
$imglink = htmlspecialchars($img);
$link .= "<span><a href=\"#commentform\" title=\"{$smile}\" onclick=\"document.getElementById('comment').value += '{$value}'\">{$img}</a></span>";
}
echo '<div class="editor_tools clearfix">
<span><a href="javascript:SIMPALED.Editor.strong()" title="粗体" class="et_strong">粗体</a></span>
<span><a href="javascript:SIMPALED.Editor.em()" title="斜体" class="et_em">斜体</a></span>
<span><a href="javascript:SIMPALED.Editor.underline()" title="下划线" class="et_underline">下划线</a></span>
<span><a href="javascript:SIMPALED.Editor.del()" title="删除线" class="et_del">删除线</a></span>
<span><a href="javascript:SIMPALED.Editor.ahref()" title="链接" class="et_ahref">链接</a></span>
<span><a href="javascript:SIMPALED.Editor.img()" title="图片" class="et_img">图片</a></span>
<span><a href="javascript:SIMPALED.Editor.code()" title="代码" class="et_code">代码</a></span>
<span><a href="javascript:SIMPALED.Editor.quote()" title="引用" class="et_quote">引用</a></span>
<span><a href="javascript:SIMPALED.Editor.private()" title="隐藏" class="et_private">隐藏</a></span>
<span><a href="javascript:SIMPALED.Editor.smilies()" title="表情" class="et_smilies">表情</a></span>
<div id="smilies-container"><div class="wp_smilies">'.$link.'</div></div></div>';
}
if (is_user_logged_in()) {
add_filter('comment_form_logged_in_after', 'wp_smilies');
}
else {
add_filter( 'comment_form_after_fields', 'wp_smilies');
}
function private_content($atts, $content = null)
{ if (current_user_can('create_users'))
return '' . $content . ''; return '***隐藏内容仅管理员可见***'; }
add_shortcode('private', 'private_content');
add_filter('comment_text', 'do_shortcode'); /* 添加隐藏短代码*/
// -- END ----------------------------------------
?>
</code>
接下来就是要用JQuery来驱动了，你可以把以下代码添加到你主题的single.php 并用 script 包围起来。
<code>
/* smilies toggle
-----------------------------------------------*/
$(function() {
$("a.et_smilies").click(function() {
$('#smilies-container').toggle(function() {
$(document).click(function(event) {
if (!($(event.target).is('#smilies-container') || $(event.target).parents('#smilies-container').length || $(event.target).is('a.et_smilies'))) {
$('#smilies-container').hide(200);
}
});
});
});
});
/* comment editor
-----------------------------------------------*/
$(function() {
function addEditor(a, b, c) {
if (document.selection) {
a.focus();
sel = document.selection.createRange();
c ? sel.text = b + sel.text + c: sel.text = b;
a.focus()
} else if (a.selectionStart || a.selectionStart == '0') {
var d = a.selectionStart;
var e = a.selectionEnd;
var f = e;
c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
c ? f += b.length + c.length: f += b.length - e + d;
if (d == e && c) f -= c.length;
a.focus();
a.selectionStart = f;
a.selectionEnd = f
} else {
a.value += b + c;
a.focus()
}
}
var g = document.getElementById('comment') || 0;
var h = {
strong: function() {
addEditor(g, '<strong>', '</strong>')
},
em: function() {
addEditor(g, '<em>', '</em>')
},
del: function() {
addEditor(g, '<del>', '</del>')
},
underline: function() {
addEditor(g, '<u>', '</u>')
},
quote: function() {
addEditor(g, '<blockquote>', '</blockquote>')
},
private: function() {
addEditor(g, '***隐藏内容仅管理员可见***')
},
ahref: function() {
var a = prompt('请输入链接地址', 'http://');
var b = prompt('请输入链接描述','');
if (a) {
addEditor(g, '<a target="_blank" href=”' + a + '" rel="external”>' + b + '</a>','')
}
},
img: function() {
var a = prompt('请输入图片地址', 'http://');
if (a) {
addEditor(g, '<img decoding="async" src="' + a + '" alt="" />','')
}
},
code: function() {
addEditor(g, '<code>', '</code>')
}
};
window['SIMPALED'] = {};
window['SIMPALED']['Editor'] = h
});
</code>
/* smilies toggle
-----------------------------------------------*/
$(function() {
$("a.et_smilies").click(function() {
$('#smilies-container').toggle(function() {
$(document).click(function(event) {
if (!($(event.target).is('#smilies-container') || $(event.target).parents('#smilies-container').length || $(event.target).is('a.et_smilies'))) {
$('#smilies-container').hide(200);
}
});
});
});
});
/* comment editor
-----------------------------------------------*/
$(function() {
function addEditor(a, b, c) {
if (document.selection) {
a.focus();
sel = document.selection.createRange();
c ? sel.text = b + sel.text + c: sel.text = b;
a.focus()
} else if (a.selectionStart || a.selectionStart == '0') {
var d = a.selectionStart;
var e = a.selectionEnd;
var f = e;
c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
c ? f += b.length + c.length: f += b.length - e + d;
if (d == e && c) f -= c.length;
a.focus();
a.selectionStart = f;
a.selectionEnd = f
} else {
a.value += b + c;
a.focus()
}
}
var g = document.getElementById('comment') || 0;
var h = {
strong: function() {
addEditor(g, '<strong>', '</strong>')
},
em: function() {
addEditor(g, '<em>', '</em>')
},
del: function() {
addEditor(g, '<del>', '</del>')
},
underline: function() {
addEditor(g, '<u>', '</u>')
},
quote: function() {
addEditor(g, '<blockquote>', '</blockquote>')
},
private: function() {
addEditor(g, '***隐藏内容仅管理员可见***')
},
ahref: function() {
var a = prompt('请输入链接地址', 'http://');
var b = prompt('请输入链接描述','');
if (a) {
addEditor(g, '<a target="_blank" href=”' + a + '" rel="external”>' + b + '</a>','')
}
},
img: function() {
var a = prompt('请输入图片地址', 'http://');
if (a) {
addEditor(g, '<img decoding="async" src="' + a + '" alt="" />','')
}
},
code: function() {
addEditor(g, '<code>', '</code>')
}
};
window['SIMPALED'] = {};
window['SIMPALED']['Editor'] = h
});
</code>
到这里大功完成一半了，接下来的就是要美化了，当然用CSS了。请安个人的口味酌情修改添加~
<code>
/* comment-editor
-----------------------------------------------*/
.editor_tools {
position: relative;
margin: 0 -5px -10px;
border:1px solid #ccc;
background-color:#e9e9e9;
background-image:-ms-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-moz-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-o-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-webkit-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:linear-gradient(bottom,#ddd,#e9e9e9);
}
.editor_tools a {
margin: 2px;
line-height:20px;
width:20px;
height:20px;
float:left;
overflow:hidden;
display:block;
text-indent:-2000em;
}
.editor_tools span,
.editor_tools span:hover {
margin: 4px 0 4px 8px;
color:#464646;
border:1px solid #c3c3c3;
-webkit-border-radius:3px;
border-radius:3px;
background-color:#eee;
background-image:-ms-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-moz-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-o-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-webkit-linear-gradient(bottom,#e3e3e3,#fff);
background-image:linear-gradient(bottom,#e3e3e3,#fff);
float:left;
overflow:hidden;
cursor: pointer;
}
.editor_tools span.splitter {
padding-right: 5px;
margin-right: 15px;
border-right: 1px solid #c3d8eb;
}
.editor_tools span:hover {
border-color:#aaa;
background:#ddd;
}
.editor_tools a.et_strong {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -280px transparent;
}
.editor_tools a.et_em {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -350px transparent;
}
.editor_tools a.et_underline {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -420px transparent;
}
.editor_tools a.et_del {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -490px transparent;
}
.editor_tools a.et_ahref {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -560px transparent;
}
.editor_tools a.et_img {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -630px transparent;
}
.editor_tools a.et_code {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -700px transparent;
}
.editor_tools a.et_quote {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -770px transparent;
}
.editor_tools a.et_private {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -840px transparent;
}
.editor_tools a.et_smilies {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -910px transparent;
}
.wp_smilies a{
text-indent:0;
margin-left:4px;
margin-top:4px;
}
#smilies-container span {
margin: 5px;
width:24px;height:24px;
cursor: pointer;
}
#smilies-container{
display:none;
position: absolute;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index:99;
cursor:default!important;
-moz-border-radius:3px;
border-radius:3px;
left: 346px;
top: -29px;
width: 396px;
padding: 10px;
}</code>
/* comment-editor
-----------------------------------------------*/
.editor_tools {
position: relative;
margin: 0 -5px -10px;
border:1px solid #ccc;
background-color:#e9e9e9;
background-image:-ms-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-moz-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-o-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-webkit-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:linear-gradient(bottom,#ddd,#e9e9e9);
}
.editor_tools a {
margin: 2px;
line-height:20px;
width:20px;
height:20px;
float:left;
overflow:hidden;
display:block;
text-indent:-2000em;
}
.editor_tools span,
.editor_tools span:hover {
margin: 4px 0 4px 8px;
color:#464646;
border:1px solid #c3c3c3;
-webkit-border-radius:3px;
border-radius:3px;
background-color:#eee;
background-image:-ms-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-moz-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-o-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-webkit-linear-gradient(bottom,#e3e3e3,#fff);
background-image:linear-gradient(bottom,#e3e3e3,#fff);
float:left;
overflow:hidden;
cursor: pointer;
}
.editor_tools span.splitter {
padding-right: 5px;
margin-right: 15px;
border-right: 1px solid #c3d8eb;
}
.editor_tools span:hover {
border-color:#aaa;
background:#ddd;
}
.editor_tools a.et_strong {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -280px transparent;
}
.editor_tools a.et_em {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -350px transparent;
}
.editor_tools a.et_underline {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -420px transparent;
}
.editor_tools a.et_del {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -490px transparent;
}
.editor_tools a.et_ahref {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -560px transparent;
}
.editor_tools a.et_img {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -630px transparent;
}
.editor_tools a.et_code {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -700px transparent;
}
.editor_tools a.et_quote {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -770px transparent;
}
.editor_tools a.et_private {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -840px transparent;
}
.editor_tools a.et_smilies {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -910px transparent;
}
.wp_smilies a{
text-indent:0;
margin-left:4px;
margin-top:4px;
}
#smilies-container span {
margin: 5px;
width:24px;height:24px;
cursor: pointer;
}
#smilies-container{
display:none;
position: absolute;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index:99;
cursor:default!important;
-moz-border-radius:3px;
border-radius:3px;
left: 346px;
top: -29px;
width: 396px;
padding: 10px;
}</code>
注：这种必须是wordpress 3.1 以上的哦~
附上一张CSS中用到的的图片哦~点击这里查看图片哦~
