Search code examples
javascriptmithril.js

Codemirror doesnt style code from textarea


I can't get a solution from this. an help will be appreciated


import CodeMirror from "codemirror";


export default class RealTimeEditor extends Page {

  view() {
    window.onload = function () {
      var editor =    CodeMirror.fromTextArea(document.getElementById("editortext"), {
        mode: "text/html",
        height: "197px",
        lineNumbers: true
      });

    };
    return m('.IndexPage', [
      IndexPage.prototype.hero(),
      m(
        '.container',
        m('.sideNavContainer', [
          m('nav.IndexPage-nav.sideNav', m('ul', listItems(IndexPage.prototype.sidebarItems().toArray()))),
          m('.IndexPage-results.sideNavOffset', [
            m('div', { className: 'hometitle' }, m('h1', { className: 'maintitle' }, app.translator.trans('flarum-ext-realtimecode.forum.htmleditor'))),
            m(
              'div',
              { className: 'mainpar' },
              m(
                'p',
                { className: 'desc' },
                app.translator.trans('flarum-ext-realtimecode.forum.description')
              )
            ),
            m('div', { className: 'main' }, [
              m('textarea', { className: 'contedit', id: 'editortext', name:'editortext', onkeyup: refresh, placeholder: 'Type or paste your code here...' }),
              m('div', { className: 'hometitle' }, m('h1', { className: 'outptitle' }, app.translator.trans('flarum-ext-realtimecode.forum.outputtitle'))),
              m('iframe', { id: 'output' }),
            ]),
          ]),
        ])
      ),
    ]);
  }}
function refresh() {
  document.getElementById('output').srcdoc = document.getElementById('editortext').value;
}


My need are that code writed inside of textarea must be highlighted by codemirrod, first of all i'm not a professional developer so excuse me if the code is not correct...i need a professional help from this great community!


Solution

  • I will delete this answer and the question in 24 hrs since StackOverflow is meant to be about concrete technical solutions to technical problems, not work requests. Next time use the Mithril chatroom!

    I can get CodeMirror working by cleaning up the code a bit. Live demo – code:

    m.mount(document.body, {
      view : () =>
        m('.IndexPage',
          m('.container',
            m('.sideNavContainer',
              m('nav.IndexPage-nav.sideNav', 
                m('ul'),
              ),
              
              m('.IndexPage-results.sideNavOffset',
                m('.hometitle', 
                  m('h1.maintitle'),
                ),
                
                m('.mainpar',
                  m('p.desc'),
                ),
    
                m('.main',
                  m('textarea.contedit', {
                    placeholder: 'Type or paste your code here...' ,
                    
                    oncreate({dom}){
                      CodeMirror.fromTextArea(dom, {
                        mode: "text/html",
                        height: "197px",
                        lineNumbers: true
                      });
                    },
    
                    onkeyup({target}){
                      target.srcdoc = target.value
                    }, 
                  }),
    
                  m('.hometitle', 
                    m('h1.outptitle'),
                  ),
    
                  m('iframe#output'),
                ),
              ),
            ),
          ),
        ),
    })