adoc-editor.html (5348B)
1 <html> 2 <head> 3 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> 4 <script src="https://unpkg.com/vue-router@2.0.0"></script> 5 <!-- include asciidcotor.js--> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.6/asciidoctor.min.js"></script> 7 <!-- include mathjax.js--> 8 <script type="text/x-mathjax-config"> 9 MathJax.Hub.Config({ 10 extensions: ["tex2jax.js"], 11 jax: ["input/TeX", "output/HTML-CSS"], 12 tex2jax: { 13 inlineMath: [ ['$','$'], ["\\(","\\)"] ], 14 displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 15 processEscapes: true 16 }, 17 "HTML-CSS": { fonts: ["TeX"] } 18 }); 19 </script> 20 <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js' async></script> 21 </script> 22 <style> 23 textarea { 24 width: 100%; 25 height: 100%; 26 display: block; 27 border: 0; 28 /*outline: none;*/ 29 } 30 </style> 31 </head> 32 33 <body> 34 <div id="app"> 35 <button @click="editing = !editing">{{ editing ? "View" : "Edit" }}</button> 36 <span v-show="editing"> 37 <button @click="addBold"><b>b</b></button> 38 <button @click="addItalics"><i>i</i></button> 39 ...more tools here 40 </span> 41 <hr> 42 <textarea v-show="editing" v-model="adocSource" ref="ta"></textarea> 43 <div v-show="!editing" v-html="adocRendered"></div> 44 </div> 45 46 <script type="text/javascript"> 47 var app = new Vue({ 48 el: "#app", 49 data: { 50 asciidoctor: null, 51 adocSource: "", 52 adocRendered: "", 53 editing: true 54 }, 55 watch: { 56 editing(on) { 57 if (!on) { 58 this.render(); 59 } 60 }, 61 adocRendered() { 62 // TODO: This doesn't work now with the Vueified version for some reason 63 MathJax.Hub.Config({ 64 extensions: ["tex2jax.js"], 65 jax: ["input/TeX", "output/HTML-CSS"], 66 tex2jax: { 67 inlineMath: [ ['$','$'], ["\\(","\\)"] ], 68 displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 69 processEscapes: true 70 }, 71 "HTML-CSS": { fonts: ["TeX"] } 72 }); 73 MathJax.Hub.Typeset(); 74 // Thanks: https://docs.mathjax.org/en/v2.7-latest/advanced/typeset.html 75 } 76 }, 77 methods: { 78 render() { 79 this.adocRendered = Asciidoctor().convert(this.adocSource,{safe: 'safe'}); 80 }, 81 addBold() { 82 this.wrapSelection("*"); 83 }, 84 addItalics() { 85 this.wrapSelection("_"); 86 }, 87 /** 88 * wrap text between start and end index in the given symbol 89 */ 90 wrapSelection(symbol) { 91 let selStart = this.$refs.ta.selectionStart-1; 92 let selEnd = this.$refs.ta.selectionEnd-1; 93 if (selStart === this.adocSource.length-1) { 94 this.adocSource += symbol + symbol; 95 // TODO: Set selectionStart between the two stars 96 return; 97 } 98 let pre = this.adocSource.substr(0, selStart+1); 99 let selected = this.adocSource.substr(selStart+1, selEnd-selStart) 100 let post = this.adocSource.substr(selEnd+1); 101 this.adocSource = pre + symbol + selected + symbol + post; 102 } 103 } 104 }); 105 /* 106 function render() { 107 let content = document.getElementById('source').value; 108 console.log(content); 109 const html = asciidoctor.convert(content,{safe: 'safe'}); 110 document.getElementById('target').innerHTML = html; 111 } 112 function update() { 113 render(); 114 MathJax.Hub.Config({ 115 extensions: ["tex2jax.js"], 116 jax: ["input/TeX", "output/HTML-CSS"], 117 tex2jax: { 118 inlineMath: [ ['$','$'], ["\\(","\\)"] ], 119 displayMath: [ ['$$','$$'], ["\\[","\\]"] ], 120 processEscapes: true 121 }, 122 "HTML-CSS": { fonts: ["TeX"] } 123 }); 124 MathJax.Hub.Typeset(); 125 // Thanks: https://docs.mathjax.org/en/v2.7-latest/advanced/typeset.html 126 } 127 render(); 128 */ 129 </script> 130 </body> 131 </html>