Dojo Editor

Xym · 9. März 2012

Hallo,

ich wollte gerne auf dem Administatrionbereich meiner Seite diesen Dojo Editor einsetzen, da er um einiges komfortabler ist als mein selbst programmierter ( http://dojotoolkit.org/documentation/tutorials/1.7/editor/ )

Die Frage ist nur: Wie kommt ich an den Text aus dem Editor? Und wie sind dann die Eigenschaften, wie Schritgröße, Bilder, Links usw. ?

Quaese · 10. März 2012

Hi,

über

Code:

dijit.byId("widgetId").value

solltest du den Inhalt des Editors erhalten. Die Formatierungen und Elemente (Bilder, Links usw) sollten in den entsprechenden Tags stehen.

Ciao
Quaese

Xym · 10. März 2012

Leider Funktioniert das nicht..

habe den Editor so eingebunden:

Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"> </script>
        <script>
            require(["dijit/Editor", "dojo/parser", "dojo/domReady!"]);
            require([
        "dijit/Editor",
        "dojo/parser",
        "dijit/_editor/plugins/TextColor",
        "dijit/_editor/plugins/LinkDialog",
        "dijit/_editor/plugins/FullScreen",
        "dijit/_editor/plugins/ViewSource",
        "dijit/_editor/plugins/NewPage"
    ]);
        </script><

CSS:

<style type="text/css">
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css";
        </style>

HTML:

<div id="texteditor" data-dojo-type="dijit.Editor" data-dojo-props="extraPlugins:['foreColor','hiliteColor','|','createLink','insertImage','fullscreen','viewsource','newpage']"></div>

Und wollte mir den Text so ausgeben lassen:

Javascript:

 <script type="text/javascript">
            var text = dijit.byId("texteditor").value;
            alert(text);
        </script>

Doch irgendwie bekomme ich gar kein alert Fenster.

javaDeveloper2011 · 10. März 2012

Hi,

du willst auf das dijit-Objekt zugreifen bevor es definiert es / bevor die Scripte geladen wurden.
Sinn macht der alert doch eigentlich nur, wenn der User schon gelegenheit zum Schreiben hatte und dann beispielsweise auf einen Button klickt.
Hier mal ein Demo:

Code:

<!doctype html>
<html>
	<head>
		<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
        <script type="text/javascript">
            require(["dijit/Editor", "dojo/parser", "dojo/domReady!"]);
            require([
				"dijit/Editor",
				"dojo/parser",
				"dijit/_editor/plugins/TextColor",
				"dijit/_editor/plugins/LinkDialog",
				"dijit/_editor/plugins/FullScreen",
				"dijit/_editor/plugins/ViewSource",
				"dijit/_editor/plugins/NewPage"
			]);
        </script>
	</head>
	<body>
		<div id="texteditor" data-dojo-type="dijit.Editor" data-dojo-props="extraPlugins:['foreColor','hiliteColor','|','createLink','insertImage','fullscreen','viewsource','newpage']"></div>
		<button onclick="alert(dijit.byId('texteditor').value);">Click me!</button>
	</body>
</html>

Gruß javaDeveloper2011

Xym · 10. März 2012

Super! Das hat jetzt funktioniert!

Jetzt habe ich noch 2 weitere Fragen:

1. Wie kann man im Editor die Schriftgröße ändern?

2. Wie kann ich den Text in einer PHP-Variablen speichern?

javaDeveloper2011 · 10. März 2012

Hi,

fontSize kann man jetzt ändern, das theme sieht auch schöner aus (weil body jetzt class="claro" hat)

Code:

<!doctype html>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
        <script type="text/javascript">
            require(["dijit/Editor", "dojo/parser", "dojo/domReady!"]);
            require([
                "dijit/Editor",
                "dojo/parser",
                "dijit/_editor/plugins/TextColor",
                "dijit/_editor/plugins/LinkDialog",
                "dijit/_editor/plugins/FullScreen",
                "dijit/_editor/plugins/ViewSource",
                "dijit/_editor/plugins/NewPage",
				"dijit/_editor/plugins/FontChoice"
            ]);
        </script>
    </head>
    <body class="claro">
        <form id="form" onsubmit="document.getElementById('text').value = dijit.byId('texteditor').value;">
			<div id="texteditor" data-dojo-type="dijit.Editor" data-dojo-props="extraPlugins:['fontSize','foreColor','hiliteColor','|','createLink','insertImage','fullscreen','viewsource','newpage']"></div>
			<input type="hidden" id="text" name="text" />
			<button data-dojo-type="dijit.form.Button" data-dojo-props="type:'submit'">Senden</button>
		</form>
    </body>
</html>

der Inhalt des Editors liegt anchließend in der PHP-Variablem $_GET['text'].

Gruß javaDeveloper2011

Xym · 10. März 2012

Einfach Klasse, Danke!

Xym · 11. März 2012

Jetzt sind leider 2 weiter Probleme aufgetreten.

1. Geht auch mit Post Methoder oder so? Weil die Text oftmals zulang für die URL sind.

2. Kann ich den Bildern auch einen Float geben? Denn diese sind nicht mi Textfluss drin.

javaDeveloper2011 · 11. März 2012

zu 1.
Ja, gib dem form einfach method="post", der Wert liegt dann halt auch in $_POST['text'] statt $_GET['text']

zu 2.
Wenn du Bilder einfügst, sind sie doch eigentlich inline..?

Xym · 11. März 2012

zu 1.: klappt

zu 2.: wenn ich in css img display auf inline setzte macht das auch nichts.

Dojo Editor

Xym

Erfahrenes Mitglied

Quaese

Moderator

Xym

Erfahrenes Mitglied

javaDeveloper2011

Erfahrenes Mitglied

Xym

Erfahrenes Mitglied

javaDeveloper2011

Erfahrenes Mitglied

Xym

Erfahrenes Mitglied

Xym

Erfahrenes Mitglied

javaDeveloper2011

Erfahrenes Mitglied

Xym

Erfahrenes Mitglied

Neue Beiträge