Codemirror 不会对 textarea 中的代码进行样式

问题描述

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


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...' }),{ 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 突出显示，首先，我不是专业开发人员，所以如果代码不正确，请原谅......我需要这个伟大社区的专业帮助！

解决方法

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

我可以通过稍微清理代码来让 CodeMirror 工作。 Live demo – 代码：

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('h1.outptitle'),m('iframe#output'),})

javascript mithril.js