Link copied!

Preview Editor Examples

<link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/services/vce.css">
<script src="https://client-version.cf.emarsys.net/vce-preview/latest/scripts/vce-preview.js"></script>

<div
  style={{ flex: '1 1 5%' }}
  className="e-fullheight__content e-fullheight__content-6 e-fullheight__content-box"
>
  <div className="e-fullheight__header">
    <h2>Edit Html Source</h2>
  </div>
  <div className="e-fullheight__body">
    <Buttons />
  </div>
</div>
<div className="e-fullheight__content e-fullheight__content-6 e-fullheight__content-box">
  <div className="e-fullheight__header" />
  <div className="e-contentblocks-preview">
    <vce-preview
      id="preview"
      content="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu condimentum elit, nec mattis justo. In varius nisi mauris, et rhoncus elit consequat eget. Praesent sed quam purus. Aliquam ex justo, accumsan in nulla ut, placerat ornare turpis. Cras fringilla bibendum mi sodales molestie. Curabitur augue nisl, placerat sed imperdiet vitae, tristique eget ipsum. Cras et ante nec felis dapibus viverra sit amet sit amet tellus. Nullam sagittis nunc risus. Praesent suscipit metus tortor. Cras sodales ipsum diam, commodo condimentum lorem semper vel. Maecenas eget semper eros.
      </p>"
      iframe-width="100%"
      extra-class="e-contentblocks-preview__iframe e-contentblocks-preview__iframe-desktop"
    >
      <vce-plugin-personalization editable-text-plugin />
    </vce-preview>
  </div>