Baba: CKEditor - Fragen

Beitrag lesen

SELF-Forum

CKEditor - Fragen

Baba
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln