功能和效果，如文本后的注释框，包括：粗体、斜体、下划线、删除线、链接、图片、代码、引用、隐藏和表达。如果需要更多函数，可以尝试使用 jsquicktags 或在注释框中加载 tinymceadvanced 编辑器。
一、functions.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> <span><a href="javascript:SIMPALED.Editor.strong()" rel="external nofollow" title="粗体">粗体</a></span> <span><a href="javascript:SIMPALED.Editor.em()" rel="external nofollow" title="斜体">斜体</a></span> <span><a href="javascript:SIMPALED.Editor.underline()" rel="external nofollow" title="下划线">下划线</a></span> <span><a href="javascript:SIMPALED.Editor.del()" rel="external nofollow" title="删除线">删除线</a></span> <span><a href="javascript:SIMPALED.Editor.ahref()" rel="external nofollow" title="链接">链接</a></span> <span><a href="javascript:SIMPALED.Editor.img()" rel="external nofollow" title="图片">图片</a></span> <span><a href="javascript:SIMPALED.Editor.code()" rel="external nofollow" title="代码">代码</a></span> <span><a href="javascript:SIMPALED.Editor.quote()" rel="external nofollow" title="引用">引用</a></span> <span><a href="javascript:SIMPALED.Editor.private()" rel="external nofollow" title="隐藏">隐藏</a></span> <span><a href="javascript:SIMPALED.Editor.smilies()" rel="external nofollow" title="表情">表情</a></span> <div id="smilies-container"><div>'.$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 ----------------------------------------
二、然后加载以下 JS 即可（表情框需要 jQuery）：
/* 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 src="' + a + '" alt="" />','') } }, code: function() { addEditor(g, '<code>', '</code>') } }; window['SIMPALED'] = {}; window['SIMPALED']['Editor'] = h });
三、CSS 部分（仅供参考）：
/* 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; }
转载请注明：汇站网 » 在 WordPress 注释框中添加简单的文本编辑器和弹出式表情框
