Download 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:
Archive for the ‘UBB WYSWYG Editor’ category
Add coUBB WYSIWYG Editor to your punbb
July 11th, 2010coUBB 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/’}
How to use colorful ubb editor.
November 11th, 2009It is easy for install colorful ubb editor on your webpage. You just need to load this script before ”</body>”(Document End) .
(Demo: http://api.colorfulphp.com/ubb/ | Happy Songtext )
First Step:
Please insert this code before ”</body>” tag, and after you Textarea (Form).
<script type="text/javascript" src="http://api.colorfulphp.com/ubb/ubb.js"></script>
Second Step:
You should config UBB Editor Code before load the script above.(Insert this config code before above script.) example:
<script type="text/javascript"> coUBB_c = {'id':'do_content', 'mode':'basic', 'ver':'0.1', 'width':'99%', 'height':'200px', 'auto':1, 'css':':default', 'css_e':}; </script>
About Config Arguments:
You must edit the arg of “id” to the id of you textarea or input.
Example:
<textarea cols="50" rows="10" name="do_content" id="do_content" style="width:99%" onclick="if(typeof(coUBB) == 'object'){coUBB.make(coUBB_c);}"></textarea>
do_content is the id value.
Don’t modify arg: mode , ver. Because there are no other version at present.
“width” and ” height” is default value if you are use a INPUT element.
You can load your css as: ‘css’ : ‘http://yourpath’
Please check about css for more information.
Full Example:
1. textarea id is “do_content” same as default config, so you don’t need config it.
<form method="post">
<textarea cols="50" rows="10" name="do_content" id="do_content" style="width:99%" onclick="if(typeof(coUBB) == 'object'){coUBB.make(coUBB_c);}"></textarea>
<input type="submit" />
</form>
<script type="text/javascript" src="http://api.colorfulphp.com/ubb/ubb.js"></script>
2: use your custom config
<form method="post">
<textarea cols="50" rows="10" name="myname" id="myname" style="width:99%" onclick="if(typeof(coUBB) == 'object'){coUBB.make(coUBB_c);}"></textarea>
<input type="submit" />
</form>
<script type="text/javascript"> coUBB_c = {'id':'myname', 'mode':'basic', 'ver':'0.1', 'auto':1,'css':'http://mycsspath', 'css_e':}; </script>
<script type="text/javascript" src="http://api.colorfulphp.com/ubb/ubb.js"></script>
