Search code examples
jqueryjsonhtmlcontenteditablestringify

Show stringified json in contenteditable div

I was using textarea to display the json in string format, for that I used this

JSON.stringify(this, null, '\t')

To solve some issue in textarea positioning I decided to use contenteditable div. How to show json in contenteditable div as

BusinessUnit : {
    "title": "Business Unit",
    "type": "Text",
    "options": "",
    "required": true,
    "defaultValue": "1",
    "tooltip": "This is a Business-unit",
    "unique": true
}

rather than as a showing it as string

BusinessUnit : { "title": "Business Unit", "type": "Text", "options": "", "required": true, "defaultValue": "1", "tooltip": "This is a Business-unit", "unique": true }
Solution

  • The easiest thing to do would be to either use a contenteditable <pre> element instead of a <div>, or add white-space: pre to the <div>'s CSS.

    Demo: http://jsfiddle.net/3DKLW/