Codemirror 不会对来自 textarea 的代码进行样式设置

Question

我无法从中得到解决方案。 帮助将不胜感激

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;
}

我的需要是在 textarea 中编写的代码必须由 codemirrod 突出显示，首先我不是专业开发人员，所以如果代码不正确，请原谅......我需要这个伟大社区的专业帮助！

Answer 1

我将在 24 小时内删除这个答案和问题，因为 StackOverflow 是关于技术问题的具体技术解决方案，而不是工作请求。 下次使用秘银聊天室！

我可以通过稍微清理一下代码来让 CodeMirror 工作。 现场演示- 代码：

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'),
            ),
          ),
        ),
      ),
    ),
})