htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Dynamically Get CSS class names for CSS plugin


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


morris
Novice

Feb 8, 2005, 4:05 PM

Post #1 of 2 (83298 views)
Shortcut
Dynamically Get CSS class names for CSS plugin Can't Post

Hey All,

I just wrote a PHP class that will take a css file and get the css class names out of it. And if you want return the javascript code which registers the class names for the CSS plugin for HTML Area 3.0... This is my first publiched PHP class I've ever made so if you write PHP let me know what you think of the code... Thanks,

THE CLASS

Code
<?php 

// ------------------------------------------------
// CSS Extractor Class
// v1.0 by Craig Morris
// Will extract all css class names from a css file
// ------------------------------------------------
class CSSExtractor
{
// -----------------------------------
// regular expression to catch classes
// -----------------------------------
var $REG_EXP = '|((\s*([^,{]+)\s*,?\s*)*?){((\s*([^:]+)\s*:\s*([^;]+?)\s*;\s*)*?)}|';

var $css_url; // URL of the css file

// ------------------------------------
// constructor will only assign CSS URL
// ------------------------------------
function CSSExtractor($css_url)
{
$this->css_url = $css_url;
}

// ------------------------------------------
// get classes from css file and return array
// ------------------------------------------
function extractClasses()
{
// ---------------
// get file string
// ---------------
$handle = fopen($this->css_url, "r");
$css = fread($handle, filesize($this->css_url));
fclose($handle);

// --------------------------
// perform regular expression
// --------------------------
preg_match_all($this->REG_EXP, $css, $matches);

// ----------------------
// process classes in css
// ----------------------
$classes = $matches[1];
$processed_classes = array();
foreach($classes as $key=>$class)
{
$array = explode('.', $class);
$array = explode(':', $array[1]);
if ($array[0] != NULL || $array[0] != '') {
$processed_classes[] = trim($array[0]);
}
}
$processed_classes = array_unique($processed_classes);

// ------------------
// return the classes
// ------------------
return $processed_classes;
}

// ------------------------------------------------------
// echo the javascript required by HTMLArea3.0 CSS Plugin
// ------------------------------------------------------
/*
editor.config.pageStyle = "@import url(../styles/general.css);";
editor.registerPlugin(CSS, {
combos : [
{ label: "CSS Class",
// MENU ITEM CLASS NAME
options: { "None" : "",
"Txt in Drop Menu" : "css class name in file"
}
}
]
});
*/
function getJS($targ='editor')
{
$classes = $this->extractClasses();
$js = "
$targ.config.pageStyle = \"@import url(../styles/general.css);\";
$targ.registerPlugin(CSS, {
combos : [
{ label: \"CSS\",
options: {
";
foreach ($classes as $class)
{
$js .= " \"" . $this->getFriendlyName($class) . '" : "' . $class . "\",\n";
}
// get rid of last ',', -2 because of newline character
$js = substr($js, 0, -2);
$js .= "
}
}
]
});";

return $js;
}

// ------------------------------------------------------
// echo the javascript required by HTMLArea3.0 CSS Plugin
// example: headingCopy becomes Heading Copy
// ------------------------------------------------------
function getFriendlyName($name) {
/* things to do to name
1. turn capital letters into spaces ie headingCopy = heading Copy
2. turn other characters into spaces (-_) heading_copy = heading copy
3. Uppercase the first character of each word in a string
*/
$newName = preg_replace('|([A-Z])|', ' \1', $name); // 1.
$newName = preg_replace('|[-_]|', ' ', $newName); // 2.
$newName = ucwords($newName); // 3.

return $newName;
}

} // end class


Implementation

Code
<!-- HTMLAREA 3.0 --> 
<script type="text/javascript">
//<![CDATA[
_editor_url = "includes/htmlarea3/";
_editor_lang = "en";
//]]>
</script><!-- load the main HTMLArea file -->
<script type="text/javascript" src="includes/htmlarea3/htmlarea.js"></script>

<script type="text/javascript">
//<![CDATA[
HTMLArea.loadPlugin("ImageManager");
HTMLArea.loadPlugin("CSS");
HTMLArea.loadPlugin("TableOperations");
initdocument = function () {
var editor = new HTMLArea("ContentHTML");

<?php
// print out CSS plugin stuff
require_once('includes/CSSExtractor.class.php');
$ce = new CSSExtractor('includes/cms.css');
echo $ce->getJS('editor');
?>

// load table stuff
editor.registerPlugin(TableOperations);

editor.generate();
}
function addEvent(obj, evType, fn)
{
if (obj.addEventListener) { obj.addEventListener(evType, fn, true); return true; }
else if (obj.attachEvent) { var r = obj.attachEvent("on"+evType, fn); return r; }
else { return false; }
}
addEvent(window, 'load', initdocument);
//]]>
</script>
<!-- /HTML AREA 3.0 -->



smaulaz
New User

Feb 9, 2005, 3:14 AM

Post #2 of 2 (83282 views)
Shortcut
Re: [morris] Dynamically Get CSS class names for CSS plugin [In reply to] Can't Post

Hello

Can you explain me how to implemente your class in the HTMLarea structure ?

I don't work often with php classes.

Thank you in advance.

PS : Sorry for my basic school english.

 
 
 


Search for (options)