riot.js codemirror tagを作る。

4352 ワード
CM codemirro riot.js tag tag テキストリンク

<cm></cm>でいくつでも複製可能、web componentが期待されている点はこの辺。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/codemirror.js"></script>
<script src="//gnjo.github.io/riot.js"></script>
<cm></cm>
<cm></cm>
<cm></cm>
<cm></cm>
<cm></cm>
<cm></cm>

riot.tag(`cm`
 ,`<form><textarea ref="code"></textarea></form>
<style>.CodeMirror {
  border: 1px solid #eee;
  height: auto;
} cm+cm>form{margin-top:1rem}</style>
`         
,function(opt){
  let cm=null,C=CodeMirror;
  this.on('mount',function(){
   console.log('in')
   cm = C.fromTextArea(this.refs.code,{lineNumbers: true,viewportMargin: Infinity});
  })
})
;
riot.mount('cm',{})

注意

riot.tag(tag,html,css,constructor)
riot.tagの第三引数にはcssを入れることが出来るが、headの末尾に挿入されてしまう。component化しているのだからscopedで入れて欲しい所だが、仕様のようなのでhtmlの中に<style></style>を入れる。

riot.tag(...,...<style>
.CodeMirror {
 border: 1px solid #eee;
 height: auto;
}
</style>,...)