How To Install FCKeditor and / or HtmlArea "Plugin"

Ted · Post by **Ted** » Fri Jan 07, 2005 4:16 am

All of these issues are fixed. I also have the images working when going between TinyMCE and HTMLArea.

And... I have the Image Manager working correctly again. If anyone wants to test this stuff out, I would be most grateful.

I want to have a 0.8.2rc1 out tomorrow or Saturday and hopefully 0.8.2 out on Monday or Tuesday. These are the biggest remaining issues and I want them fixed....

Greg · Post by **Greg** » Sat Jan 08, 2005 1:28 am

Changeset 1169

HTMLArea is still disappearing with associated CSS on my live site. It works fine on my local setup.

I would prefer to use TinyMCE If it had an 'Insert Link to File' feature like HTMLArea.

Ted · Post by **Ted** » Sat Jan 08, 2005 2:27 am

Well, that's thoroughly confusing... Any chance you could send me the html source of a page that doesn't work?

Greg · Post by **Greg** » Sat Jan 08, 2005 4:21 am

Hi wishy,
Even a new blank page doesn't show htmlarea as soon as I select one of my templates with associated CSS.

Ted · Post by **Ted** » Sat Jan 08, 2005 5:49 am

Just right click a page that doesn't work and hit view source. If you could send the whole thing to me, or even just the part between , I would be most appreciative. I think I know the problem, but I need a confirmation.

Thanks.

Greg · Post by **Greg** » Sat Jan 08, 2005 1:06 pm

With editor on page where htmlarea does show:

Code: Select all

<head>

<title>CMS Admin System</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="tab.css" />

<__script__ type="text/javascript" src="helparea.js"></__script>

	<__script__ type="text/javascript">
		<!--
		_editor_url = "http://www.gregbloor.com/modules/HTMLArea/htmlarea/";
		_editor_lang = "en";
		-->
	</__script>

	<__script__ type="text/javascript" src="http://www.gregbloor.com/modules/HTMLArea/htmlarea/htmlarea.js"></__script>

	<__script__ type="text/javascript">
		<!--

		HTMLArea.loadPlugin("ImageManager");
		HTMLArea.loadPlugin("InsertFile");
		HTMLArea.loadPlugin("TableOperations");
		HTMLArea.loadPlugin("ContextMenu");
		HTMLArea.loadPlugin("CharacterMap");
		HTMLArea.loadPlugin("FindReplace");
		HTMLArea.loadPlugin("InvertBackground");
		
		function initHtmlArea()
		{
			var config = new HTMLArea.Config();
			
			var editor1 = new HTMLArea("content_en", config);
			//editor1.registerPlugin(ImageManager);
			
			editor1.registerPlugin(InsertFile);
			editor1.registerPlugin(TableOperations);
			editor1.registerPlugin(ContextMenu);
			editor1.registerPlugin(CharacterMap);
			editor1.registerPlugin(FindReplace);
			editor1.registerPlugin(InvertBackground);

				

			editor1.config.pageStyle = editor1.config.pageStyle + "body {	margin: 0px 0px 0px 0px;	padding: 0px 0px 0px 0px;	font-family: verdana, arial, helvetica, sans-serif;	color: #ccc;	background-color: #333;	}a {	text-decoration: none;	font-weight: bold;	color:  #ccc;	outline: none;	}a:visited {	color:  #ccc;	}a:active {	color:  #ccc;	}a:hover {	color: #ccc;	text-decoration: underline;	}.ahem {	display: none;	}strong, b {	font-weight: bold;	}p {	font-size: 12px;	line-height: 22px;	margin-top: 20px;	margin-bottom: 10px; 	}/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i\'m leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/h1 {	font-size: 24px;	line-height: 44px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}h2 {	font-size: 18px;	line-height: 40px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}h3 {	font-size: 16px;	line-height: 22px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}h4 {	font-size: 14px;	line-height: 26px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}h5 {	font-size: 12px;	line-height: 22px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}h6 {	font-size: 10px;	line-height: 18px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}p.sectionname {	font-size: 14px;	line-height: 22px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;	}li {	font-size: 12px;	line-height: 22px;	margin-top: 0;	margin-bottom: 0;	}img {	border: 0;	}.nowrap {	white-space: nowrap;	font-size: 10px;	font-weight: bold;	margin-top: 0;	margin-bottom: 0;/* must be combined with nobr in html for ie5win */	}.tiny {	font-size: 9px;	line-height: 16px;	margin-top: 15px;	margin-bottom: 5px; 	}div.menu {	float: left;	padding: 10px 2% 10px 2%;	margin: 20px 1% 20px 2%;	background: #666;	position: fixed;	border: 5px solid #ccc;	width: 18%;	}div.content {	float: right;	padding: 10px 2% 10px 2%;	margin: 20px 2% 20px 1%;	background: #666;	border: 5px solid #ccc;	width: 68%;	/* height: 90%; */	/* overflow: scroll; */	}pre {	font-size: 12px;	line-height: 22px;	margin-top: 20px;	margin-bottom: 10px; 	}div.heading {    background-color: #64879d;     color: #EDF2F5;    padding: 9px;     text-align: left;     font-size: 16px;     font-weight: bold;      text-transform: uppercase; }div.thebody {     padding: 5px;     margin-left: 150px;     font-size: 10pt;     font-family: Tahoma; }p.smalltitle {     font-size: 12pt;     font-weight: bold;     margin: 0;     padding: 4px;     background-color: #CCCCCC;     text-transform: uppercase;     color: #64879d;}/*  All the menu css */.verbar {    color: black;    background-color: #64879d;}.submenu    {    position: fixed;    /* position: absolute; */    left: 0;    top: 0;    visibility: hidden;}.subframe   {    position: relative;    display: block;    background-color: #EDF2F5;    border: 1px solid #64879d;}.item   {    padding: 3px;    text-align: left;    white-space: nowrap;}.separator  {    background-color: #ff0000;    border-top: 1px solid #9e9a91;    border-bottom: 1px solid #ffffff;    margin: 2px 1px 2px 1px;    /* top right bottom left */    height: 0;    font-size: 1px;    line-height: 0}.item a {    position: relative;    display: block;    text-decoration: none;}.item a:link    {    color: #000000;    text-decoration: none;}.item a:visited {    color: #000000;    text-decoration: none;}.item a:hover   {    color: #ffffff;    background-color: #4b6983;    text-decoration: none;}.item a:active  {    color: #ff0000;    text-decoration: none;}.item .fwdarr   {    position: absolute;    top: 5px;    right: 7px;}";
			
			editor1.config.baseURL = "http://www.gregbloor.com/";
			editor1.generate();
			
		}
		-->
	</__script>

	<__script__ type="text/javascript" language="Javascript">
		<!--
		function page_load()
		{
			initHtmlArea();

			for (var j=0; j < document.forms.length; j++)
			{
				for (var i=0; i < (document.forms[j].elements).length; i++)
				{
					if (document.forms[j].elements[i].id == "plain")
					{
						//document.forms[j].elements[i].style.display='none';
					}
				}
			}
		}
		-->
	</__script>

	

</head>

Page where htmlarea does not show:

Code: Select all

<head>

<title>CMS Admin System</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="tab.css" />

<__script__ type="text/javascript" src="helparea.js"></__script>

	<__script__ type="text/javascript">
		<!--
		_editor_url = "http://www.gregbloor.com/modules/HTMLArea/htmlarea/";
		_editor_lang = "en";
		-->
	</__script>

	<__script__ type="text/javascript" src="http://www.gregbloor.com/modules/HTMLArea/htmlarea/htmlarea.js"></__script>

	<__script__ type="text/javascript">
		<!--

		HTMLArea.loadPlugin("ImageManager");
		HTMLArea.loadPlugin("InsertFile");
		HTMLArea.loadPlugin("TableOperations");
		HTMLArea.loadPlugin("ContextMenu");
		HTMLArea.loadPlugin("CharacterMap");
		HTMLArea.loadPlugin("FindReplace");
		HTMLArea.loadPlugin("InvertBackground");
		
		function initHtmlArea()
		{
			var config = new HTMLArea.Config();
			
			var editor1 = new HTMLArea("content_en", config);
			//editor1.registerPlugin(ImageManager);
			
			editor1.registerPlugin(InsertFile);
			editor1.registerPlugin(TableOperations);
			editor1.registerPlugin(ContextMenu);
			editor1.registerPlugin(CharacterMap);
			editor1.registerPlugin(FindReplace);
			editor1.registerPlugin(InvertBackground);

				

			editor1.config.pageStyle = editor1.config.pageStyle + "html, body{ 	margin:0; 	padding:0; } body{	font-family: verdana, sans-serif;	font-size: 80%; /*text-align: center;*/	background-color: Teal;}img{	border: 0;}acronym { 	border-bottom: 1px dotted #000; 	cursor: help; }a {    color: Blue;    text-decoration: none;}a:link {	color: Blue;}a:visited {    color: Blue;}a:hover {	color: Red;	text-decoration: underline;}#header {	margin: 5px auto 0px auto; 	padding: 0px; 	height: 100px; 	width: 99%;	overflow: hidden;	border-top: 1px solid #000;	border-right: 1px solid #000;	border-left: 1px solid #000;}#container {	width: 98%;	margin: 0 auto;	background-color: #8FBC8F;	color: #000;	border: 1px solid #000;	text-align: left;}#leftnav {	float: left;	width: 110px;	background-color: #99B49C;	padding: 5px;	border: medium double #534137;	color: #444444;	margin-top: 5px;	margin-left: 2px;}#rightnav {	float: right;	width: 120px;	margin: 0;	padding: 8px 6px;}#content {	margin-top: 5px;	margin-left: 144px;	border: medium double #534137;	margin-right: 5px;	padding: 8px 10px;	background-color: #C4D9C4;	color: #000;	text-align: left;}#footer {	clear: both;	height: 22px;	width: 100%;	line-height: 100%;	margin-top: 0px;	padding: 10px 0px 0px 0px;	text-align: center;	font-size: x-small;	background-image: url(images/barg.jpg);	background-color: #D9E9DA;	color: #FFE4C4;}.bfl:first-letter {	font-size: 150%;	margin-right: 2px;}.lft {	text-align: left;}.rht {	text-align: right;}.ctr {	text-align: center;}.cy {	font-size: 120%;	line-height: 140%;	padding: 15px;	text-align: justify;}.fntlg {	font-size: 130%;}.fntsm {	font-size: 75%;}.heading {	border-top: 1px solid #111;	border-right: 1px solid #111;		border-left: 1px solid #111;	border-bottom: 1px solid #111;	padding: 0px 0px 1px 5px;	background-color: #6495ED;	color: #FFFFFF;	font-size: 12px;	font-weight: bold;	margin-bottom: 0px;	background-image: url(images/barg.jpg);}.box {	border: 1px solid #111;	padding: 8px;	margin-top: 0px;	background-color: #D9E9DA;}#leftnav .box, #rightnav .box{	background-color: #B2D1B4;}dl.gallery {	border: 1px solid #000;	background-color: #7AA97B; /*width: 289px;	text-align: center;*/	padding: 10px;}.gallery dt img {	border-top: 1px solid #444;	border-right: 2px solid #000;	border-bottom: 2px solid #000;	border-left: 1px solid #444;	padding: 1px;}.gallery dt { 	font-weight: bold; }.gallery dd {	margin: 0;	padding: 0;}dl.log {	border: 1px solid #000;	background-color: #B6D3B7;}.log dt {	float: left;	color: #666;	padding: 5px;}.log dd {	margin-left: 100px; 	padding: 5px; 	border-left: 1px dashed #222;	border-bottom: 1px solid #ddd; /* fix creep bug in IE same colour as bkgrd */}.title {	margin: 0px 4px 0px 4px;        background-color: #990000;	color: #EDF2F5;	padding: 4px;	text-align: left;	font-size: 12px;	font-weight: bold;	text-transform: capitalize;}/*.cms-module-news {    background: url(images/news.png);    background-position: 6px 6px;    background-repeat: no-repeat;    background-color: #FEECC4;    padding: 8px;    margin: 5px 0;    border: 1px solid #888;}*/.cms-news-date {    color: #dd0000;    /*padding-left: 40px;*/}.cms-news-title {    color: #006400;    font-weight: bold;    /*padding-left: 40px;*/}.cms-news-content {    color: #333;}#tbl th {	background-color: #446C4D;	color: #fff;	text-align: center;        border: #000 solid 1px;	background-image: url(images/barg.jpg);}	#tbl tr.type1 {	background-color: #D1E2D5;}#tbl tr.type2 {	background-color: #B6CFBD;}hr{border: 1px solid #53302D;}#scroll {	/*width: 94%;*/	border: 2px solid #555;	background-color: #E5EEE8;	background-image: url(images/bumpywht.jpg);	height: 260px;	overflow: auto;	color: #333;	padding: 15px; /*margin: 5px;*/}.comicmd{	font: medium "Comic Sans MS", sans-serif;}.comicxlg {	font: x-large "Comic Sans MS", sans-serif;}/* phpmenu css */#leftnav .verbar	{	color: black;	background-color: #74A381;}#leftnav .subframe	{	background-color: #74A381;}#leftnav .item   {	font-size: 12px;	background-color: #527E5F;	color: #fff;	font-weight: bold;	border: 1px solid #000;	margin: 2px;}#leftnav .separator	{    background-color: #74A381;    border-top: 1px solid #322;    border-bottom: 1px solid #74A381;    margin: 4px 1px 3px 1px;    /* top right bottom left */}#leftnav .item a	{    color: #fff;}#leftnav .item a:link	{	color: #fff;}#leftnav .item a:visited	{	color: #fff;}#leftnav .item a:hover	{	color: #322;	background-color: #ffe;}/*Protected Pages*/.ppagesin   {    color: #FF0000;    background-color: #ffe;    font-size: 10pt;    text-align:center;    border: #000 solid 1px;    padding: 5px;}.ppagesout, .ppagesno  {     color: #AA0000;    background-color: #ffe;    font-size: 12pt;    text-align:center;    border: #000 solid 1px;    padding: 5px;}";
			
			editor1.config.baseURL = "http://www.gregbloor.com/";
			editor1.generate();
			
		}
		-->
	</__script>

	<__script__ type="text/javascript" language="Javascript">
		<!--
		function page_load()
		{
			initHtmlArea();

			for (var j=0; j < document.forms.length; j++)
			{
				for (var i=0; i < (document.forms[j].elements).length; i++)
				{
					if (document.forms[j].elements[i].id == "plain")
					{
						//document.forms[j].elements[i].style.display='none';
					}
				}
			}
		}
		-->
	</__script>

	

</head>

Page header not in editor:

Code: Select all

<head> 
<title>gregbloor.com - test</title>
<meta name="keywords" content="greg bloor" />
<meta name="description" content="PHP MySQL stuff" />
<meta name="author" content="Greg Bloor" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" type="text/css" href="stylesheet.php?templateid=7" />

	<link rel="stylesheet" href="http://www.gregbloor.com/modules/PHPLayers/phplayers/layersmenu-cms.css" type="text/css"></link>
	<__script__ language="JavaScript" type="text/javascript" src="http://www.gregbloor.com/modules/PHPLayers/phplayers/libjs/layersmenu-browser_detection.js"></__script>
	<__script__ language="JavaScript" type="text/javascript" src="http://www.gregbloor.com/modules/PHPLayers/phplayers/libjs/layersmenu-library.js"></__script>
	<__script__ language="JavaScript" type="text/javascript" src="http://www.gregbloor.com/modules/PHPLayers/phplayers/libjs/layersmenu.js"></__script></head>

Hope this helps wishy.

Ted · Post by **Ted** » Sat Jan 08, 2005 1:58 pm

More than you can imagine. It's a javascript error because of the " around Comic Sans. I'll fix it. Thanks!

Ted · Post by **Ted** » Sat Jan 08, 2005 2:21 pm

Works for me now. Thanks again.

Greg · Post by **Greg** » Sat Jan 08, 2005 3:06 pm

Works for me too... Thanks wishy!

megabob3 · Post by **megabob3** » Sun Jan 16, 2005 3:20 am

I realized a module of FCKeditor
http://www.awakening.it/uploads/FCKeditor.zip

Really i like more it, i had not any type of bugs.
Instead with HTMLArea yep and too much, i don't know you.
But me with Firefox, i don't use IE, several thing don't go, like TABLE and LINK.

I spent really few time on include it inside CMSMS, and you can see this seeing:
cmsmodule.php
modulefunctions.php (here i forgot to delete line 23 & 24)

The only thing to do, i guess is modify
FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php
the line 37
$GLOBALS["UserFilesPath"] = "/uploads/" ;

setting the directory of upload item.

Yuo can try it here:
www.awakening.it/test
user: admin
pass: admin

Bye

Ted · Post by **Ted** » Sun Jan 16, 2005 3:44 am

Nice. Looks very similar to the code I started writing... including the whole iframe thing. The trick to getting that uploads page to work right is to include config.php and use the uploads_path. Keep up the good work!

megabob3 · Post by **megabob3** » Sun Jan 16, 2005 9:57 am

wishy wrote:Nice. Looks very similar to the code I started writing... including the whole iframe thing. The trick to getting that uploads page to work right is to include config.php and use the uploads_path. Keep up the good work!

It's your code

, i started from its :p

I know i know, i tried to include "config.php", but i was resolving in nothing.

I must retry after.

I was using
include("../../../../../../config.php");

Bye

megabob3 · Post by **megabob3** » Sun Jan 16, 2005 3:03 pm

I did it, think :p
new connector.php

/************************/

/**************************/

Bye

Greg · Post by **Greg** » Sun Jan 16, 2005 5:00 pm

The path I get is not correct:

/ebsites/gregbloorcms/uploads/Image/apache_pb.gif

Should be /websites/gregbloorcms/uploads/Image/apache_pb.gif

The w in websites is missing.

When I take out the +1 on line 57 it works correctly!

Now if it would find the 'images' folder instead of the 'Image' folder it would be perfect!

Greg · Post by **Greg** » Sun Jan 16, 2005 5:41 pm

To set the height of the editor I added line 36 $neweditor->Height = '400px'; to \modules\FCKeditor\modulefunctions.php

Is this the correct spot?