WYSIWYG HTML-Bearbeitung für ein ganzes Dokument?

Ich bin derzeit mit einer Situation konfrontiert, in der ich ein ganzes HTML-Dokument als Teil eines JSON-Objekts erhalte und möchte, dass der Benutzer es in WYSIWG-Art bearbeiten kann. Mein aktueller Ansatz ist es, TinyMCE zu verwenden, aber ich wäre offen für andere Vorschläge.WYSIWYG HTML-Bearbeitung für ein ganzes Dokument?

Das Problem mit TinyMCE ist, dass dieser Teil des Dokuments verloren geht, wenn ein Benutzer es bearbeitet. Würde jemand eine Lösung kennen, um das zu umgehen?

Das folgende Beispiel enthält eine Zeichenfolge mit einem einfachen HTML-Dokument, das innerhalb der angezeigt wird. Nachdem die Dokumente geladen wurden, sehen Sie, dass der Bereich das gesamte Dokument enthält. Wenn Sie weiterhin auf die Schaltfläche "Init" klicken, wird TinyMCE initialisiert und Sie werden feststellen, dass das Markup gelesen wird und Sie es sogar ändern können. Das Problem besteht darin, dass unabhängig davon, wann Sie die Option "Speichern" drücken oder die Quelle mithilfe der Optionen unter "Werkzeuge" anzeigen, nur der Teil body des Dokuments verbleibt.

Das Dokument ist eigentlich eine Abwesenheitsnachricht vom Austausch. Der ursprüngliche Code ist ein bisschen komplexer, aber das ist ein minimales Arbeitsbeispiel, das ich entwickelt habe.

Würde also jemand wissen, wie ich einen Benutzer in die Lage versetzen könnte, einige Formatierungen in WYSIWG-Mode zu machen, während er gleichzeitig das ursprüngliche HTML-Markup beibehält, das geladen wird? Das bedeutet in erster Linie, die Tags html, head etc. einzubeziehen.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://cloud.tinymce.com/stable/tinymce.min.js"></script> 
</head> 
<body> 
    <button onclick="tinymce.init({ selector:'textarea', plugins:'code' })">Init</button> 
    <button onclick="tinyMCE.editors[0].save()">Save</button> 
    <button onclick="tinyMCE.editors[0].remove()">Remove</button><br /> 
    <textarea id="editorArea" style="width: 100%;" rows="15"></textarea> 
    <script> 
    var htmlElements = ` 
     <html xmlns:o="urn:schema-microsoft-com:office:office"> 
     <head> 
      <style> 
       body{font-family: sans-serif; font-size: 55pt;} 
      </style> 
     </head> 
     <body> 
      <div> 
       <span style="font-size: 7pt">Here is some text.</span> 
      </div> 
     </body> 
     </html>`; 
    document.getElementById("editorArea").innerHTML = htmlElements; 
    </script> 
</body> 
</html>

Quelle

2017-03-10 Seth

Möchten Sie, dass Benutzer den Kopf- und Körperinhalt oder nur den Körper bearbeiten können? Denn du könntest den Körper immer einfach extrahieren, in einen WYSIWYG-Editor einfügen und ihn dann mit dem Rest des HTML-Codes zurückschicken. –

Mit dem vorliegenden Fall könnte es ein bisschen schwierig sein. Das Problem besteht darin, dass die Abwesenheitsnachricht einen bestimmten Office-HTML-Code enthält. Auf diese Weise müsste ich zuerst den Körper extrahieren (mit einem anderen Ansatz, da der Kopf für jede Nachricht anders sein könnte) und sie später zusammenkleben. In der Zwischenzeit könnten die Stile usw., die im Kopf enthalten sind, für einige fortgeschrittene Benutzer wichtig sein. Es ist eine ziemlich dumme Sache, die ich tun muss. Die Lösung war/ist es, das "Fullpage" -Plugin zu verwenden, das auf einfache Weise eine erweiterte Ansicht für fortgeschrittene Benutzer ermöglicht und alle anderen nur den Körper sehen. – Seth

Die fullpage Plugins ermöglicht jemand mit dem gesamten HTML-Dokument zu arbeiten, wenn in der Codeansicht des Inhalts suchen:

https://www.tinymce.com/docs/plugins/fullpage/

Wenn Sie dann speichern den Inhalt Sie sollten das gesamte Dokument zurückbekommen.

Quelle

2017-03-10 15:24:20

Ich bin tatsächlich etwas später darüber gestolpert, habe aber selbst keine Antwort geschrieben. Es funktioniert wirklich wie ein Charme (bis jetzt). – Seth

Ich weiß nicht, ob dies der beste Ansatz ist oder nicht. Aber das habe ich in einem meiner Projekte gemacht. Mein Anwendungsfall war es, Markdown Text oder HTML im Browser zu rendern und es sollte editierbar sein. Ich habe showdown.js in diesem Fall verwendet, Sie sind frei, irgendeine Bibliothek zu wählen.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <br /> 
 
    <div id="editorArea" contentEditable="true" style="width: 100%;"></div> 
 
    <script> 
 
    var htmlElements = `<html> 
 
     <head> 
 
      <style> 
 
       body{font-family: sans-serif; font-size: 55pt;} 
 
      </style> 
 
     </head> 
 
     <body> 
 
      <div> 
 
       <span style="font-size: 7pt; color: #dd0000;">Here is some editable text.</span> 
 
      </div> 
 
     </body> 
 
     </html>`; 
 
    var converter = new showdown.Converter(), 
 
    text  = htmlElements, 
 
    output  = converter.makeHtml(text); 
 
    document.getElementById("editorArea").innerHTML = output; 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2017-03-10 12:54:37 Vikramaditya

Das ist eine interessante Idee, löst aber nicht wirklich mein Problem, da ich bereits HTML habe, das ein Benutzer bearbeiten sollte. Bei diesem Ansatz müsste ich zuerst HTML in Markdown und später in HTML konvertieren, um es editierbar zu machen. Aber in einigen anderen Fällen könnte das interessant sein. – Seth

Nein, Sie müssen nicht HTML in Markdown konvertieren, diese Bibliothek versteht sowohl HTML und Markdown. In meinem Beispiel habe ich HTML als Eingabe nicht als Abschlag angegeben. – Vikramaditya

WYSIWYG HTML-Bearbeitung für ein ganzes Dokument?

Antwort

Verwandte Themen