CODEWITHSUNDEEP
javascripttinymce
Seth
Seth

Reputation: 1255

WYSIWYG HTML editing for a whole document?

I'm currently facing a situation where I get a whole HTML document as part of a JSON object and would like to let the user edit it in a WYSIWG fashion. My current approach is to use TinyMCE but I'd be open for other suggestion as well.

The problem I'm facing using TinyMCE is that that part of the document is being lost if a user edits it. Would anyone know a solution to work around this?

The below example contains a string with a simple HTML document that is being displayed within the textarea. After the documents loads, you will see that the area contains the whole document. If you continue to click on the "Init" button, it will initialize TinyMCE and you will find that the markup is being read and that you can even change it. The problem is that, regardless of whenever you press save or view the source using the options in "tools", only the body part of the document remains.

The document is actually a out of office message from exchange. The original code is a bit more complex but this is a minimal working example I came up with.

So would anyone happen to know how I could enable a user to still be able to do some formatting in a WYSIWG fashion while also preserving the original HTML markup that is being loaded? That primarily means including the html, head etc. tags.

<!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>

Upvotes: 1

Views: 538

Answers (2)

Michael Fromin
Michael Fromin

Reputation: 13746

The fullpage plugins allows someone to work with the entire HTML document when looking at the code view of the content:

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

When you then save the content you should get back the entire document.

Upvotes: 1

Vikramaditya
Vikramaditya

Reputation: 5574

I don't know whether this is the best approach or not. But this is what i did in one of my project. My use case was to render markdown text or html on browser and it should be editable. I used showdown.js in this case, you are free to choose any library.

<!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>

Upvotes: 1

Related Questions