Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p>This is the "block-editor-vue" demo page. For more information, see <a href="https://github.com/takitakit/block-editor-vue" target="_blank">Github.</a></p>
<div class="contents">
  <div id="editor"></div>
  <div id="source">
    <h3>Output source (realtime)</h3>
    <pre></pre>
  <div>
</div>
              
            
!

CSS

              
                .contents {
  display: flex;
  
  & > div {
    flex: 1;
    box-sizing: border-box;
  }
  #source {
    padding: 0 0 0 1rem;
    pre {
      white-space: pre-wrap;
      font-size: 1.2rem;
    }
  }
}

@media screen and (max-width:600px) { 
  .contents {
    display: block; 
    
    & > div {
      width: 100%;
    }
  }
}

// inline text style
.ve-red {
  color: #f44;
}
.ve-bold {
  font-weight: bold;
}
              
            
!

JS

              
                const source = document.querySelector('#source pre')
console.log(source)

const defaultItems = [
  {
    name: 'Heading',
    level: 'h3',
    content: 'Here is a demo page of <span class="ve-bold">block-editor-vue</span>.'
  },
  {
    name: 'Paragraph',
    content: '"<a href="https://github.com/takitakit/block-editor-vue" target="_blank">block-editor-vue</a>" is a block editor that allows you to stack any combination of block elements, such as paragraphs, headings, lists, and so on.<br>If you are using the CMS management screen, you can use this editor as a means of editing the body HTML of an article.'
  },
  {
    name: 'Heading',
    level: 'h4',
    content: 'Features'
  },
  {
    name: 'List',
    type: 'unordered',
    rows: [
      {content: 'Supported block elements can be added in any order'},
      {content: 'CSS class name can be set per block element'},
      {content: 'Multiple column layouts are supported'},
      {content: 'Block elements can be duplicated, rearranged, and deleted'},
      {content: 'Undo and redo are supported'},
      {content: 'HTML markup available in real time'},
      {content: 'Each block element supports a predefined combination of class names and other settings (predefined sets, optional).'},
      {content: 'The inline editor supports the setting of inline styles (optional)'}
    ]
  },
  {
    name: 'Heading',
    level: 'h4',
    content: 'Supported elements'
  },
  {
    name: 'Table',
    colgroup: [
      {width: 25},
      {width: 75}
    ],
    rows: [
      {cells: [
        {content: 'element', header: true},
        {content: 'description', header: true}
      ]},
      {cells: [
        {content: 'Paragraph'},
        {content: 'Text and images can be inserted.'}
      ]},
      {cells: [
        {content: 'Heading'},
        { content: 'You can specify the heading level from H1 to H6.' }
      ]},
      {cells: [
        {content: 'List'},
        {content: 'You can specify an unordered list(UL) or an ordered list(OL).'}
      ]},
      {cells: [
        {content: 'Table'},
        {content: 'You can add table headings(THEAD) and table body(TBODY), merge cells, split cells, and resize cell widths.'}
      ]},
      {cells: [
        {content: 'Column'},
        {content: 'You can nest other elements, such as paragraphs and headings, in an inserted column.'}
      ]},
      {cells: [
        {content: 'HTML'},
        {content: 'You can enter any HTML markup, including embedded tags for YouTube and Google Maps.'}
      ]}
    ]
  }
]

// launch editor
const instance = new BlockEditor('#editor', {
  items: defaultItems,
  allowStyledText: true,
  styledTextClasses: ['link', 'bold', 'red'],
  onLoad: (html) => {
    updateSource(html)
  },
  onUpdate: (html) => {
    updateSource(html)
    console.log(instance.getItems())
  },
  outputIndent: '   ',
})

function updateSource (html) {
  source.innerText = html
}

              
            
!
999px

Console