nicht angemeldet
CKEditor - Fragen
0 
Matthias Apsel
CKEditor - Fragen
Einen schönen Sonntag.
Ich möchte den CKEditor implementieren indem ich per Editbutton den gesamten Content des <main> Elements bearbeitbar machen möchte. Die Styles der Seite möchte ich dabei direkt auf die Editorfläche anwenden. Dazu gibt es die Möglichkeit in CKEditor die Editorfläche nicht in einen iframe zu verwandeln, sondern in ein div.
Das ist mein html Markup für den <body>:
<body>
<header>
<span class="title">Whatever</span>
<nav id="menu">
<!--Module:MainMenu-->
</nav>
</header>
<nav id="trailnavigation"><!--Module:TrailNavigation--></nav>
<main role="main">
<h1><!--Page:Title--></h1>
<!--Message:Body-->
<!--Page:Content-->
</main>
<footer>
<a id="pageupdatehtml">EDIT</a>
<!--Module:PageLastUpdate-->
</footer>
</body>
Dies ist mein JS:
$(function(){
$("#pageupdatehtml").click(function(ev){
CKEDITOR.replace( $("main")[0] );
});
});
Das klappt insofern, dass der gesamte Seiteninhalt editierbar wird. Das Problem aber: CKEditor setzt dazu das <main>-Element auf hidden und schreibt ein neues Div in den DOM. Daher:
#1: css-Regeln für main gelten also nicht mehr
#2: der Editor hat statt der Breite von main die Breite des gesamten Fensters, da die body width nicht gesetzt ist.
#3: (offtopic) CKEditor entfernt Klassen von den <p>, was ich nicht möchte.
Wie kann ich das elegant machen. Mein Ansatz ist, den Listener von #pageupdatehtml zu ändern, zu sowas wie:
$("main").html( "<div id='ckeditor'>" + $("main").html() + "</div> );
CKEDITOR.replace( "ckeditor" );
Wie sehr Ihr das?
(offtopic) wir würdet Ihr breadcrump Navigationen (hier TrailNavigation) in html5 verpacken? Er sagt <nav>.
Cheers,
Baba
-
Om nah hoo pez nyeetz, Baba!
Einen schönen Sonntag.
Danke, gleichfalls. Ich hoffe, du wohnst nicht in einem der von Hochwasser bedrohten oder bereits betroffenen Gebiete.
Zu deiner (Haupt)Frage kann ich leider nichts beitragen.
-----[code lang=html]<body>
<header>
<span class="title">Whatever</span>
warum ein nichtssagendes span? Es ist doch zweifelsohne eine Überschrift? Warum sonst hat es die Klasse title bekommen?
(offtopic) wir würdet Ihr breadcrump Navigationen (hier TrailNavigation) in html5 verpacken? Er sagt <nav>.
Warum sollte man eine Navigation nicht in ein Element packen, das für Navigationen gedacht ist?
Matthias
-
In Berlin regnets zwar 247 doch die Spree bleibt in Ihren zwei Wänden...
warum ein nichtssagendes span? Es ist doch zweifelsohne eine Überschrift? Warum sonst hat es die Klasse title bekommen?
Weil der Titel eines Dokumentes ja wohl keine Überschrift ist. Vgl. LaTeX title vs. section, etc.
(offtopic) wir würdet Ihr breadcrump Navigationen (hier TrailNavigation) in html5 verpacken? Er sagt <nav>.
Warum sollte man eine Navigation nicht in ein Element packen, das für Navigationen gedacht ist?Ja gut. Dache nur, das <nav> wäre vielleicht etwas singulär zu begreifen. Dann arbeite ich jetzt mit zwei nav mit je einer verschiedenen ID zum Stylen.
Cheers,
Baba-
warum ein nichtssagendes span? Es ist doch zweifelsohne eine Überschrift? Warum sonst hat es die Klasse title bekommen?
Weil der Titel eines Dokumentes ja wohl keine Überschrift ist. Vgl. LaTeX title vs. section, etc.Vergleiche hinken, dieser hier auch. LaTeX und HTML benutzen ein unterschiedliches Vokabular. Es existiert nicht für jede Auszeichnung in der einen Sprache, ein Pendant in der jeweils anderen Sprache. Sprachkonstrukte, die auf den ersten Blick ähnlich oder vergleichbar erscheinen, sind oft unterschiedlicher, als es sich auf den ersten Blick anmuten lässt. Vergleiche Funktionen in Javascript mit Funktionen aus PHP - trügerisch. In HTML würde ich guten Gewissens einen Dokument-Titel durch ein h1-Element auszeichnen. Die title-Klasse kannst du ja trotzdem vergeben, um das Element mit zusätzlicher Semantik anzureichern.
-
In HTML würde ich guten Gewissens einen Dokument-Titel durch ein h1-Element auszeichnen. Die title-Klasse kannst du ja trotzdem vergeben, um das Element mit zusätzlicher Semantik anzureichern.
Und meine Überschriften im Text beginne ich dann mit h2? Tja, ich weiß nicht. Baue ja gerade den CKEditor ein. Finde ich für den Nutzer schwer zu begreifen, dass er bei h2 beginnen soll.
Cheers,
Baba-
Hallo,
Und meine Überschriften im Text beginne ich dann mit h2? Tja, ich weiß nicht. Baue ja gerade den CKEditor ein. Finde ich für den Nutzer schwer zu begreifen, dass er bei h2 beginnen soll.
Spricht etwas dagegen das section-Element oder article-Element zu verwenden? Mir scheinen diese Elemente für Deinen Fall prädestiniert zu sein, da sich damit für den jeweiligen Abschnitt eine zugehörige Haupt-Überschrift und ggf. weitere Überschriften definieren lassen würden.
Gruss,
Worf-
Mir scheinen diese Elemente für Deinen Fall prädestiniert zu sein, da sich damit für den jeweiligen Abschnitt eine zugehörige Haupt-Überschrift und ggf. weitere Überschriften definieren lassen würden.
Wieso scheint es Dir so? Ich habe doch gar nichts von meinem Inhalt erzählt. Ich habe weder mehrere inhaltsähnliche noch inhaltsdiverse Abschnitte erwähnt. Threaddrift immer gerne, aber hier hat das eine gar nichts mit dem anderen zu tun.
Cheers,
Baba
-
-
Und meine Überschriften im Text beginne ich dann mit h2?
Es gibt im wesentlichen zwei Methoden das Outline einer Seite mit Überschriften zu gestalten.
Der eine Weg läuft über das Ranking: h1 > h2 > h3 usw.Der andere Weg führt über Verschachtelungstiefen von sectioning-content-Elementen, dabei wird i.d.R. nur vom h1-Element Gebrauch gemacht.
Tja, ich weiß nicht. Baue ja gerade den CKEditor ein. Finde ich für den Nutzer schwer zu begreifen, dass er bei h2 beginnen soll.
Du bietest einen WYSIWYG-Editor an und hoffst, dass deine Nutzer damit semantisch sinnvolles Markup basteln?
-
Der andere Weg führt über Verschachtelungstiefen von sectioning-content-Elementen, dabei wird i.d.R. nur vom h1-Element Gebrauch gemacht.
Kann ich mir das so vorstellen?
Aus:h1{font-size:2em;} h2{font-size:1.4em}
wird:section h1{font-size:2em;} section section h1{font-size:1.4em}Du bietest einen WYSIWYG-Editor an und hoffst, dass deine Nutzer damit semantisch sinnvolles Markup basteln?
Das sie einer Überschrift Level 1 oder 2 zuweisen traue ich ihnen zu, ja.
Wenn jetzt aber mit verschachtelten sections gearbeitet werden soll, geht das glaube ich nicht mehr im WYSIWYG-Editor.Cheers,
Baba-
Om nah hoo pez nyeetz, Baba!
Der andere Weg führt über Verschachtelungstiefen von sectioning-content-Elementen, dabei wird i.d.R. nur vom h1-Element Gebrauch gemacht.
Kann ich mir das so vorstellen?
Aus:h1{font-size:2em;} h2{font-size:1.4em}
wird:section h1{font-size:2em;} section section h1{font-size:1.4em}https://forum.selfhtml.org/?t=213796&m=1462350
Matthias
-
-
Om nah hoo pez nyeetz, Baba!
https://forum.selfhtml.org/?t=213796&m=1462350
was hat das jetzt wieder zu bedeuten?Ich sehe das als Antwort auf deine Frage "Kann ich mir das so vorstellen?".
Matthias
-
-
-
-
-
-
-
-
