vue.js - 在插槽内转义html

Question

I am currently working on a component that looks like this: 我目前正在开发一个如下所示的组件：

  <pre v-highlightjs>
    <code>
      <slot></slot>
    </code>
  </pre>

So the problem I have is that when I am writing html inside the slot, this html is rendered and not shown as a string or code-sample in my case. 所以我遇到的问题是当我在插槽中编写html时，这个html会被渲染，而不是在我的情况下显示为字符串或代码示例。 I have tested it with escaped < and > and it works. 我用转义<和>测试了它并且它有效。 How can I access the html inside the slot and escape it automatically? 如何访问插槽内的html并自动转义？

Thank you 谢谢

EDIT: 编辑：

I use highlight.js for that component to highlight the code inside my component. 我对该组件使用highlight.js来突出显示组件内的代码。 highlight.js can highlight html aswell. highlight.js可以突出显示html。 When I put eg 我放的时候

<html><head></head><body></body></html>

inside my slot, the box is shown, but the input is rendered as html. 在我的插槽中，显示了该框，但输入呈现为html。 So I want to escape the html-Tags (and other code-snippets) so that it is shown and ofc highlighted. 所以我想逃避html-Tags（和其他代码片段），以便显示和突出显示。 Hope that specifies my problem a bit more. 希望能更多地说明我的问题。

Answer 1

An important limitation to be aware of is that your HTML is not HTML, it is input to Vue's templating engine, so what a component sees in the slot may not be exactly what is in the HTML file. 需要注意的一个重要限制是HTML不是HTML，而是输入到Vue的模板引擎，因此组件在插槽中看到的内容可能与HTML文件中的不完全相同。

Writing a directive to take HTML content and replace it with a text version of that content is pretty straightforward. 编写指令以获取HTML内容并将其替换为该内容的文本版本非常简单。 Putting that in a component is also pretty straightforward. 将它放在组件中也非常简单。 You can see these together in the snippet below. 您可以在下面的代码段中看到这些内容。

What you will also see is that the Vue templating engine strips out tags that shouldn't be inside the body : the html , head , and body tags don't make it to the component. 什么你也将看到的是，Vue的模板引擎剔除标签不应该是内部body ：在html ， head和body标签不使它的组成部分。 Their contents, if any, remain. 如果有的话，他们的内容仍然存在。

If it is important to be able to use those tags (or, for that matter, possibly invalid HTML), you will not be able to do it in a slot. 如果能够使用这些标签（或者，就此而言，可能是无效的HTML）很重要，那么您将无法在插槽中执行此操作。 You will need to have the HTML as a data string, which you can easily interpolate using the normal curlies. 您需要将HTML作为数据字符串，您可以使用普通的curlies轻松插入。

 new Vue({ el: '#app', data: { headContent: 'Something in the head' }, components: { htmlEscaper: { template: '#html-escaper', directives: { escapeContent: { bind(el) { const html = el.innerHTML; el.textContent = html; } } } } } });

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <html-escaper> <html> <head> {{ headContent }} </head> <some-junk> Custom tags are ok </some-junk> <body> <div>This part is legit</div> </body> </html> </html-escaper> </div> <template id="html-escaper"> <code v-escape-content> <slot> </slot> </code> </template>

vue.js - 在插槽内转义html

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-01-14 17:44:09

vue.js - 在插槽内转义html

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-01-14 17:44:09

解决方案1
2 已采纳 2018-01-14 17:44:09