initializationace-editorunbind

Ace Editor Unbinding and Re-initiating

I have 2 ace editors in the same interface. Contents are loaded dynamically into the ace editors - on click.

I want to empty the editor in order to clear the screen. But, when I do this, subsequent content will not load into the ace editor. 

# code used to initiate the ace editor
function initAceEditor(){
var editor1 = ace.edit("editor1");
editor1.setTheme("ace/theme/dreamweaver");
document.getElementById('editor1').style.fontSize='14px';
editor1.getSession().setUseWrapMode(true)
editor1.getSession().setMode("ace/mode/html");
});

# code to clear editor div
$('#editor1').empty().attr('class', '');


# I tried the following methods to unbind Ace Editor
ace.edit("editor1").getSession().removeListener('change');

# reinitiated by calling the function
initAceEditor();

But the above idea is not working. Note I have 2 editors, I use the same code for editor1 & editor2.

Any help in resolving this is appreciated.

Solution

  • To uninitialize and reinitialize, you can destroy your editor's instance which would clean up the entire editor and would avoid any memory leak, and then Call your initialize function. 

    editor1.destroy();
initAceEditor();

    This would destroy your instance and a create a new one. And if you want to remove the DOM nodes and event listeners you are can use: 

    editor1.container.remove()