Link copied!

HTML Editor Examples

<vce-html-editor
  html="<h1>Title Here</h1>
  <h2>Some things to keep in mind</h2>
  <ul>
    <li>Show up on time</li>
    <li>Get your work done</li>
    <li>Take notes</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate pretium interdum. Etiam eget ultricies ex. Nunc vehicula convallis massa.</p>"
  mode="htmlmixed"
  line-numbers
  line-wrapping
  lint
/>
<vce-html-editor
  html="<p>The disabled attribute is set so this text cannot be changed.  In the above example, the disabled attribute is not set and the text can be changed.</p>"
  mode="htmlmixed"
  line-numbers="true"
  disabled
  line-wrapping
  lint
/>
<vce-html-editor
  html=""
  placeholder="<p>This is placholder text that is replaced when the user starts typing new text.</p>"
  mode="htmlmixed"
  line-numbers
  line-wrapping
  lint
/>
<vce-html-editor
  html="<p>This is the HTML Editor with the single-line attribute set resulting in a single line with no horizontal scrollbar. The arrow keys may be used to show hidden text at the end of the line. Home/End and Page Up/Page Down keys can also be used.</p>"
  mode="htmlmixed"
  line-numbers
  single-line
/>
<vce-html-editor
  html="<p>This is the HTML Editor with the single-line and line-wrapping attributes set resulting in a single line that wraps and looks similar to a text area element. Pressing Enter does not result in another line being added.</p>"
  mode="htmlmixed"
  line-numbers
  single-line
  line-wrapping
/>
<vce-html-editor
  html="body {
  margin: 0;
  padding: 3em 6em;
  font-family: tahoma, arial, sans-serif;
  color: #000;
}"
  mode="text/css"
  line-numbers
  translations="{&quot;title&quot;:&quot;title&quot;,&quot;lead&quot;:&quot;lead&quot;,&quot;learnMore&quot;:&quot;learn more&quot;,&quot;learn more link&quot;:&quot;learn more link&quot;}"
/>