Javascript-Code im Content-Bereich einfügen

[Kickbanignore]

Hallo,

Ich habe das Problem, dass ich einen Javascript-Code in in Contenido-Content-Bereich einfügen muss. Funktioniert natürlich nicht, weil Contenido das dann intern irgendwie umwandelt. Gibt es eine Möglichkeit, Contenido zu sagen, er solle das doch 1 zu 1 so lassen?

Ähnliches Probleme habe ich, wenn ich im Content einem Div-Container eine ID mitgebe. Das Div bleibt, die ID wird gelöscht.


Bitte um Hilfe.

[McHubi]

Hi,

JS direkt im Tiny funktioniert - soweit ich weiß - nicht. Aber schau Dir mal das hier an:
http://forum.contenido.org/viewtopic.ph ... ageninhalt
Du könntest das JS in eine externe Datei auslagern und damit einbinden. Ungetestet, ne Idee.

[Oldperl]

Hallo Kickbanignore,

erst einmal willkommen im Contenido Forum.

...dass ich einen Javascript-Code in in Contenido-Content-Bereich einfügen muss.

Wo bitte soll da Javascript eingefügt werden?
Wirklich im TinyMCE wie von McHubi angenommen?

Wenn ja - da gehört kein Javascript rein. Damit jeder Redakteur da irgendein Script mit auf die Seite stellen kann? Nicht wirklich, oder?

Wenn du Javascripte installieren willst/mußt, dann mach dies entweder direkt ins Layout oder erstelle ein Modul mit dem Code und binde dieses per Template ein.
Was anderes wäre mir persönlich viel zu gefährlich.

Gruß aus Franken

Ortwin

[McHubi]

Hi...

...hab das mal ausprobiert. War allerdings ein Schlag in's Wasser, JS und auch php wird neutralisiert bei Dateiendung .html. Php-Scripte mit Dateiendung .php ergeben einen internal Server-Error und JS in einer Datei mit Endung .js führt wieder zur Neutralisation durch Auskommentierung. Damit fällt das Ganze also als Lösung für Kickbanignore flach. Es sei denn, es gibt irgendwo eine Möglichkeit dem Tiny das auszutreiben in punkto vorgefertigter Inhalte. Aber nur dort!

Denn ganz unrecht hat Ortwin nicht. Nicht jedes Script sollte mal eben so reinkopiert werden könnenn. Wobei ich bei den vorgefertigten Inhalten die Bedenken von Ortwin nicht teile. Denn sobald der Ordner für die templates außerhalb der upload-Ordnerstruktur von Contenido liegt und ein Redakteur keinen Zugang per ftp zu diesem Ordner und zur js-Datei mit der Template-Liste besitzt, hätte er gar keine Möglichkeit selbst vorgefertigte Inhalte anzulegen. Gut, kommt blöd wenn stinknormale html-Templates zusammen mit (ggf. doch mal klappenden) script-Templates in einem Ordner liegen würden. Denn die html-Templates sollten ja ggf. doch mal von Redakteuren redigierbar sein. Insofern als zweiten Punkt auf der "Wishlist": einen zweiten Button im Tiny für vorgefertigte Inhalte, d.h. einen für html- und einen für script-Templates...

Also ich vermute mal, das DerFrank oder Kummer (Stichwort shortcodes bei aitsu) hier bestimmt weiterhelfen könnten... Fragt sich nur, ob sie hier "den Rock" etwas lüften

Nachschlag:
Ungeachtet dem Aspekt Sicherheit: Habe bei sourceforge das Plugin "codeprotector" gefunden, was das Neutralisieren des Codes durch den tiny verhindern soll:
http://sourceforge.net/tracker/?func=de ... tid=738747

Die Anleitung dazu in der Readme.txt:
"To install, copy the codeprotect folder to the plugins directory and just
add the word "codeprotect" to the list of plugins in the "init" bit of your tinyMCE
page. The plugin doesn't have a button, so no need to worry about that."

"... copy the codeprotect folder to the plugins directory ..."
Zu finden in Contenido ist der hier: .../contenido / external / wysiwyg / tinymce3 / jscripts / tiny_mce / plugins

"... and just add the word "codeprotect" to the list of plugins in the "init" bit of your tinyMCE page."
.../ contenido / external / wysiwyg / tinymce3
Hier ist zwar die tinymce.tpl.html zu finden, allerdings statt "plugins: " ist nach "tinyMCE.init({" nur "{config}" zu finden. Also: Mandanteneinstellungen.

Hab's versucht mit
Typ: tinymce
Name: plugins
Wert: codeprotect
aber das klappt leider nicht (http://forum.contenido.org/viewtopic.ph ... t&start=15)

Auch das hier in der tinymce.tpl.html brachte nichts:
tinyMCE.init({
{CONFIG}
plugins : "codeprotect"
});
Das führte nur dazu, dass nicht mehr der tiny sondern nur noch der html-editor geöffnet wurde. Also wieder raus.

[DerFrank]

Wer will hier wem unter den Rock schauen? Es wird nix verheimlicht. Kann ich auch gerne live zeigen. Einfach anrufen.

Also so in etwa läuft das ab. Ab damit ins Modul. Fertig.

Code: Alles auswählen

$javascript =<<<JS
(function($) {$(document).ready(function () { $wow }); 
JS;

/* 
 * Aus der firmeneigenen Zend Framework Bibliothek laden
 */
Company_Library_Bootstrap :: getInstance()
    ->addJavaScriptReference('/company_library_ressource/jQuery/dolle_scripte.js')       // firmeneigenen Skript-Sammlung
    ->addJavascript($javascript)                                                         // Was man im aktuellen Modul grad' noch so braucht
    ->addCssReference('/company_library_ressource/jQuery/theme/dolle_styles.css')         // firmeneigene Themes
    ->addCssStyle('div.banner{border:1px solid #000000}');                               // Da hätte ich gerne einen Rahmen.

?>

Und das kommt dann im Quelltext raus.

Code: Alles auswählen

...
<script type="text/javascript" src="/company_library_ressource/jQuery/dolle_scripte.js"></script>
<script type="text/javascript">
function($) {$(document).ready(function () { $wow };
</script>
<link rel="stylesheet" href="/company_library_ressource/jQuery/theme/dolle_styles.css" media="screen" />
<style type="text/css">
<!-- 
div.banner{border:1px solid #000000}
-->
</style>
...
</head>
<body>

Da braucht man nichtmal shortCode oder insiteConfig für. Aber für den, der das seinen Redakteuren zutraut. Macht die Sache glatt noch cooler. Gefällt's?

DerFrank

[McHubi]

Hallo Frank,

jaaaaaaa - aber das funzt ja nur innerhalb von aitsu, oder? Hattest mir das schonmal gezeigt und das ist schon schick. Keine Frage. Aber wie bekomme ich jetzt JS- oder php-Scripte innerhalb des tiny eingebunden im "Standard-Contenido"? Du hast doch bestimmt auch ne Idee, wie man jetzt dieses codeprotector-plugin ans laufen bekommt, oder?

[DerFrank]

Wird wohl nicht in die CE-Version (Community Edition for free) kommen. Ich hab gaaaanz gaaaaanz früher mal einfach ein Modul in den Header gelegt und dann dort einen Dateipfad für ein CSS-Background-Image gesetzt. Mit nem dummen Image-Standardmodul. Versuch' das doch einfach mal mit einem normalen TEXT-Modul. Und verabschiede Dich von dem Gedanken, dass mit dem Tiny machen zu wollen. Du brauchst da halt was, dass den JS-Code bemerkt und in den Header verschiebt. Stichworte: Ausgabepufferung und Transformation.

[McHubi]

Tja.

Habe jetzt mal alle möglichen Mandanteneinstellungen durch, inkl. custom toolbars usw. - klappt aber nicht mit php. In den Weiten des www bin ich jetzt auf diesen workaround in punkto php gestoßen (der für JS vermutlich nur abgeändert/ ergänzt werden müsste):

http://www.bewebmaster.com/275.php

Den hier geposteten Code kann man allerdings nur dann erfolgreich einbinden, wenn nach {CONFIG} in der tinymce.tpl.html ein Komma gesetzt wird (sonst öffnet sich nicht der wysiwyg-, sondern nur der html-editor):

Code: Alles auswählen

tinyMCE.init({
	{CONFIG},
    setup : function(ed) {

   //This event (onBeforeSetContent)gets executed when the setContent method is called
   //gets executed when the setContent method is called but before the contents gets
   //serialized and placed in the editor.         
          ed.onBeforeSetContent.add(function(ed, o) {
               //replace all instances of <?php and ?> with HTML entities
                o.content = o.content.replace(/<\?/gi, "&lt?");
                o.content = o.content.replace(/\?>/gi, "?&gt");
          });
     }
});

Soweit, so gut: tiny normal öffnen, in die html-ansicht wechseln und z. B. das hier eingeben:

<?php
$begruessung="Tach!";
echo $begruessung;
?>

Es erscheint genau dies im Frontend. Es wird schonmal nichts gekürzt, in der html-Ansicht allerdings "rumgetauscht" - so wie es sein sollte:

<?php
$begruessung="Tach!";
echo $begruessung;
?>

Schritt 1 geschafft, aber jetzt kommt Nummer 2, die Rolle rückwärts:

On the PHP side take the TinyMCE content and convert the HTML entities back to <?php and ?>
$content = str_replace("<?php", "<?php", $content);
$content = str_replace("?>", "?>",$content);

Äh... wo, steht da jetzt leider nicht. Einer ne zündende Idee?

[Kickbanignore]

Also erstmal vielen Dank für all die Ideen und Hinweise.

Konkret ging es übrigens um so ein Video, zu dem ich halt einen JS-Code gekriegt habe, der das ganze schon direkt einbindet. Da meine Vorgesetzten oft mit irgendeinem einbindbaren Code kommen, den ich auf irgendeiner Seite schnell einbinden soll, dachte ich, es wär praktisch, wenn ich da mal eine schnelle Lösung hätte - eben durch das Einbinden von JS-Code direkt in den Contentbereich. Naja, was solls.

Naja, für die dies interessiert: Jetzt habe ich halt einfach mal ein Template "video_html.html" unter cms/templates erstellt:

Code: Alles auswählen

<div class="textItem">
<script src="../javascript/swfobject.js" type="text/javascript"></script>
<p>
<div id="{videotitel}">{videotitel}</div>
</p>
<script type="text/javascript">// <![CDATA[
var s1 = new SWFObject('../player/player.swf','ply','{breite}','{hoehe}','9','#ffffff');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file={url_flv_datei}');
s1.write('{videotitel}');
// ]]>
</script>
<br /> <br /> <strong><br /><br /></strong>
<script src="../javascript/swfobject.js" type="text/javascript"></script>
</div>

Und dann halt einfach ein Modul "Video".

Input:

Code: Alles auswählen

?><?php
?>

<table>
  <tr>
    <td><?php echo mi18n("Videotitel");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[0]"; ?>" value="<?php echo "CMS_VALUE[0]"; ?>"></td>
  </tr>
  <tr>
    <td><?php echo mi18n("URL der Video-Datei (FLV)");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[1]"; ?>" value="<?php echo "CMS_VALUE[1]"; ?>"></td>
  </tr>
  <tr>
    <td><?php echo mi18n("H&ouml;he");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[2]"; ?>" value="<?php echo "CMS_VALUE[2]"; ?>"></td>
  </tr>
  <tr>
    <td><?php echo mi18n("Breite");?></td>
    <td><input type="text" name="<?php echo "CMS_VAR[3]"; ?>" value="<?php echo "CMS_VALUE[3]"; ?>"></td>
  </tr>
</table>
<?php

Output:

Code: Alles auswählen

<?php
/**
* Script based on:
* $RCSfile$
*
* Description: Output some HTML text
*
* @version 1.0.0
* @author Rudi Bieller
* @copyright four for business AG <www.4fb.de>
*
* {@internal
* created 2008-04-07
* }}
*
* $Id$
*/

if (!isset($tpl) || !is_object($tpl)) {
    $tpl = new Template();
}

$tpl->reset();
$tpl->set('s', 'videotitel', "CMS_VALUE[0]");
$tpl->set('s', 'url_flv_datei', "CMS_VALUE[1]");
$tpl->set('s', 'hoehe', "CMS_VALUE[2]");
$tpl->set('s', 'breite', "CMS_VALUE[3]");

$tpl->generate('templates/video_html.html');
?>

[McHubi]

Hi,

Danke für das Modul. Vielleicht kannst Du auch das hier gebrauchen, damit könntest Du nämlich Bilder oder Flash xhtml-valide einbinden:

INPUT

Code: Alles auswählen

/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     Illustration
* Author(s)   :     Andreas Lindner, 4fb
* Copyright   :     Contenido - four for business, Andreas Lindner
* Created     :     12.08.2005
* Modified    :     15.02.2007 Philipp Baumgaertner
                    04.06.2008 Markus Hübner
************************************************/

#Selected img directory
$cms_dirname = "CMS_VALUE[1]";
#Selected img
$cms_filename = "CMS_VALUE[2]";

if ($cms_dirname == '' || $cms_dirname == '0') {
    $cms_dirname = 'bilder/';
}

#Get paths
$sql = "SELECT
    htmlpath, frontendpath
    FROM
    ".$cfg["tab"]["clients"]." 
    WHERE
    idclient = ".$client." ";

$db->query($sql);

if ($db->next_record()) {
    $htmlpath = $db->f('htmlpath');
    $frontendpath = $db->f('frontendpath');
}

#Choose image folder
echo '<table cellpadding="0" cellspacing="0" border="0">
    <tr><td class="text_medium" style="padding:5px">'.mi18n("Verzeichnis w&auml;hlen").': </td>
    <td class="text_medium" style="padding:5px">';
echo '<select name="CMS_VAR[1]" style="width:200px">';

#Get upload directories
$sql = "SELECT DISTINCT
    dirname
    FROM
    ".$cfg["tab"]["upl"]."
    WHERE
    idclient='$client' AND
    filetype IN ('jpeg','jpg','gif','png', 'swf')
    ORDER BY
    dirname";

$db->query($sql);

$selected = false;
while ($db->next_record()) {
    $dirname = $db->f('dirname');
    if ($cms_dirname != $dirname) {
        echo '<option value="'.$dirname.'">&nbsp;'.$dirname.'</option>';
    } else {
        $selected = true;
        echo '<option value="'.$dirname.'" selected="selected">&nbsp;'.$dirname.'</option>';
    }
}

if (!$selected) {
    echo '<option value="0" selected="selected">'.i18n("Bitte w&auml;hlen").'</option>';
} else {
    echo '<option value="0">'.i18n("Bitte w&auml;hlen").'</option>';
}

#Choose image file
echo '</select>&nbsp;<input type="image" src="images/submit.gif">
    <tr><td class="text_medium" style="padding:5px">'.mi18n("Bild- oder Flashdatei w&auml;hlen").': </td>
    <td class="text_medium" style="padding:5px">';
echo '<select name="CMS_VAR[2]" style="width:200px">';
echo '<option value="0" selected="selected">'.i18n("Bitte w&auml;hlen").'</option>';

if ($cms_dirname != '0') {
    #Get uploaded files
    $sql = "SELECT 
            filename
            FROM
            ".$cfg["tab"]["upl"]."
            WHERE
            idclient = '$client' AND
            filetype IN ('jpeg','jpg','gif','png','swf') AND
            dirname = '$cms_dirname' 
            ORDER BY
            filename";

    $db->query($sql);

    while ($db->next_record()) {
        $img_name = $db->f('filename');
        if ($cms_filename != $img_name) {
            echo '<option value="'.$img_name.'">&nbsp;'.$img_name.'</option>';
        } else {
            echo '<option selected="selected" value="'.$img_name.'">&nbsp;'.$img_name.'</option>';
        }
    }
}

echo '</select>&nbsp;<input type="image" src="images/submit.gif">';

#Preview image
if ($cms_dirname != '0' AND $cms_filename != '0' AND strlen($cms_dirname) > 0 AND strlen($cms_filename) > 0) {
    $img_path = $htmlpath.$cfgClient[$client]['upload'].$cms_dirname.$cms_filename;
    $img_split = preg_split("/\./", $cms_filename);
    $count = count($img_split);
    $type = $img_split[$count -1];

    echo '<tr><td colspan="2" style="padding:5px">';

    if (substr($img_path,-3) != "swf") {
        echo '<img src="'.$img_path.'">';
    } else {
        $size = getimagesize ("$img_path");
        echo '<object type="application/x-shockwave-flash" data="'.$img_path.'" id="Flash" '.$size[3].'>
                <param name="movie" value="'.$img_path.'" />
                <param name="bgcolor" value ="#FFFFFF" />
                <param name="quality" value ="high" />
                <param name="loop" value="false" />
                <param name="menu" value="false" />
                <param name="swliveconnect" value="true" />
                </object>';
    }

    echo '</td></tr>';
}

echo '</td></tr>';
echo '</table>';







echo "<table>";
echo "<tr><td>Alternativtext (nur bei Bildern) </td><td><input size=30 type=\"text\" name=\"CMS_VAR[20]\" value=\"CMS_VALUE[20]\"></td></tr>";
echo "<tr><td>horizontale Ausrichtung</td><td>";
if ("CMS_VALUE[80]" != "left") { 
   echo '          <input type="radio" name="CMS_VAR[80]" value="left"> links'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[80]" value="left" checked> links'; 
} 
if ("CMS_VALUE[80]" != "center") { 
   echo '          <input type="radio" name="CMS_VAR[80]" value="center"> zentriert'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[80]" value="center" checked> zentriert'; 
} 
if ("CMS_VALUE[80]" != "right") { 
   echo '          <input type="radio" name="CMS_VAR[80]" value="right"> rechts'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[80]" value="right" checked> rechts'; 
} 

echo "</td></tr>";
echo "<tr><td>Abstand oben</td><td><input size=3 type=\"text\" name=\"CMS_VAR[70]\" value=\"CMS_VALUE[70]\"> Pixel</td></tr>";
echo "</table>";



echo "<hr>";
echo "<strong>Folgende Punkte gelten nur für Flash-Dateien</strong>";
echo "<hr>";
echo "<table>";
echo "<tr><td>Qualität</td><td>";
if ("CMS_VALUE[30]" != "best") { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="best"> optimal'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="best" checked> optimal'; 
} 
if ("CMS_VALUE[30]" != "high") { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="high"> hoch'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="high" checked> hoch'; 
} 
if ("CMS_VALUE[30]" != "medium") { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="medium"> mittel'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="medium" checked> mittel'; 
} 
if ("CMS_VALUE[30]" != "low") { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="low"> niedrig'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[30]" value="low" checked> niedrig'; 
} 
echo "</td></tr>";

echo "<tr><td>Auto-Wiederholung</td><td>";
if ("CMS_VALUE[40]" != "true") { 
   echo '          <input type="radio" name="CMS_VAR[40]" value="true"> ja'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[40]" value="true" checked> ja'; 
} 
if ("CMS_VALUE[40]" != "false") { 
   echo '          <input type="radio" name="CMS_VAR[40]" value="false"> nein'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[40]" value="false" checked> nein'; 
} 
echo "</td></tr>";

echo "<tr><td>Menü anzeigen</td><td>";
if ("CMS_VALUE[50]" != "true") { 
   echo '          <input type="radio" name="CMS_VAR[50]" value="true"> ja'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[50]" value="true" checked> ja'; 
} 
if ("CMS_VALUE[50]" != "false") { 
   echo '          <input type="radio" name="CMS_VAR[50]" value="false"> nein'; 
} else { 
   echo '          <input type="radio" name="CMS_VAR[50]" value="false" checked> nein'; 
} 
echo "</td></tr>";

echo "<tr><td>Hintergrundfarbe</td><td><input size=5 type=\"text\" name=\"CMS_VAR[60]\" value=\"CMS_VALUE[60]\"> (bitte als #... eintragen)</td></tr>";
echo "</table>";

OUTPUT

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     Illustration
* Author(s)   :     Andreas Lindner, 4fb
* Copyright   :     Contenido - four for business, Andreas Lindner
* Created     :     12.08.2005
* Modified    :     15.02.2007 Philipp Baumgaertner
                    04.06.2008 Markus Hübner
************************************************/

#Selected img directory
$cms_dirname = "CMS_VALUE[1]";
#Selected img
$cms_filename = "CMS_VALUE[2]";

#Default settings
$defaultImage = 'upload/bilder_02/header_left_02b.jpg';

if ($cms_filename != '0') {
    $image = "upload/".$cms_dirname.$cms_filename;
} else {
    $image = $defaultImage;
}

#Output image tag
echo "<div align=\"CMS_VALUE[80]\" style=\"padding-top:CMS_VALUE[70]px;\">";

if (substr($image,-3) == "swf") {
    $size = getimagesize ("$image");
    echo '<object type="application/x-shockwave-flash" data="'.$image.'" id="Flash" '.$size[3].'>
            <param name="movie" value="'.$image.'"></param>
            <param name="bgcolor" value="CMS_VALUE[60]"></param>
            <param name="quality" value="CMS_VALUE[30]"></param>
            <param name="loop" value="CMS_VALUE[40]"></param>
            <param name="menu" value="CMS_VALUE[50]"></param>
            <param name="swliveconnect" value="true"></param>
            </object>';
} else {
    echo '<img src="'.$image.'" alt="CMS_VALUE[20]" title="CMS_VALUE[20]"/>';
}

echo "</div>";
?>