8 replies to this topic

[Michael R. Meyer]

Tiny MCE is a nice editor, but my 0.6 RC2 installation does not show wysiwyg in the editor's text field.

Styling and formatting does show correctly in preview and live modes, however.

Additionally, the TinyMCE "HTML" popup window on the editor's tool bar shows css correctly, but using the browser "view source" shows the likes of this:

<span class="title">This</span>

instead of: <span class="title">This</span>


I have tried various Encoding setting, but they don't help.

[Ralph]

This has been reported in Bug Tracker... Depending on which browser you are using you will experience different problems... The TinyMCE site states that it works with Mozilla, IE, and Netscape... I am having different problems in Mozilla 1.6 than I am in Firefox 0.8, yet in MS Windows IE it works fine... Go figure...!!!

[Michael R. Meyer]

Thanks. I should have looked at BugTracker first.

I can't get the TinyMCE editor to show wysiwyg in either IE 6, FoxFire 0.9.2 or Mozillia 1.7 . . . three strikes! I'll patch in the HTMLarea CSS plugin and it give it try -- the css plugin worked ok for me with version 0.5.3

Thanks again.

[fiscus]

Quote

Thanks. I should have looked at BugTracker first.

I can't get the TinyMCE editor to show wysiwyg in either IE 6, FoxFire 0.9.2 or Mozillia 1.7 . . .  three strikes! I'll patch in the HTMLarea CSS plugin and it give it try -- the css plugin worked ok for me with version 0.5.3

Thanks again.

Can you please post the edited file or a how to and the css plugin cause i never seem to have luck with it.

I tried to do it to HTMLarea a while back as it seemed like a great mod.

[Michael R. Meyer]

The CSS plugin works fine for me with Etomite 0.6 RC2
Here's how I did it, which might not be the best way.

1 Go to http://dynarch.com/htmlarea/ and download the full version of HTMLarea v3. Then find the CSS plugin in the “plugin” folder and upload the CSS plugin to /manager/media/editor/plugins

2. Download and Open manager/actions/mutate_content.dynamic.action.php

3. Go down to about line 433

4. make the revisions below, save and upload revised file. Be sure to backup or rename original file.

5. the css classes to be accessible by the HTML editor must found in the file assigned to the variable
“editor.config.pageStyle” below. You will also want to add the classes to: manager/media/style.style.css
and to assests/site/style.css

--------------------------------

<script type="text/javascript">
_editor_lang = "en";
_editor_url = "media/editor/";
</script>

<script type="text/javascript" src="media/editor/editor.js"></script>
<style type="text/css">@import url(media/editor/editor.css);</style>

<script type="text/javascript" >
// load up the plugins...
<?php if($im_plugin==1) { ?>
HTMLArea.loadPlugin("ImageManager");
<?php } ?>
HTMLArea.loadPlugin("EnterParagraphs");

<?php if($cm_plugin==1) { ?>
HTMLArea.loadPlugin("ContextMenu");
<?php } ?>
HTMLArea.loadPlugin("ListType");
HTMLArea.loadPlugin("CSS"); ]// add this line . . . . I also removed the tables plugin, you may not want to.
</script>

<textarea id="ta" name="ta" style="width:100%; height: 400px;" onChange="documentDirty=true;"><?php
if(! empty($content['content'])) {
if(substr($im_plugin_base_url, -1) != '/') {
$base_url = $im_plugin_base_url . '/';
} else {
$base_url = $im_plugin_base_url;
}
$elements = parse_url($base_url);
$image_path = $elements['path'];
// make sure image path ends with a /
if(substr($image_path, -1) != '/') {
$image_path .= '/';
}
$etomite_root = dirname(dirname($_SERVER['PHP_SELF']));
$image_prefix = substr($image_path, strlen($etomite_root));
if(substr($image_prefix, -1) != '/') {
$image_prefix .= '/';
}
// escape / in path
$image_prefix = str_replace('/', '/', $image_prefix);
$newcontent = preg_replace("/(<img[^>]+src=['"])($image_prefix)([^'"]+['"][^>]*>)/", "${1}$base_url${3}", $content['content']);
echo htmlentities($newcontent);
}
?></textarea>

<script type="text/javascript">
function initEditor() {

var config = new HTMLArea.Config();

<?php if($strict_editor==1) { ?>
config.toolbar = [
[ "formatblock", "space",
"bold", "italic", "underline", "strikethrough", "separator",
"subscript", "superscript", "separator",
"copy", "cut", "paste", "space", "undo", "redo",
"orderedlist", "unorderedlist", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode"]
];
<?php } ?>

editor = new HTMLArea("ta");


editor.registerPlugin(EnterParagraphs);
<?php if($cm_plugin==1) { ?>
editor.registerPlugin(ContextMenu);
<?php } ?>
editor.registerPlugin(ListType);

// start new for css plugin
editor.config.pageStyle = "@import url(path_to_file/style.css editor.registerPlugin(CSS, {
combos : [
{label: "CSS",
options: {"None" : "",
"Body Text" : "bodytext", // these are the styles you want to display in dropdown list.
"Red Text" : "redtext", // "Display Name" : "classname"
"Title" : "title",
"Red Title" : "redtitle",
"Medium Text" : "medtext"
}
}
]
});
editor.generate();// also this line
//end new for css plug in
// HTMLArea.replaceAll(config); must remove this line
return false;
}

document.onload=initEditor();

</script>

------------------------

[summean]

Well, I gave it a shot.... still with no luck.

Couple of questions though...

Quote

You will also want to add the classes to: manager/media/style.style.css
and to assests/site/style.css

Why do I have to define the classes in the other CSS if I am defining which style sheet to use?

Quote

HTMLArea.loadPlugin("CSS"); ]// add this line . . . . I also removed the tables plugin, you may not want to.

Did you mean for the ] to be there after ("CSS"); ? Seems out of place to me...

Quote

editor.config.pageStyle = "@import url(path_to_file/style.css editor.registerPlugin(CSS, {

1) Where do I close the quotes that you open here: "@import... ?
2) If my CSS file is in assets/site/ should the path be ../assets/site/___.css ?

Quote

editor.generate();// also this line
//end new for css plug in
// HTMLArea.replaceAll(config); must remove this line

So I need to add editor.generate(); and delete HTMLArea.replaceAll(config); ?


I'll be fiddling around with it... TIA if anyone knows the answers!

[Michael R. Meyer]

Sorry, I added the comments at about 2am!

Attached in a uncommented code segment which works.

Can can just add your styles to styles.css if you wish.

YES you need to add: editor.generate();
And remove: HTMLArea.replaceAll(config);

Sorry for the hasty reply,

Attached Files

•  cssplugin.txt   2.37K   137 downloads

[summean]

<?php
if(! empty($content['content'])) {
	if(substr($im_plugin_base_url, -1) != '/') {
  $base_url = $im_plugin_base_url . '/';
	} else {
  $base_url = $im_plugin_base_url;
	}
	$elements = parse_url($base_url);
	$image_path = $elements['path'];
	// make sure image path ends with a /
	if(substr($image_path, -1) != '/') {
  $image_path .= '/';
	}
	$etomite_root = dirname(dirname($_SERVER['PHP_SELF']));
	$image_prefix = substr($image_path, strlen($etomite_root));
	if(substr($image_prefix, -1) != '/') {
  $image_prefix .= '/';
	}
	// escape / in path
	$image_prefix = str_replace('/', '\/', $image_prefix);
	$newcontent = preg_replace("/(<img[^>]+src=['\"])($image_prefix)([^'\"]+['\"][^>]*>)/", "\${1}$base_url\${3}", $content['content']);
	echo htmlentities($newcontent);
}
?>

This code goes in the mutate_content.dynamic.action.php ???

[Michael R. Meyer]

Sorry, the file didn't attach properly . . . only a segment of it came through.

Below is the code segment from mutate_content.dynamic.action.php to use.

Add you own style classes at this point:
combos : [
{label: "CSS", // "CSS" is the Label for the DropDown Listing of Classes
options: {"None" : "",
"Body Text" : "bodytext", // TextDisplayedInDropDown : ClassName
"Medium Text" : "medtext" // NO comma after last class

} . . . .


Yes, I had to add editor.generate(); and delete HTMLArea.replaceAll(config) at the end of the segment because HTMLArea.replaceAll(config) sets up the editor as configured in the configuration section . . . I replaced it with editor.generate() works, which iss used in version 0.5.3, and replaced in 06.0 with HTMLArea.replaceAll(config). There may be a more elegant solution -- for sure! -- and I may get around to it, was well as adding a switch for theCSS plugin in the config section.

Sorry about the typos in the orginal post, caused by adding comments to the code at 2am . . . . . I should now better by now!

--- code segment for css plugin ----

<script type="text/javascript" >
// load up the plugins...
<?php if($im_plugin==1) { ?>
HTMLArea.loadPlugin("ImageManager");
<?php } ?>
HTMLArea.loadPlugin("EnterParagraphs");

<?php if($cm_plugin==1) { ?>
HTMLArea.loadPlugin("ContextMenu");
<?php } ?>
HTMLArea.loadPlugin("ListType");
HTMLArea.loadPlugin("CSS");
</script>

<textarea id="ta" name="ta" style="width:100%; height: 400px;" onChange="documentDirty=true;"><?php
if(! empty($content['content'])) {
if(substr($im_plugin_base_url, -1) != '/') {
$base_url = $im_plugin_base_url . '/';
} else {
$base_url = $im_plugin_base_url;
}
$elements = parse_url($base_url);
$image_path = $elements['path'];
// make sure image path ends with a /
if(substr($image_path, -1) != '/') {
$image_path .= '/';
}
$etomite_root = dirname(dirname($_SERVER['PHP_SELF']));
$image_prefix = substr($image_path, strlen($etomite_root));
if(substr($image_prefix, -1) != '/') {
$image_prefix .= '/';
}
// escape / in path
$image_prefix = str_replace('/', '\/', $image_prefix);
$newcontent = preg_replace("/(<img[^>]+src=['\"])($image_prefix)([^'\"]+['\"][^>]*>)/", "\${1}$base_url\${3}", $content['content']);
echo htmlentities($newcontent);
}
?></textarea>

<script type="text/javascript">
function initEditor() {

var config = new HTMLArea.Config();

<?php if($strict_editor==1) { ?>
config.toolbar = [
[ "formatblock", "space",
"bold", "italic", "underline", "strikethrough", "separator",
"subscript", "superscript", "separator",
"copy", "cut", "paste", "space", "undo", "redo",
"orderedlist", "unorderedlist", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode"]
];
<?php } ?>

editor = new HTMLArea("ta");


editor.registerPlugin(EnterParagraphs);
<?php if($cm_plugin==1) { ?>
editor.registerPlugin(ContextMenu);
<?php } ?>
editor.registerPlugin(ListType);

editor.config.pageStyle = "@import url(../assets/site/style.css);";
editor.registerPlugin(CSS, {
combos : [
{label: "CSS",
options: {"None" : "",
"Body Text" : "bodytext", "Red Text" : "redtext",
"Title" : "title",
"Red Title" : "redtitle",
"Medium Text" : "medtext"
}
}
]
});
editor.generate();
// HTMLArea.replaceAll(config);
return false;
}

document.onload=initEditor();

</script>