KnowZero / tinymce4-languagetool

Attempt to port Language Tool Spelling and Grammar Check to TinyMCE 4 [ALPHA/EXPIREMENTAL]
Apache License 2.0
21 stars 11 forks source link

Cannot read property '$el' of undefined after Tinymce editor instance remove() #4

Closed pderiy closed 7 years ago

pderiy commented 7 years ago

Hi,

I have angular-ui-router (this is router by frontend side). After leave page with tinymce editor I have to remove all ckeditor instances. And after second tinymce.init I have an error

Config:

tinymce.init({
      height: 150,
      lt_highlight_click: 'right',
      lt_lang: 'pl',
      lt_mode: 'new_word',
      menubar: false,
      selector: '#' + textarea.id,
      type: 'text',
      // statusbar: false,
      toolbar: false,

      external_plugins: {
        languagetool: '/js/libs/languagetool/plugin.min.js'
      }
    });

On page leave:

$onDestroy() {

      element('#fb-render textarea').each((index, textarea) => {
        tinymce.get(textarea.id).remove();
      })
    }

(It should remove all tinymce instances and it does)

After going back to the page it should call tinymce.init again

tinymce.init({
      height: 150,
      lt_highlight_click: 'right',
      lt_lang: 'pl',
      lt_mode: 'new_word',
      menubar: false,
      selector: '#' + textarea.id,
      type: 'text',
      // statusbar: false,
      toolbar: false,

      external_plugins: {
        languagetool: '/js/libs/languagetool/plugin.min.js'
      }
    });

But after second initialization I have an error:

Uncaught TypeError: Cannot read property '$el' of undefined
    at plugin.min.js:191
    at lt_progress_bar (languagetool.min.js:1079)
    at languagetool.min.js:577
    at Function.grep (jquery.js:432)
    at Array.<anonymous> (languagetool.min.js:550)
    at Function.each (jquery.js:362)
    at lt_timer_func (languagetool.min.js:549)
(anonymous) @ plugin.min.js:191
lt_progress_bar @ languagetool.min.js:1079
(anonymous) @ languagetool.min.js:577
grep @ jquery.js:432
(anonymous) @ languagetool.min.js:550
each @ jquery.js:362
lt_timer_func @ languagetool.min.js:549
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
setTimeout (async)
lt_timer @ languagetool.min.js:915
lt_timer_func @ languagetool.min.js:756
KnowZero commented 7 years ago

I applied a fix in 0.31-Alpha, see if it works now.

KnowZero commented 7 years ago

Oh by the way, a minor thing but to note:(unrelated to the bug)

lt_highlight_click is "right" by default. you also don't need to use external_plugin and can load it as a normal plugin. The demo just uses external mode because I am loading tinymce from the cdn in the demo.

pderiy commented 7 years ago

is okay now, thx.

Oh, good to know, thx)