How To Pass Html Template As Props To Vue Component
Solution 1:
<textarea> components are treated as static by the Vue renderer, thus after they are put into the DOM, they don't change at all (so that's why if you inspect the DOM you'll see <slot></slot> inside your <textarea>).
But even it if they did change, that wouldn't help much. Just because HTML elements inside <textarea>s don't become their value. You have to set the value property of the TextArea element to make it work.
Anyway, don't despair. It is doable, all you need to overcome the issues above is to bring a small helper component into play.
There are many possible ways to achieve this, two shown below. They differ basically in how you would want your original component's template to be.
Answer : change <textarea> into <textarea-slot> component
Your component's template would now become:
<template><div><textarea-slotv-model="myContent":name="name":id="id"><slot></slot></textarea-slot></div></template>As you can see, nothing but replacing <textarea> with <textarea-slot> changed. This is enough to overcome the static treatment Vue gives to <textarea>. The full implementation of <textarea-slot> is in the demo below.
Alternative solution: keep <textarea> but get <slot>'s HTML via <vnode-to-html> component
The solution is to create a helper component (named vnode-to-html below) that would convert your slot's VNodes into HTML strings. You could then set such HTML strings as the value of your <textarea>. Your component's template would now become:
<template><div><vnode-to-html:vnode="$slots.default" @html="valForMyTextArea = $event" /><textarea:value="valForMyTextArea":name="name":id="id"></textarea></div></template>In both alternatives...
The usage of the my-component stays the same:
<my-component><pclass="textbox">hello world</p></my-component>Full working demo:
Vue.component('my-component', {
props: ["content", "name", "id"],
template: `
<div>
<textarea-slot
v-model="myContent"
:name="name"
:id="id">
<slot></slot>
</textarea-slot>
<vnode-to-html :vnode="$slots.default" @html="valueForMyTextArea = $event" />
<textarea
:value="valueForMyTextArea"
:name="name"
:id="id">
</textarea>
</div>
`,
data() { return {valueForMyTextArea: '', myContent: null} }
});
Vue.component('textarea-slot', {
props: ["value", "name", "id"],
render: function(createElement) {
returncreateElement("textarea",
{attrs: {id: this.$props.id, name: this.$props.name}, on: {...this.$listeners, input: (e) =>this.$emit('input', e.target.value)}, domProps: {"value": this.$props.value}},
[createElement("template", {ref: "slotHtmlRef"}, this.$slots.default)]
);
},
data() { return {defaultSlotHtml: null} },
mounted() {
this.$emit('input', [...this.$refs.slotHtmlRef.childNodes].map(n => n.outerHTML).join('\n'))
}
});
Vue.component('vnode-to-html', {
props: ['vnode'],
render(createElement) {
returncreateElement("template", [this.vnode]);
},
mounted() {
this.$emit('html', [...this.$el.childNodes].map(n => n.outerHTML).join('\n'));
}
});
newVue({
el: '#app'
})<scriptsrc="https://unpkg.com/vue"></script><divid="app"><my-component><pclass="textbox">hell
o world1</p><pclass="textbox">hello world2</p></my-component></div>Breakdown:
- Vue parses the
<slot>s intoVNodes and makes them available in thethis.$slots.SLOTNAMEproperty. The default slot, naturally, goes inthis.$slots.default. - So, in runtime, you have available to you what has been passed via
<slot>(as VNodes inthis.$slots.default). The challenge now becomes how to convert those VNodes to HTML String? This is a complicated, still open, issue, which may get a different solution in the future, but, even if it ever does, it will most likely take a while. - Both solutions above (
template-slotandvnode-to-html) use Vue's render function to render the VNodes to the DOM, then picks up the rendered HTML. - Since the supplied slots may have arbitrary HTML, we render the VNodes into an HTML Template Element, which doesn't execute any
<script>tags. - The difference between the two solutions is just how they "handle back" the HTML generated from the render function.
- The
vnode-to-htmlreturns as an event that should be picked up by the parent (my-component) which uses the passed value to set adataproperty that will be set as:valueof thetextarea. - The
textarea-slotdeclares itself a<textarea>, to the parent doesn't have to. It is a cleaner solution, but requires more care because you have to specify which properties you want to pass down to the<textarea>created insidetextarea-slot.
- The
Wrapping up and off-the-shelf alternatives
However possible, it is important to know that Vue, when parsing the declared <template> into <slot>s, will strip some formatting information, like whitespaces between top-level components. Similarly, it strips <script> tags (because they are unsafe). These are caveats inherent to any solutions using <slot>s (presented here or not). So be aware.
Typical rich text editors for Vue, work around this problem altogether by using v-model (or value) attributes to pass the code into the components.
Well known examples include:
- vue-ace-editor: Demo/codepen here.
- Vue Prism Editor: Demo here.
- vue-monaco (the code editor that powers VS Code): demo here.
- vue-codemirror: Demo here. This is by far the most starred on github.
They all have very good documentation in their websites (linked above), so it would be of little use for me to repeat them here, but just as an example, see how codemirror uses the value prop to pass the code:
<codemirror ref="myCm"
:value="code"
:options="cmOptions"
@ready="onCmReady"
@focus="onCmFocus"
@input="onCmCodeChange">
</codemirror>
So that's how they do it. Of course, if <slot>s - with its caveats - fit your use case, they can be used as well.
Solution 2:
The short answer is NOT POSSIBLE
Your slot is put inside an textarea tag. Textare tag is only able to display the text content on its box.
So in the case you want a kind of "HTML edit mode", you may looking for an WYSIWYG editor, I recommend you can use CKEditor for VueJS, the editor even will allow you to direct edit HTML code
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Your HTML
<divid="app"><ckeditor:editor="editor"v-model="editorData":config="editorConfig"></ckeditor></div>Your Component
const app = new Vue( {
el: '#app',
data: {
editor: ClassicEditor,
editorData: '<p>Editable Content HTML</p>',
editorConfig: {
// The configuration of the editor.
}
}
} );
Solution 3:
In your case if you want to write your own content editor you can use div with attribute contenteditable="true" rather than textarea. After this you can write your text decoration methods ... The generated html with laravel store in myhtml and use it in vue component.
Example: I also uploaded to codesandbox [Simple Vue Editor]
<template><div><button @click="getEditorCotent">Get Content</button><button @click="setBold">Bold</button><button @click="setItalic">Italic</button><button @click="setUnderline">Underline</button><button @click="setContent">Clear</button><divclass="myeditor"ref="myeditor"contenteditablev-html="myhtml" @input="onInput"></div></div></template><script>exportdefault {
name: "HelloWorld",
props: {
msg: String
},
data: () => {
return {
myhtml:
"<h1>Simple editor</h1><p style='color:red'>in vue</p><p>Hello world</p>"// from laravel server via axios call
};
},
methods: {
onInput(e) {
// handle user input// e.target.innerHTML
},
getEditorCotent() {
console.log(this.$refs.myeditor.innerHTML);
},
setBold() {
document.execCommand("bold");
},
setItalic() {
document.execCommand("italic");
},
setUnderline() {
document.execCommand("underline");
},
setContent() {
// that way set your html contentthis.myhtml = "<b>You cleared the editor content</b>";
}
// PS. Good luck!
}
};
</script><stylescoped>.myeditor {
/* text-align: left; */border: 2px solid gray;
padding: 5px;
margin: 20px;
width: 100%;
min-height: 50px;
}
</style>
Post a Comment for "How To Pass Html Template As Props To Vue Component"