首页
话题
消息
手册
我的
返回介绍

HTML5 formats example

发布于 2019-05-06 字数7266 浏览 745 评论 0

This example shows you how to edit HTML5 content such as sections and articles.

TinyMCE HTML JS Edit on CodePen


<textarea id="format-hmtl5">
  <section>Section
    <p>Paragraph</p>
  </section>
  <article>Article
    <p>Paragraph</p>
  </article>
  <blockquote>Blockquote
    <p>Paragraph</p>
  </blockquote>
  <aside>Section
    <p>Paragraph</p>
  </aside>
  <figure>Figure
    <figcaption>Figcaption</figcaption>
  </figure>
</textarea>



tinymce.init({
  selector: 'textarea#format-hmtl5',
  height: 500,
  plugins: 'visualblocks',
    content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
  style_formats: [
    { title: 'Headers', items: [
      { title: 'h1', block: 'h1' },
      { title: 'h2', block: 'h2' },
      { title: 'h3', block: 'h3' },
      { title: 'h4', block: 'h4' },
      { title: 'h5', block: 'h5' },
      { title: 'h6', block: 'h6' }
    ] },

    { title: 'Blocks', items: [
      { title: 'p', block: 'p' },
      { title: 'div', block: 'div' },
      { title: 'pre', block: 'pre' }
    ] },

    { title: 'Containers', items: [
      { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
      { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
      { title: 'blockquote', block: 'blockquote', wrapper: true },
      { title: 'hgroup', block: 'hgroup', wrapper: true },
      { title: 'aside', block: 'aside', wrapper: true },
      { title: 'figure', block: 'figure', wrapper: true }
    ] }
  ],
  visualblocks_default_state: true,
  end_container_on_empty_block: true
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { tinymce.init({ selector: ‘textarea#format-hmtl5’, height: 500, plugins: ‘visualblocks’, content_css: [ ‘//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’, ‘//www.tiny.cloud/css/codepen.min.css’ ], style_formats: [ { title: ‘Headers’, items: [ { title: ‘h1’, block: ‘h1’ }, { title: ‘h2’, block: ‘h2’ }, { title: ‘h3’, block: ‘h3’ }, { title: ‘h4’, block: ‘h4’ }, { title: ‘h5’, block: ‘h5’ }, { title: ‘h6’, block: ‘h6’ } ] }, { title: ‘Blocks’, items: [ { title: ‘p’, block: ‘p’ }, { title: ‘div’, block: ‘div’ }, { title: ‘pre’, block: ‘pre’ } ] }, { title: ‘Containers’, items: [ { title: ‘section’, block: ‘section’, wrapper: true, merge_siblings: false }, { title: ‘article’, block: ‘article’, wrapper: true, merge_siblings: false }, { title: ‘blockquote’, block: ‘blockquote’, wrapper: true }, { title: ‘hgroup’, block: ‘hgroup’, wrapper: true }, { title: ‘aside’, block: ‘aside’, wrapper: true }, { title: ‘figure’, block: ‘figure’, wrapper: true } ] } ], visualblocks_default_state: true, end_container_on_empty_block: true }); })(); (function() { /* TODO: more js, less jekyll */ var id = “format-html5”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22format-hmtl5%22%3E%0A%20%20%3Csection%3ESection%0A%20%20%20%20%3Cp%3EParagraph%3C/p%3E%0A%20%20%3C/section%3E%0A%20%20%3Carticle%3EArticle%0A%20%20%20%20%3Cp%3EParagraph%3C/p%3E%0A%20%20%3C/article%3E%0A%20%20%3Cblockquote%3EBlockquote%0A%20%20%20%20%3Cp%3EParagraph%3C/p%3E%0A%20%20%3C/blockquote%3E%0A%20%20%3Caside%3ESection%0A%20%20%20%20%3Cp%3EParagraph%3C/p%3E%0A%20%20%3C/aside%3E%0A%20%20%3Cfigure%3EFigure%0A%20%20%20%20%3Cfigcaption%3EFigcaption%3C/figcaption%3E%0A%20%20%3C/figure%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#format-hmtl5′,%0A%20%20height:%20500,%0A%20%20plugins:%20’visualblocks’,%0A%20%20%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20],%0A%20%20style_formats:%20[%0A%20%20%20%20%7B%20title:%20’Headers’,%20items:%20[%0A%20%20%20%20%20%20%7B%20title:%20’h1′,%20block:%20’h1’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’h2′,%20block:%20’h2’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’h3′,%20block:%20’h3’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’h4′,%20block:%20’h4’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’h5′,%20block:%20’h5’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’h6′,%20block:%20’h6’%20%7D%0A%20%20%20%20]%20%7D,%0A%0A%20%20%20%20%7B%20title:%20’Blocks’,%20items:%20[%0A%20%20%20%20%20%20%7B%20title:%20’p’,%20block:%20’p’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’div’,%20block:%20’div’%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’pre’,%20block:%20’pre’%20%7D%0A%20%20%20%20]%20%7D,%0A%0A%20%20%20%20%7B%20title:%20’Containers’,%20items:%20[%0A%20%20%20%20%20%20%7B%20title:%20’section’,%20block:%20’section’,%20wrapper:%20true,%20merge_siblings:%20false%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’article’,%20block:%20’article’,%20wrapper:%20true,%20merge_siblings:%20false%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’blockquote’,%20block:%20’blockquote’,%20wrapper:%20true%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’hgroup’,%20block:%20’hgroup’,%20wrapper:%20true%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’aside’,%20block:%20’aside’,%20wrapper:%20true%20%7D,%0A%20%20%20%20%20%20%7B%20title:%20’figure’,%20block:%20’figure’,%20wrapper:%20true%20%7D%0A%20%20%20%20]%20%7D%0A%20%20],%0A%20%20visualblocks_default_state:%20true,%0A%20%20end_container_on_empty_block:%20true%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_format-html5”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!