Codemirror 不从 textarea 样式代码
Codemirror doesnt style code from 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...' }),
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高亮显示,首先我不是专业的开发人员所以如果代码不正确请见谅...我需要这个伟大的专业帮助社区!
我将在 24 小时内删除这个答案和问题,因为 Whosebug 旨在提供技术问题的具体技术解决方案,而不是工作请求。下次使用秘银聊天室吧!
我可以通过稍微清理一下代码来让 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('.hometitle',
m('h1.outptitle'),
),
m('iframe#output'),
),
),
),
),
),
})
我无法从中得到解决方案。 我们将不胜感激
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高亮显示,首先我不是专业的开发人员所以如果代码不正确请见谅...我需要这个伟大的专业帮助社区!
我将在 24 小时内删除这个答案和问题,因为 Whosebug 旨在提供技术问题的具体技术解决方案,而不是工作请求。下次使用秘银聊天室吧!
我可以通过稍微清理一下代码来让 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('.hometitle',
m('h1.outptitle'),
),
m('iframe#output'),
),
),
),
),
),
})