Json in html textarea

JSON pretty Textarea

JSON pretty Textareais a React library for dealing with json files and showing them on textarea.

Installation

Use the package manager npm to install json-pretty-textarea.

Usage

# import import < JsonPrettierTextarea >from "json-pretty-textarea"; 

# return preBcl="white" stringCl="blue" numberCl="blue" booleanCl="red" nullCl="violet" keyCl="red" string_font_size="1rem" number_font_size="1rem" boolean_font_size="1rem" null_font_size="1rem" key_font_size="1rem" height="300px" width="300px" borderRadius="10px" /> 

Property	type	Default	Description
prettyjson	json data	MockDocument	Source File json
preBcl	CSS	white	Textarea BackGround color
stringCl	CSS	green	String Values color
numberCl	CSS	darkorange	number Values color
booleanCl	CSS	blue	boolean Values color
nullCl	CSS	magenta	null Values color
keyCl	CSS	red	key Values color
string_font_size	CSS	1rem	font_size
number_font_size	CSS	1rem	font_size
boolean_font_size	CSS	1rem	font_size
null_font_size	CSS	1rem	font_size
key_font_size	CSS	1rem	font_size
height	CSS	100%	textarea height
width	CSS	100%	textarea width
borderRadius	CSS	0.5rem	border radius

Sample Code

import MockDocument from "./MOCK_DATA.json"; import < JsonPrettierTextarea >from "json-pretty-textarea"; export const test = () => < return ( preBcl="white" stringCl="green" numberCl="skyblue" booleanCl="orange" nullCl="violet" keyCl="black" string_font_size="1rem" number_font_size="1rem" boolean_font_size="1rem" null_font_size="1rem" key_font_size="1.2rem" height="500px" width="800px" borderRadius="10px" /> ); >; 

CodeSandBox Sample

Contributing

For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

Keywords

• JSON
• pretty
• pretty-json
• json-pretty
• json-pretty-textarea
• json-pretty-component
• json-pretty-react
• json-pretty-react-component
• json-pretty-react-textarea
• json-pretty-react-component-textarea
• json Pretty
• JSON Pretty
• json pretty Component
• JSON pretty Component
• JSON pretty Textarea
• json pretty Textarea
• json pretty textarea

Install

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

JSON Validated Textarea. Lightweight and Unopinionated.

License

jpdevries/JSONarea

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

JSON Validated Textarea. Lightweight and without opinion.

If you are using a HTML to allow your users to insert JSON, JSONarea was made just for you. JSONarea prides itself on what it does not do more than what it does do.

• Listens to input events on a textarea and dispatches an update event indiciating whether or not the input is valid JSON.
• allows you to configure the events it listens to
• allows you to extend JSONarea with any number of Objects

Name	Description	Default
events	Array of events to listen to	[‘change’,’keyup’]
sourceObjects	Optional Array of objects to extend JSONArea with	[]

// do the deal var myJSONArea = JSONArea(document.getElementById('json'), sourceObjects:[] // optional array of objects for JSONArea to inherit from >); // then here's how you use JSONArea's update event myJSONArea.getElement().addEventListener('update',function(e) if(e.detail.isJSON)  // do something > else  // do something else > >);

About

JSON Validated Textarea. Lightweight and Unopinionated.

Источник

Prettify json data in textarea input

The syntax highlighting is tough but check out this fiddle for pretty printing a json object entered in a text area. Do note that the JSON has to be valid for this to work. (Use the dev console to catch errors.) Check jsLint for valid json.

First try simple input like:

Simple pretty printing of JSON can be done rather easily. Try this js code: (jsFiddle here)

// arbitrary js object: var myJsObj = ; // using JSON.stringify pretty print capability: var str = JSON.stringify(myJsObj, undefined, 4); // display pretty printed object in text area: document.getElementById('myTextArea').innerHTML = str; 

Solution 2

Late answer but modern one, use the secret intendation parameter.

I usually go for:

JSON.stringify(myData, null, 4);

Here’s the code definition, it explains it well.

stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;

/** * Converts a JavaScript value to a JavaScript Object Notation (JSON) string. * @param value A JavaScript value, usually an object or array, to be converted. * @param replacer An array of strings and numbers that acts as a approved list for selecting the object properties that will be stringified. * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read. */ 

Solution 3

For the parsing step you’re just going to want to JSON.parse the contents of the textarea and handle any errors from bad input.

For the formatting part of your question, Use JSON.stringify(blob, undefined, 2) . Alternatively, if you need colors here is a simple JSON format/color component written in React:

const HighlightedJSON = (< json >: Object) => < const highlightedJSON = jsonObj =>Object.keys(jsonObj).map(key => < const value = jsonObjJson in html textarea; let valueType = typeof value; const isSimpleValue = ["string", "number", "boolean"].includes(valueType) || !value; if (isSimpleValue && valueType === "object") < valueType = "null"; >return ( 
 : >`> ) : ( highlightedJSON(value) )>
 ); >); return 
; >; 

Solution 4

If you are a jquery fan, you can also use this small plugin I wrote:

// The plugin $.fn.json_beautify= function() < this.each(function()< var el = $(this), obj = JSON.parse(el.val()), pretty = JSON.stringify(obj, undefined, 4); el.val(pretty); >); >; // Then use it like this on any textarea $('textarea').json_beautify();

UPD Changed code to multiselected elements.

Solution 5

I don’t think that can be done with regular textareas. What you can do (and how most online code editors do it) is to create a transparent textarea that overlays on top of a div that contains the styled code. The user would still be able to type and interact with the input (and it fires the associated form events), and you can show syntax highlighting in the div that the user will visually see (see Textarea that can do syntax highlighting on the fly?)

Now as for JSON formatting, I would add custom events to the textarea so that when a user types or paste something, run it through a Javascript JSON prettifier (see How can I pretty-print JSON using JavaScript?) and then re-populate the div and textarea accordingly

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

visual JSON editor with comments

mm-sam/json-textarea

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

visual JSON editor with comments

textarea name pl-s">hello" class pl-s">json_editor"> [1, 2, 3, "Hello"] textarea> script src pl-s">path/of/json-textarea.js">script> 

textarea name pl-s">json" class pl-s">my-class"> [1, 2, 3, "Hello"] textarea> script src pl-s">path/of/json-textarea.js">script> script> JSONTextArea.Launcher.init(".my-class",  comments: >, //comments data /** * comments save callback **/ updateComments: function(e)  //do something > >) script> 

updateComments : function (e)  console.log(e.key); //JSON path console.log(e.comments); //comments text console.log(e.target); //textarea element >

About

visual JSON editor with comments

Источник

Kwintessential Notes

In an application I am using heavily JSON default as the data-format. To make debugging a bit more easy I am working on a toolbar to be able to check the content of the JSON objects.

Normally I use JSONLint most of the time to prettify (and validate) the JSON so it becomes a bit easier to read and check. But this copy and paste habit becomes more and more obnoxious so there I wanted to have a toolbar (like the debug toolbar) to have a good overview of the JSON objects.

However if you write the JSON object to a computed field or text area field (inputTextarea control in the XPages world) it is just plain, unformatted text. Not pretty for the eye and not much helpful for the brain.

So I tested a simple approach which turns out to run just fine. I display the json object in a textarea input control and then with CSJS I format the content. Here is some sample code:

Here is what it looks like:

The content how it looks initially.

The content how it looks like after running the code.

Note I had to include the [ ] signs in my code to make the JSON valid due to circumstances in my code, I removed it from the sample code above.

At least now I understand my JSON objects again and I can avoid some copy and paste to JSONLint 🙂

This is probably my last blog of this year so I would like to wish you some wonderful Christmas days. Take care and best wishes for a healthy 2017!

Источник