mavonEditor icon indicating copy to clipboard operation
mavonEditor copied to clipboard

Published 20 hours ago • verified publisher icon hinesboy

[Question] 如何更改在编辑时的渲染样式,最好能够将@click等解析出来

Open IamException opened this issue 1 year ago • 1 comments

我希望得到的样式

<div id="img-html0"><prebefore class="preBefore hljs"><span class="circle" style="background-color: #FF5F55"></span><span class="circle" style="background-color: #FFBE2A"></span><span class="circle" style="background-color: #22CA3D"></span><div class="article-code"><span class="hljs-keyword">html</span><a href="javascript:void(0)" class="download-img" data-html2canvas-ignore="" onclick="generateImg('img-html0');">下载</a> <a href="javascript:void(0)" class="copy-code" data-html2canvas-ignore="" onclick="copyCode('html0');">复制</a></div></prebefore> <pre id="html0"><div class="hljs"><code class="lang-html"><span class="hljs-comment">&lt;!-- 文章内容块 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding:20px"</span> <span class="hljs-attr">v-highlight</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-title"</span> <span class="hljs-attr">v-text</span>=<span class="hljs-string">"Blog.title"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
	<span class="hljs-comment">&lt;!-- 用&lt;mavon-editor&gt;标签显示文章内容 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">mavon-editor</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"Blog.html"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding:20px"</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">mavon-editor</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// 导入组件 及 组件样式</span>
  <span class="hljs-keyword">import</span> {mavonEditor} <span class="hljs-keyword">from</span> <span class="hljs-string">'mavon-editor'</span>
  <span class="hljs-keyword">import</span> <span class="hljs-string">'mavon-editor/dist/css/index.css'</span>

  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">components</span>: {
      mavonEditor,
    },
    data () {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-title class_">Blog</span>:<span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      <span class="hljs-keyword">async</span> <span class="hljs-title function_">getBlog</span>(<span class="hljs-params"></span>){
        <span class="hljs-keyword">var</span> <span class="hljs-variable constant_">NO</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$route</span>.<span class="hljs-property">params</span>.<span class="hljs-property">nO</span>;
        <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">$axios</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'/getBlog/'</span>+<span class="hljs-variable constant_">NO</span>)
	<span class="hljs-comment">//将返回的数据赋值给Blog</span>
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">Blog</span> = res.<span class="hljs-property">data</span>
      }
    },
    <span class="hljs-title function_">created</span>(<span class="hljs-params"></span>){
      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getBlog</span>()
    }
  }

</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></div></pre></div>

实际默认渲染的样式：


<pre><div class="hljs"><code class="lang-html"><span class="hljs-comment">&lt;!-- 文章内容块 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding:20px"</span> <span class="hljs-attr">v-highlight</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-title"</span> <span class="hljs-attr">v-text</span>=<span class="hljs-string">"Blog.title"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
	<span class="hljs-comment">&lt;!-- 用&lt;mavon-editor&gt;标签显示文章内容 --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">mavon-editor</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"Blog.html"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding:20px"</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">mavon-editor</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
  <span class="hljs-comment">// 导入组件 及 组件样式</span>
  <span class="hljs-keyword">import</span> {mavonEditor} <span class="hljs-keyword">from</span> <span class="hljs-string">'mavon-editor'</span>
  <span class="hljs-keyword">import</span> <span class="hljs-string">'mavon-editor/dist/css/index.css'</span>

  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">components</span>: {
      mavonEditor,
    },
    data () {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-title class_">Blog</span>:<span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      <span class="hljs-keyword">async</span> <span class="hljs-title function_">getBlog</span>(<span class="hljs-params"></span>){
        <span class="hljs-keyword">var</span> <span class="hljs-variable constant_">NO</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$route</span>.<span class="hljs-property">params</span>.<span class="hljs-property">nO</span>;
        <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">$axios</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'/getBlog/'</span>+<span class="hljs-variable constant_">NO</span>)
	<span class="hljs-comment">//将返回的数据赋值给Blog</span>
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">Blog</span> = res.<span class="hljs-property">data</span>
      }
    },
    <span class="hljs-title function_">created</span>(<span class="hljs-params"></span>){
      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getBlog</span>()
    }
  }

</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></div></pre>

这是我在change事件中进行的渲染,这样导致我不能使用@click或其他的vue框架的事件,只能使用onclick,有没有一种方法可以在源码级别修改,最好能够在渲染时使用v-if和@click等vue所定义的

IamException avatar Mar 05 '23 09:03 IamException

没有太理解你说的场景，如果你是说有部分代码被过滤了，可以尝试关闭xssOptions

ygj6 avatar Mar 14 '23 02:03 ygj6