Add readOnly for mode=code

[cope]

We are adding the 'jsoneditor-readonly' class to make the jsoneditor look like mode=code, but readOnly.

It would be nice if there was a proper way to accomplish this, as well as to specify a readOnly theme. For example, I would love to use eclipse theme for regular code mode, and then dawn theme for code mode which would then be readOnly=true...

One can see here that the Ace editor has readOnly as an option. It would be nice if this was also available in the jsoneditor.

[josdejong]

If you want to do custom configuration of the Ace editor that JSONEditor uses when in mode code, you can do so in two ways:

• Provide your own instance of Ace via the option ace (see docs).
• When the editor is in mode code, you can access the internal Ace editor via editor.aceEditor.

Does that help?

[cope]

Yes! Awesome, thanks!

Closing.

[CicherMK]

@cope how do you achieve it?... I was trying to pass an instance of Ace via the ace option, but to instantiate it seems to need a div element 🤔

[josdejong]

@CicherMK did you see the https://github.com/josdejong/jsoneditor/blob/develop/examples/08_custom_ace.html example?

[CicherMK]

Thanks @josdejong for your response !

I forgot to mention that I'm using jsoneditor-react, which in turn uses the brace version of Ace Editor.

Anyways, checking Ace Editor's documentation, it says that you need to pass the id of the DOM's containing element:

But:

🤔

[josdejong]

JSONEditor creates it's own instance of Ace editor because it has to bind it to a DIV element that is created by JSONEditor itself. Looking at the package.json of react-jsoneditor it looks like it uses jsoneditor@7.1.0, which switched from brace to ace-builds, so it should not rely on brace anymore.

What you can probably do is pass your own edit factory function to work around any difference between differing versions of ace, like:

render() {
  const myAceFactory = {
    edit: function (domElement) {
      // create your own Ace instance, bind it to the provided DOM element, return it
    }
  }

  return (
    <Editor
      ace={myAceFactory}
      // ...
    />
  )
}

[CicherMK]

Thanks @josdejong !!, it works! 🤓🤙

The only thing, I had to use an ugly setTimeout:

otherwise, it just not works.... maybe is not the nicest approach, but I can live with that 😜
(at least for now)

Thanks!!

[josdejong]

👍 thanks for sharing your solution!