Text Editor

1c(
2"097",
3"085",
4"041",
5"055"
6)
7dput(c(
8"097",
9"085",
10"041",
11"055"
12))
13#> c("097", "085", "041", "055")
14

1OU                      
2CORP:Jenny Smith:    
3STORE:Mary Poppins:  
4STORE:Tony Stark:
5STORE:Carmen Sandiego:    
6NEWS:Peter Parker:
7NEWS:Clark Kent:
8OU                      
9CORP
10STORE     
11NEWS
12 OU                      
13 CORP:Jenny Smith:   
14 "CORP:John Smith:,John Smith:" 
15 STORE:Mary Poppins:  
16 STORE:Tony Stark:
17 STORE:Carmen Sandiego:    
18 NEWS:Peter Parker:
19 NEWS:Clark Kent:
20pd.read_csv(file, sep=":", header=None, skiprows=1, usecols=[0], names=['OU']).drop_duplicates()
21

1OU                      
2CORP:Jenny Smith:    
3STORE:Mary Poppins:  
4STORE:Tony Stark:
5STORE:Carmen Sandiego:    
6NEWS:Peter Parker:
7NEWS:Clark Kent:
8OU                      
9CORP
10STORE     
11NEWS
12 OU                      
13 CORP:Jenny Smith:   
14 "CORP:John Smith:,John Smith:" 
15 STORE:Mary Poppins:  
16 STORE:Tony Stark:
17 STORE:Carmen Sandiego:    
18 NEWS:Peter Parker:
19 NEWS:Clark Kent:
20pd.read_csv(file, sep=":", header=None, skiprows=1, usecols=[0], names=['OU']).drop_duplicates()
21      OU
220   CORP
231  STORE
244   NEWS
25

1document.getElementById('texteditor').addEventListener('keyup', function(e) {
2  styleCode(); //Style the text input
3});
4
5//Change the result of pressing Enter and Tab keys
6document.getElementById('texteditor').addEventListener('keydown', function(e) {
7  switch (e.key) {
8            case 'Tab':
9                e.preventDefault();
10                document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
11                break;
12
13            case 'Enter':
14                e.preventDefault();
15                document.execCommand("insertLineBreak"); //Insert a new line
16                break;
17        }
18});
19
20function styleCode(){
21  //Style the code in the input box
22}#texteditor {
23  border: 3px solid black;
24  width:100%;
25  height: 500px;;
26  overflow:auto;
27  flex:1;
28    word-wrap: break-word;
29  word-break: break-all;
30    white-space:pre-wrap;
31  padding:5px;
32  font-family: Consolas,"courier new";
33    font-size:14px;
34}
35
36.styleA {
37  color:red;
38}
39
40.styleB {
41  color:blue;
42}<div id='texteditor' contenteditable></div>const SpecialWords = [
43  "happy",
44  "sad"//style word
45];
46const WordColors = [
47  "styleA",
48  "styleB"//style class name
49];
50document.getElementById('texteditor').addEventListener('keyup', function(e) {
51  styleCode(); //Style the text input
52  
53});
54
55//Change the result of pressing Enter and Tab keys
56document.getElementById('texteditor').addEventListener('keydown', function(e) {
57  switch (e.key) {
58    case 'Tab':
59      e.preventDefault();
60      document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
61      break;
62
63    case 'Enter':
64      e.preventDefault();
65      document.execCommand("insertLineBreak"); //Insert a new line
66      break;
67  }
68});
69var oldWord = "";//initialise
70function styleCode() {
71
72  //Style the code in the input box
73  var wordList = document.getElementById('texteditor').innerText.split(" ");
74/*if old word is same as now then it means we have presed arrow key or caps or so,it do not wan't to style now as no change*/
75  if(!(oldWord == document.getElementById('texteditor').innerText)){
76var oldPos = getCaretPosition(document.getElementById('texteditor'));//backup old position of cursor
77for (let n = 0; n < SpecialWords.length; n++) {
78    var res = replaceAll(wordList,SpecialWords[n],`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
79}
80document.getElementById('texteditorS').innerHTML=res;
81setCursor(oldPos,document.getElementById('texteditor'));//set back cursor position
82}
83
84  oldWord = document.getElementById('texteditor').innerText;//old word for next time's reference
85
86}
87
88function replaceAll(array, find, replace) {
89var arr = array;
90for (let i = 0; i < arr.length; i++) {
91    if (arr[i] == find)
92        arr[i] = replace;
93}
94  return (arr);
95}
96function getCaretPosition(editableDiv) {
97  var caretPos = 0,
98    sel, range;
99  if (window.getSelection) {
100    sel = window.getSelection();
101    if (sel.rangeCount) {
102      range = sel.getRangeAt(0);
103      if (range.commonAncestorContainer.parentNode == editableDiv) {
104        caretPos = range.endOffset;
105      }
106    }
107  } else if (document.selection && document.selection.createRange) {
108    range = document.selection.createRange();
109    if (range.parentElement() == editableDiv) {
110      var tempEl = document.createElement("span");
111      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
112      var tempRange = range.duplicate();
113      tempRange.moveToElementText(tempEl);
114      tempRange.setEndPoint("EndToEnd", range);
115      caretPos = tempRange.text.length;
116    }
117  }
118  return caretPos;
119}
120function setCursor(pos,editableDiv) {
121if(!(pos == 0)){//if 0 it gives unwanted error
122            var tag = editableDiv;
123              
124            // Creates range object
125            var setpos = document.createRange();
126              
127            // Creates object for selection
128            var set = window.getSelection();
129              
130            // Set start position of range
131            setpos.setStart(tag.childNodes[0], pos);
132              
133            // Collapse range within its boundary points
134            // Returns boolean
135            setpos.collapse(true);
136              
137            // Remove all ranges set
138            set.removeAllRanges();
139            // Add range with respect to range object.
140            set.addRange(setpos);
141              
142            // Set cursor on focus
143            tag.focus();
144            }
145        }

1document.getElementById('texteditor').addEventListener('keyup', function(e) {
2  styleCode(); //Style the text input
3});
4
5//Change the result of pressing Enter and Tab keys
6document.getElementById('texteditor').addEventListener('keydown', function(e) {
7  switch (e.key) {
8            case 'Tab':
9                e.preventDefault();
10                document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
11                break;
12
13            case 'Enter':
14                e.preventDefault();
15                document.execCommand("insertLineBreak"); //Insert a new line
16                break;
17        }
18});
19
20function styleCode(){
21  //Style the code in the input box
22}#texteditor {
23  border: 3px solid black;
24  width:100%;
25  height: 500px;;
26  overflow:auto;
27  flex:1;
28    word-wrap: break-word;
29  word-break: break-all;
30    white-space:pre-wrap;
31  padding:5px;
32  font-family: Consolas,"courier new";
33    font-size:14px;
34}
35
36.styleA {
37  color:red;
38}
39
40.styleB {
41  color:blue;
42}<div id='texteditor' contenteditable></div>const SpecialWords = [
43  "happy",
44  "sad"//style word
45];
46const WordColors = [
47  "styleA",
48  "styleB"//style class name
49];
50document.getElementById('texteditor').addEventListener('keyup', function(e) {
51  styleCode(); //Style the text input
52  
53});
54
55//Change the result of pressing Enter and Tab keys
56document.getElementById('texteditor').addEventListener('keydown', function(e) {
57  switch (e.key) {
58    case 'Tab':
59      e.preventDefault();
60      document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
61      break;
62
63    case 'Enter':
64      e.preventDefault();
65      document.execCommand("insertLineBreak"); //Insert a new line
66      break;
67  }
68});
69var oldWord = "";//initialise
70function styleCode() {
71
72  //Style the code in the input box
73  var wordList = document.getElementById('texteditor').innerText.split(" ");
74/*if old word is same as now then it means we have presed arrow key or caps or so,it do not wan't to style now as no change*/
75  if(!(oldWord == document.getElementById('texteditor').innerText)){
76var oldPos = getCaretPosition(document.getElementById('texteditor'));//backup old position of cursor
77for (let n = 0; n < SpecialWords.length; n++) {
78    var res = replaceAll(wordList,SpecialWords[n],`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
79}
80document.getElementById('texteditorS').innerHTML=res;
81setCursor(oldPos,document.getElementById('texteditor'));//set back cursor position
82}
83
84  oldWord = document.getElementById('texteditor').innerText;//old word for next time's reference
85
86}
87
88function replaceAll(array, find, replace) {
89var arr = array;
90for (let i = 0; i < arr.length; i++) {
91    if (arr[i] == find)
92        arr[i] = replace;
93}
94  return (arr);
95}
96function getCaretPosition(editableDiv) {
97  var caretPos = 0,
98    sel, range;
99  if (window.getSelection) {
100    sel = window.getSelection();
101    if (sel.rangeCount) {
102      range = sel.getRangeAt(0);
103      if (range.commonAncestorContainer.parentNode == editableDiv) {
104        caretPos = range.endOffset;
105      }
106    }
107  } else if (document.selection && document.selection.createRange) {
108    range = document.selection.createRange();
109    if (range.parentElement() == editableDiv) {
110      var tempEl = document.createElement("span");
111      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
112      var tempRange = range.duplicate();
113      tempRange.moveToElementText(tempEl);
114      tempRange.setEndPoint("EndToEnd", range);
115      caretPos = tempRange.text.length;
116    }
117  }
118  return caretPos;
119}
120function setCursor(pos,editableDiv) {
121if(!(pos == 0)){//if 0 it gives unwanted error
122            var tag = editableDiv;
123              
124            // Creates range object
125            var setpos = document.createRange();
126              
127            // Creates object for selection
128            var set = window.getSelection();
129              
130            // Set start position of range
131            setpos.setStart(tag.childNodes[0], pos);
132              
133            // Collapse range within its boundary points
134            // Returns boolean
135            setpos.collapse(true);
136              
137            // Remove all ranges set
138            set.removeAllRanges();
139            // Add range with respect to range object.
140            set.addRange(setpos);
141              
142            // Set cursor on focus
143            tag.focus();
144            }
145        }.edit {
146  border: 3px solid black;
147  width: 100%;
148  height: 500px;
149  ;
150  overflow: auto;
151  flex: 1;
152  word-wrap: break-word;
153  word-break: break-all;
154  white-space: pre-wrap;
155  padding: 5px;
156  font-family: Consolas, "courier new";
157  font-size: 14px;
158}
159
160.styleA {
161  color: red;
162}
163
164.styleB {
165  color: blue;
166}
167#texteditorS{
168pointer-events:none;  /*click through*/
169position:relative;
170bottom: calc(500px + 2 * (5px + 3px));/*overlay on top of editable div,500px is height,5px is padding,3px is border*/
171
172}

1document.getElementById('texteditor').addEventListener('keyup', function(e) {
2  styleCode(); //Style the text input
3});
4
5//Change the result of pressing Enter and Tab keys
6document.getElementById('texteditor').addEventListener('keydown', function(e) {
7  switch (e.key) {
8            case 'Tab':
9                e.preventDefault();
10                document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
11                break;
12
13            case 'Enter':
14                e.preventDefault();
15                document.execCommand("insertLineBreak"); //Insert a new line
16                break;
17        }
18});
19
20function styleCode(){
21  //Style the code in the input box
22}#texteditor {
23  border: 3px solid black;
24  width:100%;
25  height: 500px;;
26  overflow:auto;
27  flex:1;
28    word-wrap: break-word;
29  word-break: break-all;
30    white-space:pre-wrap;
31  padding:5px;
32  font-family: Consolas,"courier new";
33    font-size:14px;
34}
35
36.styleA {
37  color:red;
38}
39
40.styleB {
41  color:blue;
42}<div id='texteditor' contenteditable></div>const SpecialWords = [
43  "happy",
44  "sad"//style word
45];
46const WordColors = [
47  "styleA",
48  "styleB"//style class name
49];
50document.getElementById('texteditor').addEventListener('keyup', function(e) {
51  styleCode(); //Style the text input
52  
53});
54
55//Change the result of pressing Enter and Tab keys
56document.getElementById('texteditor').addEventListener('keydown', function(e) {
57  switch (e.key) {
58    case 'Tab':
59      e.preventDefault();
60      document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
61      break;
62
63    case 'Enter':
64      e.preventDefault();
65      document.execCommand("insertLineBreak"); //Insert a new line
66      break;
67  }
68});
69var oldWord = "";//initialise
70function styleCode() {
71
72  //Style the code in the input box
73  var wordList = document.getElementById('texteditor').innerText.split(" ");
74/*if old word is same as now then it means we have presed arrow key or caps or so,it do not wan't to style now as no change*/
75  if(!(oldWord == document.getElementById('texteditor').innerText)){
76var oldPos = getCaretPosition(document.getElementById('texteditor'));//backup old position of cursor
77for (let n = 0; n < SpecialWords.length; n++) {
78    var res = replaceAll(wordList,SpecialWords[n],`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
79}
80document.getElementById('texteditorS').innerHTML=res;
81setCursor(oldPos,document.getElementById('texteditor'));//set back cursor position
82}
83
84  oldWord = document.getElementById('texteditor').innerText;//old word for next time's reference
85
86}
87
88function replaceAll(array, find, replace) {
89var arr = array;
90for (let i = 0; i < arr.length; i++) {
91    if (arr[i] == find)
92        arr[i] = replace;
93}
94  return (arr);
95}
96function getCaretPosition(editableDiv) {
97  var caretPos = 0,
98    sel, range;
99  if (window.getSelection) {
100    sel = window.getSelection();
101    if (sel.rangeCount) {
102      range = sel.getRangeAt(0);
103      if (range.commonAncestorContainer.parentNode == editableDiv) {
104        caretPos = range.endOffset;
105      }
106    }
107  } else if (document.selection && document.selection.createRange) {
108    range = document.selection.createRange();
109    if (range.parentElement() == editableDiv) {
110      var tempEl = document.createElement("span");
111      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
112      var tempRange = range.duplicate();
113      tempRange.moveToElementText(tempEl);
114      tempRange.setEndPoint("EndToEnd", range);
115      caretPos = tempRange.text.length;
116    }
117  }
118  return caretPos;
119}
120function setCursor(pos,editableDiv) {
121if(!(pos == 0)){//if 0 it gives unwanted error
122            var tag = editableDiv;
123              
124            // Creates range object
125            var setpos = document.createRange();
126              
127            // Creates object for selection
128            var set = window.getSelection();
129              
130            // Set start position of range
131            setpos.setStart(tag.childNodes[0], pos);
132              
133            // Collapse range within its boundary points
134            // Returns boolean
135            setpos.collapse(true);
136              
137            // Remove all ranges set
138            set.removeAllRanges();
139            // Add range with respect to range object.
140            set.addRange(setpos);
141              
142            // Set cursor on focus
143            tag.focus();
144            }
145        }.edit {
146  border: 3px solid black;
147  width: 100%;
148  height: 500px;
149  ;
150  overflow: auto;
151  flex: 1;
152  word-wrap: break-word;
153  word-break: break-all;
154  white-space: pre-wrap;
155  padding: 5px;
156  font-family: Consolas, "courier new";
157  font-size: 14px;
158}
159
160.styleA {
161  color: red;
162}
163
164.styleB {
165  color: blue;
166}
167#texteditorS{
168pointer-events:none;  /*click through*/
169position:relative;
170bottom: calc(500px + 2 * (5px + 3px));/*overlay on top of editable div,500px is height,5px is padding,3px is border*/
171
172}<div id='texteditor'  class="edit" contenteditable></div>
173<div id='texteditorS' class="edit"></div>

1<h1 id="text">Escreva seu texto abaixo</h1>
2
3<div id="container">
4    <input type="text" id="type">
5</div>
6<main>
7    <ul>
8        <li class="buttons">
9            <button id="button1">A</button>
10        </li>
11        <li class="buttons">
12            <button id="button2">a</button>
13        </li>
14        <li class="buttons">
15            <button id="button3">B</button>
16        </li>
17        <li class="buttons">
18            <button id="button4">I</button>
19        </li>
20    </ul>
21</main>
22>  let text = document.getElementById("text")
23>         let input = document.getElementById("type")
24>         let button1 = document.getElementById("button1")
25>         let button2 = document.getElementById("button2")
26>         let button3 = document.getElementById("button3")
27>         let button4 = document.getElementById("button4")
28>         let value1 = document.getElementById("type").value
29> 
30> 
31>         button1.onclick = uppercase
32>         button2.onclick = lowercase
33>         button3.onclick = bold
34>         button4.onclick = italic
35> 
36>         function uppercase(){
37>             text.innerHTML = value1.toUpperCase()
38>         }
39> 
40>         function lowercase (){
41>             text.innerText = input.value.toLowerCase()
42>         }
43> 
44>         function bold(){
45>             text.innerText = input.value.style.fontWeight="bold";
46>         }
47let text = document.getElementById("text")
48let input = document.getElementById("type")
49let button1 = document.getElementById("button1")
50let button2 = document.getElementById("button2")
51let button3 = document.getElementById("button3")
52let button4 = document.getElementById("button4")
53
54
55button1.onclick = uppercase
56button2.onclick = lowercase
57button3.onclick = bold
58//button4.onclick = italic
59
60function uppercase() {
61let value1 = document.getElementById("type").value
62  text.innerHTML = value1.toUpperCase()
63}
64
65function lowercase() {
66  text.innerText = input.value.toLowerCase()
67}
68
69function bold() {
70  text.innerHTML = '<b>'+input.value+'</b>'
71}

1<h1 id="text">Escreva seu texto abaixo</h1>
2
3<div id="container">
4    <input type="text" id="type">
5</div>
6<main>
7    <ul>
8        <li class="buttons">
9            <button id="button1">A</button>
10        </li>
11        <li class="buttons">
12            <button id="button2">a</button>
13        </li>
14        <li class="buttons">
15            <button id="button3">B</button>
16        </li>
17        <li class="buttons">
18            <button id="button4">I</button>
19        </li>
20    </ul>
21</main>
22>  let text = document.getElementById("text")
23>         let input = document.getElementById("type")
24>         let button1 = document.getElementById("button1")
25>         let button2 = document.getElementById("button2")
26>         let button3 = document.getElementById("button3")
27>         let button4 = document.getElementById("button4")
28>         let value1 = document.getElementById("type").value
29> 
30> 
31>         button1.onclick = uppercase
32>         button2.onclick = lowercase
33>         button3.onclick = bold
34>         button4.onclick = italic
35> 
36>         function uppercase(){
37>             text.innerHTML = value1.toUpperCase()
38>         }
39> 
40>         function lowercase (){
41>             text.innerText = input.value.toLowerCase()
42>         }
43> 
44>         function bold(){
45>             text.innerText = input.value.style.fontWeight="bold";
46>         }
47let text = document.getElementById("text")
48let input = document.getElementById("type")
49let button1 = document.getElementById("button1")
50let button2 = document.getElementById("button2")
51let button3 = document.getElementById("button3")
52let button4 = document.getElementById("button4")
53
54
55button1.onclick = uppercase
56button2.onclick = lowercase
57button3.onclick = bold
58//button4.onclick = italic
59
60function uppercase() {
61let value1 = document.getElementById("type").value
62  text.innerHTML = value1.toUpperCase()
63}
64
65function lowercase() {
66  text.innerText = input.value.toLowerCase()
67}
68
69function bold() {
70  text.innerHTML = '<b>'+input.value+'</b>'
71}<p id="text">Escreva seu texto abaixo</p>
72
73<div id="container">
74  <input type="text" id="type">
75</div>
76<main>
77  <ul>
78    <li class="buttons">
79      <button id="button1">A</button>
80    </li>
81    <li class="buttons">
82      <button id="button2">a</button>
83    </li>
84    <li class="buttons">
85      <button id="button3">B</button>
86    </li>
87    <li class="buttons">
88      <button id="button4">I</button>
89    </li>
90  </ul>
91</main>

1<div>{{FORM_PLACEHOLDER}}</div>
2<div id="user-customized-content">
3    <h1 class="display-1">Customized Header</h1>
4    <p class="mb-3">
5        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
6        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
7        <strong>laboris nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure dolor in 
8        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
9        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10    </p>
11    <div class="alert alert-info">
12        <p>Laboris nisi ut <em>aliquip</em> ex ea commodo consequat</p>
13    </div>
14    <h3 class="display-4">Lorem ipsum dolor:</h3>
15    <form>{{FORM_PLACEHOLDER}}</form>
16    <p class="mb-3">
17        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
18        id est laborum.
19    </p>
20</div>
21<template>
22    <HtmlWrapper>
23        Name: <input type="text" name="Name" v-validate="'required'" /><br />
24        Email: <input type="email" name="Email" /><br />
25        <button @click="dofunction()">Submit Form</button>
26    </HtmlWrapper>
27</template>
28
29<script>
30    import HtmlWrapper from "@/components/HtmlWrapper.vue"
31</script>
32<template>
33  <div id="example-code">
34    <!-- use v-html to render the template -->
35    <div v-html="template" />
36    <!-- use teleport to push content to #target which will be mounted by v-html above -->
37    <teleport 
38      v-if="initialized" 
39      to="#target"
40    >
41      Name: <input type="text" name="Name" v-validate="'required'" /><br />
42      Email: <input type="email" name="Email" /><br />
43      <button @click="dofunction()">Submit Form</button>
44    </teleport>
45  </div>
46</template>
47
48<script>
49import { nextTick, onMounted, ref } from 'vue'
50
51export default {
52  setup() {
53    const initialized = ref(false)
54    // for easier explaining, I create a #target div directly in the string
55    // Otherwise, it should be an empty string: ref('') here
56    const template = ref('<div id="target"></div>')
57
58    onMounted(async () => {
59      // The 2 lines below are just my assumtion the way you get the XHTML string
60      // const {data} = await axios.get('/template.html')
61      // template.value = data
62
63      // use the nextTick to make sure the template is rendered
64      nextTick(() => {
65        initialized.value = true
66      })
67    })
68    return {
69      initialized,
70      template,
71    }
72  }
73}
74</script>
75

1<div>{{FORM_PLACEHOLDER}}</div>
2<div id="user-customized-content">
3    <h1 class="display-1">Customized Header</h1>
4    <p class="mb-3">
5        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
6        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
7        <strong>laboris nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure dolor in 
8        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
9        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10    </p>
11    <div class="alert alert-info">
12        <p>Laboris nisi ut <em>aliquip</em> ex ea commodo consequat</p>
13    </div>
14    <h3 class="display-4">Lorem ipsum dolor:</h3>
15    <form>{{FORM_PLACEHOLDER}}</form>
16    <p class="mb-3">
17        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
18        id est laborum.
19    </p>
20</div>
21<template>
22    <HtmlWrapper>
23        Name: <input type="text" name="Name" v-validate="'required'" /><br />
24        Email: <input type="email" name="Email" /><br />
25        <button @click="dofunction()">Submit Form</button>
26    </HtmlWrapper>
27</template>
28
29<script>
30    import HtmlWrapper from "@/components/HtmlWrapper.vue"
31</script>
32<template>
33  <div id="example-code">
34    <!-- use v-html to render the template -->
35    <div v-html="template" />
36    <!-- use teleport to push content to #target which will be mounted by v-html above -->
37    <teleport 
38      v-if="initialized" 
39      to="#target"
40    >
41      Name: <input type="text" name="Name" v-validate="'required'" /><br />
42      Email: <input type="email" name="Email" /><br />
43      <button @click="dofunction()">Submit Form</button>
44    </teleport>
45  </div>
46</template>
47
48<script>
49import { nextTick, onMounted, ref } from 'vue'
50
51export default {
52  setup() {
53    const initialized = ref(false)
54    // for easier explaining, I create a #target div directly in the string
55    // Otherwise, it should be an empty string: ref('') here
56    const template = ref('<div id="target"></div>')
57
58    onMounted(async () => {
59      // The 2 lines below are just my assumtion the way you get the XHTML string
60      // const {data} = await axios.get('/template.html')
61      // template.value = data
62
63      // use the nextTick to make sure the template is rendered
64      nextTick(() => {
65        initialized.value = true
66      })
67    })
68    return {
69      initialized,
70      template,
71    }
72  }
73}
74</script>
75str = "<form>{{FORM_PLACEHOLDER}}</form>"
76re = /\{\{FORM_PLACEHOLDER\}\}/
77str.replace(re, '<div id="target"></div>"')
78// '<form><div id="target"></div>"</form>'
79