PDA

Volledige versie bekijken : wysiwyg editor in php


AKNL
%Europe/Berlin %956 %2005, 23:57
IK zou graag een wysiwyg editor willen gebruiken in m'n php bestanden zodat ik dmv die editor makkelijker teksten kan opmaken en stuff. Iemand een idee hoe ik dit het beste kan integreren...free software, zelf maken, etc

Thanks

mech7
%Europe/Berlin %960 %2005, 00:03
Zelf maken is een beetje een grote opgave... overigens heeft het niet veel zin het wiel opnieuw uit te vinden...

Op het moment zijn er 3 editors het beste:
FCK editor
TinyMCE
Spaw editor

HTML Area staat er neit tussen aangezien de voortgang in opgegeven.. er zijn verschillende gasten die het project doorzetten alleen tot nu toe heb ik nog neit echt veel vooruitgang gezien. FCK is echt het uitgebreidste, daarmee ook een van de zwaartste. TinyMCE is licht behalve als je hem met alle plugins laad dan is hij ongeveer evenzwaar als FCK alleen zonder File Manager er zijn gratis plugins en een commerciele van hunzelf.

AKNL
%Europe/Berlin %000 %2005, 01:01
thanks. Ik ga het eens bekijken allemaal.

Ik had overigens al SPAW gedownload. Ziet er leuk uit, maar snap niet helemaal hoe je het kan integreren met m'n eigen gemaakte php files etc. Hopelijk is de documentatie beter van die jij heb opgegeven.

Iig bedankt voor je reactie

AKNL
%Europe/Berlin %816 %2005, 20:36
ik heb gekozen voor die FCKeditor, maar heb alleen nog ene vraag hierover. Hoe kan ik deze zover krijgen dat als ik onderstaand gebruik, ik de data in een database kan wegschrijven en dat deze dan ook weer op te halen en te editten is.

Onderstaand is sample01.php die er standaard bij zit:

<?php
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: sample01.php
* Sample page.
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
*/

include("../../fckeditor.php") ;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<link href="../sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>FCKeditor - PHP - Sample 1</h1>
This sample displays a normal HTML form with an FCKeditor with full features
enabled.
<hr>
<form action="sampleposteddata.php" method="post" target="_blank">
<?php
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// $oFCKeditor->BasePath = '/FCKeditor/' ; // '/FCKeditor/' is the default value.
$sBasePath = $_SERVER['PHP_SELF'] ;
$sBasePath = substr( $sBasePath, 0, strpos( $sBasePath, "_samples" ) ) ;

$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = $sBasePath ;
$oFCKeditor->Value = 'This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.' ;
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Ik wil graag per pagina van mijn site een edit scherm maken, waar ik dus van buiten af die content kan updaten.

Hoor graag of iemand mij kan helpen of voorbeelden heeft.
alvast bedankt.

mech7
%Europe/Berlin %858 %2005, 21:35
Eerst de editor ophalen de name wordt nu articleText..


// Add the editor
$oFCKeditor = new FCKeditor('articleText');
$oFCKeditor->BasePath = $editorPath;
$oFCKeditor->Width = "100%";
$oFCKeditor->Height = 500;
$oFCKeditor->Config['SkinPath'] = $oFCKeditor->BasePath . 'editor/skins/office2003/';
$oFCKeditor->Create();


Nu de post var in een string zetten


if (isset($_POST['articleText'])) {
$articletext = $_POST['articleText'];
}


En dan ergens een query uitvoeren naar de database.. ook is het wel handig om mysql real escape te doen.. anders kan je errors krijgen vanwege komma's etc..

Als je een article edit kan je de value meegeven..


// Instantiate and add the editor to the body
$oFCKeditor = new FCKeditor('articleText');
$oFCKeditor->BasePath = $editorPath;
$oFCKeditor->Width = "100%";
$oFCKeditor->Height = 500;
$oFCKeditor->Config['SkinPath'] = $oFCKeditor->BasePath . 'editor/skins/office2003/';
$oFCKeditor->Value = $article;
$oFCKeditor->Create();


Waarbij de string $article de inhoud van het artikel bevat opgehaald uit de database.

AKNL
%Europe/Berlin %449 %2005, 11:46
zou je misschien voor mij een php bestandje kunnen maken? ik ben een erge php newbie en zo snap ik het wat sneller hoe ik het in mekaar moet flatsen. Alvast ebdankt iig.

mech7
%Europe/Berlin %469 %2005, 12:15
Umm heel script typen begin ik niet aan mischien is beter als je eerst wat basis PHP kennis op gaat doen.. zo gebruik ik hem in cms dat ik heb geschreven voor school...

Maar ik denk neit dat je er veel aan hebt aangezien meeste van mijn functies in classes staan bv voor uitvoergen van de query.. en deze doc wordt geinclude door frontside controller..


// Make sure the permission is given through the link else exit the script
if ($_GET['permission'] == create) {

$permission='create';

} else {
exit();
}

// Check the user's permission. If he has enough rights
if ( !$user->checkPermission($permission) ) {
// Show message if he has not enough permissions
$content='You do not have permission to make a new article';

// else perform function
} else {

// Require the editor class
require_once("Editors/fckeditor/fckeditor.php") ;

// Include PEAR::Validate
require_once('Validate-0.4.1/Validate.php');


// Get userid
$userid = $user->userId;

// Check to see what has been entered in the forms
// If the article is saved, send it to the database
if (isset($_POST['articleTitle'])) {


// Define the options for formatting the name field
$name_options = array('format'=>VALIDATE_ALPHA.VALIDATE_SPACE.VALIDATE_NUM,'min_le ngth'=>3);

// Validate title
if ( !Validate::string($_POST['articleTitle'],$name_options) )
{
$error='<span class="error">You need to enter a title of at least 3 characters</span>';

// Else show succes message
} else {

$articletitle = $_POST['articleTitle'];
$articletext = $_POST['articleText'];
$metaD = $_POST['metatagdescription'];
$metaK = $_POST['metatagkeywords'];
$cat_id = $_POST['categoryName'];
$languageName = $_POST['languageName'];
$published = $_POST['published'];

// Escape for special sql characters
$articletitle = mysql_escape_string($articletitle);
$articletext = mysql_escape_string($articletext);
$metaDescription = mysql_escape_string($metaDescription);
$metaD = mysql_escape_string($metaD);
$metaK = mysql_escape_string($metaK);

$sql = "INSERT INTO scms_articles SET
title='$articletitle',
articletext='$articletext',
meta_description='$metaD',
meta_keywords='$metaK',
categoryid='$cat_id',
languageid='$languageName',
date=CURDATE(),
published='$published',
userid='$userid'";

// Use db class to perform query
$db->query($sql);

// If the form saved succesfully
$content = <<<EOD
<div class="contentPane">
<div class="contentPad">
<h1>The article was saved succesfully</h1>
<p><a href="index2.php?page=articles&amp;permission=view">Click here to go back to the article list</a></p>
<p<a href="index2.php?page=newarticle&amp;permission=create">Click here to create a new article</a></p>
</div>
</div>
EOD;

// Page Title
$title = 'Article saved';

// Refresh autmaticall after 3 seconds to article list
$head = '<meta http-equiv="refresh" content="3;URL='.$liveURL.'/cmsadmin/index2.php?page=articles&amp;permission=view">';
}
}
// If there is no title POST var or there
// is an error message show this body
if (!$_POST['articleTitle'] or $error ) {

// Get the categories
$catSQL="SELECT id, category FROM scms_categories";
$categories=$db->query($catSQL);

// Get the languages
$languageSQL="SELECT id, language FROM scms_languages";
$languages=$db->query($languageSQL);

// Start adding content in a string
$content .= <<<EOD
<div class="contentPane">
<div class="contentPad">
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
$error
<form name="articleForm" id="articleForm" method="post" action="index2.php?page=newarticle&amp;permission=create">
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="tabPane">
<tr>
<td>Option</td>
<td>
<input name="Save" class="button" type="submit" value="save" /> <input name="Reset" class="button" type="reset" value="reset" />
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('Enter the title for the article in this form. Every article must have an title, the title name will become the page title in the full article.',CAPTION, 'Title');" onmouseout="return nd();" class="help">Title:</a></td>
<td><input type="text" name="articleTitle" />
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('Enter the article text for the article in this form. The text will be placed in the body of the page, you can upload, and insert images, and style your content with the WYSIWYG Editor.</br></br> It is also possible to create forms, clean up word html and insert special characters.',CAPTION, 'Article text');" onmouseout="return nd();" class="help">Article text:</a></td>
<td>
EOD;
// Add the editor
$oFCKeditor = new FCKeditor('articleText');
$oFCKeditor->BasePath = $editorPath;
$oFCKeditor->Width = "100%";
$oFCKeditor->Height = 500;
$oFCKeditor->Config['SkinPath'] = $oFCKeditor->BasePath . 'editor/skins/office2003/';
$content .= $oFCKeditor->Create();
$content .= <<<EOD
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('Select in which category you want the article to be placed, a category is a way to subdivide your content e.g: Products, News, About.',CAPTION, 'Category');" onmouseout="return nd();" class="help">Category:</a></td>
<td>
<select name="categoryName">
EOD;

// Display the categories in a option list
while ($categoryArray=$categories->fetch($categories)) {
$catID = $categoryArray['id'];
$catName = htmlspecialchars ($categoryArray['category']);
$content .= "<option value='$catID'>$catName</option>\n";
}

$content .= <<<EOD
</select>
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('It is possible to create multiple languages on your site, when you have created a language, you can define in the dropdown list to which language the article belongs.',CAPTION, 'Language');" onmouseout="return nd();" class="help">Language:</a></td>
<td>
<select name="languageName">
EOD;

// Display the languages in a option list
while ($languageArray=$languages->fetch($languages)) {
$lid = $languageArray['id'];
$language = htmlspecialchars ($languageArray['language']);
$content .= "<option value='$lid'>$language</option>\n";
}

$content .= <<<EOD
</select>
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('You can switch published on or off, when checked the article will be displayed directly on your site, when the article is not published it will not appear on the frontend, but you can still edit it in the backend, and publish it at a later time.',CAPTION, 'Published');" onmouseout="return nd();" class="help">Published:</a></td>
<td>
<input name="published" type="checkbox" id="published" value="yes" checked="checked" />
</td>
</tr>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('You can enter the meta tag description in this form for the article, when you do not enter a description the default description from the config is used.<br/><br/>It is wise to use a meta tag description for better SEO, also the description will be displayed as text under your link in search engines as Google to describe your page.',CAPTION, 'Meta description');" onmouseout="return nd();" class="help">Meta description:</a></td>
<td>
<textarea cols="80" rows="10" name="metatagdescription"></textarea>
</td>
</tr>
<tr>
<td><a href="javascript:void(0);" onmouseover="return overlib('You can enter the meta tag keywords in this form for the article, when you do not enter a description the default keywords from the config is used.<br/><br/>Keywords will only improve SEO if the words used are in the article text.',CAPTION, 'Meta keywords');" onmouseout="return nd();" class="help">Meta keywords:</a></td>
<td>
<textarea cols="80" rows="10" name="metatagkeywords"></textarea>
</td>
</tr>
<tr>
<td>Option</td>
<td>
<input name="Save" class="button" type="submit" value="save" /> <input name="Reset" class="button" type="reset" value="reset" />
</td>
</tr>
</table>
</form>
</div>
</div>
EOD;

// Add javascript for overlib
$head = '<script type="text/javascript" src="'.$liveURL.'/includes/overlib/overlib.js"></script>';

// Page title
$title = 'New article';

}
}

AKNL
%Europe/Berlin %543 %2005, 14:03
ik zal proberen om het in mijn script te plakken op de manier dat ik denk hoe het moet, ik zal script hier posten om te kijken of het een beetje klopt.

AKNL
%Europe/Berlin %586 %2005, 15:04
<form action="onderhoud.php" method="POST">
<input type="hidden" name="go" value="1">


<tr>
<td align="center">
<table class="rand" border="0" width="90%" >
<tr>
<td width="25%">&nbsp;</td>
<td>page: </td>
<td><input type="Text" name="page" value="" size="50"></td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td width="25%">&nbsp;</td>
<td>title: </td>
<td><input type="Text" name="title" value="" size="50"></td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td width="25%"> </td>
<td valign="top">content:</td>
<td><textarea name="content" cols="60" rows="10"></textarea></td>
<tr>
<td width="25%">&nbsp;</td>
<td colspan="2" align="center">
<input class="submit" name="zenden" type="submit" value="Toevoegen">&nbsp;&nbsp;&nbsp;
<input class="submit" name="zenden" type="submit" value="Verwijderen">&nbsp;&nbsp;&nbsp;
<input class="submit" name="zenden" type="Submit" value="Opslaan">
</td>
<td width="25%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</form>

Dit is een onderdeel wat ik graag zou willen vervangen. Ik heb dus een tekstarea content en die wil ik graag voorzien van die FCKeditor. Moet ikd an denken aan onderstaand?

<form action="onderhoud.php" method="POST">
<input type="hidden" name="go" value="1">


<tr>
<td align="center">
<table class="rand" border="0" width="90%" >
<tr>
<td width="25%">&nbsp;</td>
<td>page: </td>
<td><input type="Text" name="page" value="" size="50"></td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td width="25%">&nbsp;</td>
<td>title: </td>
<td><input type="Text" name="title" value="" size="50"></td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td width="25%"> </td>
<td valign="top">content:</td>
<td>
// Instantiate and add the editor to the body
$oFCKeditor = new FCKeditor('articleText');
$oFCKeditor->BasePath = $editorPath;
$oFCKeditor->Width = "100%";
$oFCKeditor->Height = 500;
$oFCKeditor->Config['SkinPath'] = $oFCKeditor->BasePath . 'editor/skins/office2003/';
$oFCKeditor->Value = $content;
$oFCKeditor->Create();
</td>
<tr>
<td width="25%">&nbsp;</td>
<td colspan="2" align="center">
<input class="submit" name="zenden" type="submit" value="Toevoegen">&nbsp;&nbsp;&nbsp;
<input class="submit" name="zenden" type="submit" value="Verwijderen">&nbsp;&nbsp;&nbsp;
<input class="submit" name="zenden" type="Submit" value="Opslaan">
</td>
<td width="25%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</form>

Haalt ie dan ook automatisch de waarde al op uit de database? (I know, ben echt een php naab)

mech7
%Europe/Berlin %628 %2005, 16:04
Dit is hetzelfde als een teaxtarea met de name="articleText"


$oFCKeditor = new FCKeditor('articleText');
$oFCKeditor->BasePath = $editorPath;
$oFCKeditor->Width = "100%";
$oFCKeditor->Height = 500;
$oFCKeditor->Config['SkinPath'] = $oFCKeditor->BasePath . 'editor/skins/office2003/';
$oFCKeditor->Value = $content;
$oFCKeditor->Create();


Voor een artikel te editen, kan je het beste apart document maken edit_article.php
je moet dan een lijst met een overzicht van de articlen genereren met elke id..

dus bv edit_article.php?id=10

Dan moet je dus checken of die get var bestaat..
En dan met een query de gegevens van dat artikel ophalen..
dan haal je de gegevens op zet in een string en laad je de editor


$article=@mysql_query("SELECT article, categoryid
FROM articles
WHERE id='$id'");
if (!$article) {
die('<p>Error fetching article details: ' .
mysql_error() . '</p>');
}

$article = mysql_fetch_array($article);

$articletext = $article['article'];


Maar je kan beter een database class pakken zodat je db onafhankelijk kan werken..

Als ik jou was zou ik ff tutorial ofzo lezen das denk ik makkelijker ;)
http://www.intranetjournal.com/php-cms/
Deze is we vrij goed.

flapzucht
%Europe/Berlin %838 %2005, 21:07
hej, in principe is het echt een eitje.
Ik zal even uitlegen hoe het werkt met Spaw.
Komtie dan he:

- maak een php bestandje genaamd bijv. bewerken.php
- zet bovenin je pagina het volgende:
<?php
if (isset($_REQUEST["annuleren"]))
{
// zet hier de actie neer die moet gebeuren voor als je klikt op annuleren, bijv:
print "<script>parent.window.location='home.php';</script>";
}
else if (isset($_REQUEST["submit"])){
// hier gaat hij het hele gebeuren opslaan

$content=$_POST['inhoud']; // variabele content is de inhoud van het spaw editor veld
$pagina= $_POST['webpage'];

// het schrijven
$fopen = fopen("$pagina", "w+");
fwrite ($fopen, $content);
fclose($fopen);
print "<script>parent.window.location='home.php';</script>"; // de actie na het opslaan
exit;
}
else { // als je komt op de pagina zelf (zonder op submit gedrukt te hebben)
$pagina= "test.html";// de pagina die je wilt bewerken
$bestand = fopen("$pagina", "r"); //het schrijven en daarna sluiten van het bestand
$inhoud = fgets($bestand);
fclose($bestand);
}
?>


nu volgt de code ook bovenin je pagina om de spaw editor te configureren


<?php

if (!ereg('/$', $HTTP_SERVER_VARS['DOCUMENT_ROOT']))
$_root = $HTTP_SERVER_VARS['DOCUMENT_ROOT'].'/';
else
$_root = $HTTP_SERVER_VARS['DOCUMENT_ROOT'];

define('DR', $_root);
unset($_root);

// set $spaw_root variable to the physical path were control resides
// don't forget to modify other settings in config/spaw_control.config.php
// namely $spaw_dir and $spaw_base_url most likely require your modification
$spaw_root = DR.''; // de directory op je server waar spaw in staat

// include the control file
include $spaw_root.'spaw_control.class.php';

// here we add some styles to styles dropdown
$spaw_dropdown_data['style']['default'] = 'No styles';
$spaw_dropdown_data['style']['style1'] = 'Style no. 1';
$spaw_dropdown_data['style']['style2'] = 'Style no. 2';

?>



nu volgt het html gedeelte van je php pagina:


<body>
<form method="post" action="bewerken.php">
<input type ="hidden" name="webpage" value="<?php print "$pagina"?>">
<?php
$sw = new SPAW_Wysiwyg('inhoud',isset($HTTP_POST_VARS['inhoud'])?stripslashes($HTTP_POST_VARS['inhoud']):"$inhoud");
$sw->show();
?>
<br> <input type="submit" name="submit" value="Opslaan"> <input type="submit" name="annuleren" value="Annuleren">
</form>
</body>


ik hoop dat je het nu zult snappen.
Het is gewoon een kwestie van pagina openen , inhoud opslaan in variabelen en variabele bewerken en opslaan in de pagina.