josdejong/jsoneditor
Code mode (Ace editor) not working inside shadow DOM
Open
#742 opened on Jul 16, 2019
bughelp wanted
Repository metrics
- Stars
- (12,262 stars)
- PR merge metrics
- (Avg merge 15h 36m) (3 merged PRs in 30d)
Description
Hi, I want to make a JSON editor custom element. But I meet some problems. Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jsoneditor/jsoneditor.min.js"></script>
</head>
<body>
<json-editor></json-editor>
</body>
<template id='custom-template'>
<link href="jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
<div id="jsoneditor" style="width: 500px; height: 500px;"></div>
</template>
<script>
var template = document.getElementById('custom-template')
class CustomJsonEditor extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({mode: 'open'})
this._shadowRoot.appendChild(template.content.cloneNode(true))
var options = {
mode: 'code',
modes: ["code", "tree"],
};
this.container = this._shadowRoot.querySelector('div');
this.editor = new JSONEditor(this.container, options);
}
}
customElements.define('json-editor', CustomJsonEditor);
</script>
</html>
And the Json editor will become this:
It seems that I need to load the ace theme somewhere, right? I am a beginner on JavaScript. Could you give me some helps? Thank you.