Download this plugin and install from your wordpress admin pannel.
Test on IE, FF, OPERA.
You can set the options in “Settings -> coUBB Editor”.
Posts Tagged ‘coUBB’
Wordpress Comment With coUBB Rich Editor
July 11th, 2010Add coUBB WYSIWYG Editor to your punbb
July 11th, 2010Download coUBB WYSIWYG Editor extension:
Unzip the file and Upload “co_ubbeditor” to your punbb forum extensions, then install from forum control pannel.
You may edit the css of the editor in file “co_ubbeditor/editor.css”
See a example:
coUBB Rich Editor V0.2 CSS
July 11th, 2010.coUBB_body {border:1px solid #ccc;}
.coUBB_body * {margin: 0; padding: 0}
.coUBB_bar {height:100%;padding:2px;background:#eee;border-bottom:1px solid #ccc}
.coUBB_button, .coUBB_smilies {list-style: none}
/*buttons css*/
.coUBB_button {float:left}
.coUBB_button li {display: block;float:left;width: 22px;height:25px}
/*If you load this css on youre server, you should replace the image path to your path, or absolute path “http://api-s1.colorfulphp.com/ubb/basic/button.png” */
.coUBB_button span {display:block; width: 18px;height:16px;padding:1px 0;margin: 2px auto;background:#fff url(button.png);border:1px solid #ccc;}
.coUBB_button a:hover span,.coUBB_button .hover {border:1px solid #330066;background-color:#99ccff}
#coUBB_butt_formart {background-position: 0 -145px}
#coUBB_butt_clear {background-position: 0 -128px}
#coUBB_butt_i {background-position: 0 -16px}
#coUBB_butt_u {background-position: 0 -32px}
#coUBB_butt_img {background-position: 0 -47px}
#coUBB_butt_blockquote {background-position: 0 -64px}
#coUBB_butt_link {background-position: 0 -80px}
#coUBB_butt_unlink {background-position: 0 -96px}
#coUBB_butt_color {background-position: 0 -112px}
/*smilies*/
.coUBB_smilies {float:left;margin:1px 0 0 10px;width: 200px}
.coUBB_smilies li {display: block;float:left;width: 20px;height:20px}
.coUBB_smilies span {display:block; width: 15px;height:15px;margin: 2px auto;background:url(smilies/index.png);}
.coUBB_smilies a:hover span {border:1px solid #000;background-color:#99ccff}
/*1, 2, 3, 4 are the ids of the smile id in config ’smile’ : {‘id’:'name’} */
span.coUBB_smilie_1 {background-position: 0 0}
span.coUBB_smilie_2 {background-position: -15px 0}
span.coUBB_smilie_3 {background-position: -30px 0}
span.coUBB_smilie_4 {background-position: -45px 0}
span.coUBB_smilie_5 {background-position: -60px 0}
span.coUBB_smilie_6 {background-position: -75px 0}
span.coUBB_smilie_7 {background-position: -90px 0}
span.coUBB_smilie_8 {background-position: -105px 0}
span.coUBB_smilie_9 {background-position: -120px 0}
span.coUBB_smilie_10 {background-position: -135px 0}
/*font color ctrol pannel css*/
.coUBB_colors {list-style: none; width:160px;margin:0;padding:0}
.coUBB_colors li {display:block;float:left;width:20px;height:20px}
.coUBB_colors a {display: block;width:20px;height:20px;}
.coUBB_colors a span {border:1px solid #000;width:12px;height:12px;display:block;margin: 3px}
.coUBB_colors a:hover {background:#C4CDD6;border:1px solid #330066;width:18px;height:18px;}
.coUBB_colors a:hover span {border:1px solid #ccc;width:11px;height:11px}
.coUBB_copyright {float:right;font-size:10px;color:#999;margin-top:3px}
/*input link, input image css*/
#coUBB_input {position:absolute;z-index:99999;display:none;overflow:hidden;background:#fff;border:1px solid #ccc;padding: 5px;font: 12px Arial,Verdana,Tahoma;}
#coUBB_input form {margin:0;padding:0}
#coUBB_input input {border:1px solid #ccc;background:#f7f7f7;font: 12px Arial,Verdana,Tahoma;}
How to use coUBB Rich Editor V0.2
July 11th, 2010coUBB Rich Editor is more easy to use in verion 0.2.
(Test past: IE , FF, OPERA)
You must use DIV to contain the textarea or input which want to load coUBB editor, or it would have error under IE.
You only need to add below code before ‘</body>’.
<script type=”text/javascript” src=”http://api-s1.colorfulphp.com/ubb/ubb.js”></script>
And you may config your editor textarea first. Put the config codes before that line.
(Please replace ‘ to english quote, wordpress always replace to other quote….)
(Please visit wiki for the correct js code: http://wiki.colorfulphp.com/index.php?title=CoUBB_Editor_0.2)
<script type=”text/javascript”><!–
//you may delete any line in config, then it will use default value of that argument.
coUBB_c = {
‘mode’:'basic’, //editor type, there are only basic mode, so don’t modify. you may delete this line.
‘ver’:'0.2′, // we use 0.2 version here, so don’t modify. you may delete this line.
‘width’:'99%’, //editor default with, if it is a textarea, we will use textarea with
‘height’:'200px’, //editor default height, if it is a textarea, we will use textarea height
‘id’:'do_content’, //textarea or input element ID
‘auto’:1, //auto add editor, recommend set to 1.
‘css’:':default’, //editor css, you may use your path: ‘css’:'http://yourpath/css’ (don’t add .css)
‘css_e’:”, //editor input area css, same as above
‘css_es’:”, //editor input area css string, you can put the css style here instead load css path above. suche as: ‘css_es’:'<style type=”text/css”>body {font: 12px Arial,Verdana,Tahoma;color:#666;background:#fff;} blockquote {border:1px solid #ccc;background:#f7f7f7;margin:5px;padding:5px;} img {border: 0}</style>’
‘is_html’:0, //Is the default value is html? 0 is UBB code.
’smile’:”, //you may add your smile here, see below “about smile”
’smile_’:{‘base’:”, ‘ext’:”, ‘type’:”} //smile type, see below “about smile”
};
//–>
</script>
About Smile:
You may set you smile in ver0.2.
’smile’ : {
‘id’ : ‘imgname’,
‘id2′ : ‘imagename2′
}
‘id’ is use to set smile class “span.coUBB_smilie_id” (please see CSS article for more information)
‘imagename’ the smile image name, don’t add ext(such as .gif, .png). you need set “ext” use ’smile_’:{‘ext’:’.gif’}, default value is “.png”.
You may not set image here instead of a string “:)”, if you like to inster “:)” as a smile image in your editor. You need set ’smile_”:{type”:”str”} too.
If you use image of smile, you should set the image base path in ’smile_’ : {‘base’:'dirname/’}
