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

Custom formats example

发布于 2019-05-06 字数14887 浏览 653 评论 0

This example shows you how to override the built in formats and add some custom styles to the styleselect dropdown toolbar button and the formats menu item using the style_formats configuration option.

TinyMCE HTML JS Edit on CodePen


<textarea id="format-custom">
  <p>
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>

  <h2>Welcome to the TinyMCE editor demo!</h2>
  <p>
    Please try out the features provided in this custom formats example.
  </p>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a external-link="true" href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Visit the <a external-link="true" href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
    <li>We also offer enterprise grade support as part of <a external-link="true" href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TinyMCE</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
      <tr>
        <td>Plupload</td>
        <td>Free</td>
        <td>YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>
  <p>
    If you think you have found a bug please create an issue on the <a external-link="true" href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>
  <p>
    Don't forget to check out our other product <a external-link="true" href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>



tinymce.init({
  selector: 'textarea#format-custom',
  height: 500,
  plugins: 'table wordcount',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
  formats: {
    alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
    aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
    alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
    alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
    bold: { inline: 'span', 'classes': 'bold' },
    italic: { inline: 'span', 'classes': 'italic' },
    underline: { inline: 'span', 'classes': 'underline', exact: true },
    strikethrough: { inline: 'del' },
    customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format' }, classes: 'example1' }
  },
  style_formats: [
    { title: 'Custom format', format: 'customformat' },
    { title: 'Align left', format: 'alignleft' },
    { title: 'Align center', format: 'aligncenter' },
    { title: 'Align right', format: 'alignright' },
    { title: 'Align full', format: 'alignfull' },
    { title: 'Bold text', inline: 'strong' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
    { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
    { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
    { title: 'Image formats' },
    { title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
    { title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
  ]
});

(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-custom’, height: 500, plugins: ‘table wordcount’, content_css: [ ‘//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’, ‘//www.tiny.cloud/css/codepen.min.css’ ], formats: { alignleft: { selector: ‘p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’, classes: ‘left’ }, aligncenter: { selector: ‘p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’, classes: ‘center’ }, alignright: { selector: ‘p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’, classes: ‘right’ }, alignfull: { selector: ‘p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’, classes: ‘full’ }, bold: { inline: ‘span’, ‘classes’: ‘bold’ }, italic: { inline: ‘span’, ‘classes’: ‘italic’ }, underline: { inline: ‘span’, ‘classes’: ‘underline’, exact: true }, strikethrough: { inline: ‘del’ }, customformat: { inline: ‘span’, styles: { color: ‘#00ff00′, fontSize: ’20px’ }, attributes: { title: ‘My custom format’ }, classes: ‘example1’ } }, style_formats: [ { title: ‘Custom format’, format: ‘customformat’ }, { title: ‘Align left’, format: ‘alignleft’ }, { title: ‘Align center’, format: ‘aligncenter’ }, { title: ‘Align right’, format: ‘alignright’ }, { title: ‘Align full’, format: ‘alignfull’ }, { title: ‘Bold text’, inline: ‘strong’ }, { title: ‘Red text’, inline: ‘span’, styles: { color: ‘#ff0000’ } }, { title: ‘Red header’, block: ‘h1’, styles: { color: ‘#ff0000’ } }, { title: ‘Badge’, inline: ‘span’, styles: { display: ‘inline-block’, border: ‘1px solid #2276d2’, ‘border-radius’: ‘5px’, padding: ‘2px 5px’, margin: ‘0 2px’, color: ‘#2276d2’ } }, { title: ‘Table row 1’, selector: ‘tr’, classes: ‘tablerow1’ }, { title: ‘Image formats’ }, { title: ‘Image Left’, selector: ‘img’, styles: { ‘float’: ‘left’, ‘margin’: ‘0 10px 0 10px’ } }, { title: ‘Image Right’, selector: ‘img’, styles: { ‘float’: ‘right’, ‘margin’: ‘0 0 10px 10px’ } }, ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “format-custom”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22format-custom%22%3E%0A%20%20%3Cp%3E%0A%20%20%20%20%3Cimg%20title=%22TinyMCE%20Logo%22%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%22110%22%20height=%2297%22%20/%3E%0A%20%20%3C/p%3E%0A%0A%20%20%3Ch2%3EWelcome%20to%20the%20TinyMCE%20editor%20demo!%3C/h2%3E%0A%20%20%3Cp%3E%0A%20%20%20%20Please%20try%20out%20the%20features%20provided%20in%20this%20custom%20formats%20example.%0A%20%20%3C/p%3E%0A%0A%20%20%3Ch2%3EGot%20questions%20or%20need%20help?%3C/h2%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EOur%20%3Ca%20href=%22https://www.tiny.cloud/docs/%22%3Edocumentation%3C/a%3E%20is%20a%20great%20resource%20for%20learning%20how%20to%20configure%20TinyMCE.%3C/li%3E%0A%20%20%20%20%3Cli%3EHave%20a%20specific%20question?%20Visit%20the%20%3Ca%20href=%22https://community.tinymce.com/forum/%22%3ECommunity%20Forum%3C/a%3E.%3C/li%3E%0A%20%20%20%20%3Cli%3EWe%20also%20offer%20enterprise%20grade%20support%20as%20part%20of%20%3Ca%20href=%22https://www.tiny.cloud/pricing%22%3ETinyMCE%20Enterprise%3C/a%3E.%3C/li%3E%0A%20%20%3C/ul%3E%0A%0A%20%20%3Ch2%3EA%20simple%20table%20to%20play%20with%3C/h2%3E%0A%20%20%3Ctable%3E%0A%20%20%20%20%3Cthead%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Cth%3EProduct%3C/th%3E%0A%20%20%20%20%20%20%20%20%3Cth%3ECost%3C/th%3E%0A%20%20%20%20%20%20%20%20%3Cth%3EReally?%3C/th%3E%0A%20%20%20%20%20%20%3C/tr%3E%0A%20%20%20%20%3C/thead%3E%0A%20%20%20%20%3Ctbody%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3ETinyMCE%3C/td%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3EFree%3C/td%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3EYES!%3C/td%3E%0A%20%20%20%20%20%20%3C/tr%3E%0A%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3EPlupload%3C/td%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3EFree%3C/td%3E%0A%20%20%20%20%20%20%20%20%3Ctd%3EYES!%3C/td%3E%0A%20%20%20%20%20%20%3C/tr%3E%0A%20%20%20%20%3C/tbody%3E%0A%20%20%3C/table%3E%0A%0A%20%20%3Ch2%3EFound%20a%20bug?%3C/h2%3E%0A%20%20%3Cp%3E%0A%20%20%20%20If%20you%20think%20you%20have%20found%20a%20bug%20please%20create%20an%20issue%20on%20the%20%3Ca%20href=%22https://github.com/tinymce/tinymce/issues%22%3EGitHub%20repo%3C/a%3E%20to%20report%20it%20to%20the%20developers.%0A%20%20%3C/p%3E%0A%0A%20%20%3Ch2%3EFinally%20…%3C/h2%3E%0A%20%20%3Cp%3E%0A%20%20%20%20Don’t%20forget%20to%20check%20out%20our%20other%20product%20%3Ca%20href=%22http://www.plupload.com%22%20target=%22_blank%22%3EPlupload%3C/a%3E,%20your%20ultimate%20upload%20solution%20featuring%20HTML5%20upload%20support.%0A%20%20%3C/p%3E%0A%20%20%3Cp%3E%0A%20%20%20%20Thanks%20for%20supporting%20TinyMCE!%20We%20hope%20it%20helps%20you%20and%20your%20users%20create%20great%20content.%3Cbr%3EAll%20the%20best%20from%20the%20TinyMCE%20team.%0A%20%20%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#format-custom’,%0A%20%20height:%20500,%0A%20%20plugins:%20’table%20wordcount’,%0A%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%20formats:%20%7B%0A%20%20%20%20alignleft:%20%7B%20selector:%20’p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’,%20classes:%20’left’%20%7D,%0A%20%20%20%20aligncenter:%20%7B%20selector:%20’p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’,%20classes:%20’center’%20%7D,%0A%20%20%20%20alignright:%20%7B%20selector:%20’p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’,%20classes:%20’right’%20%7D,%0A%20%20%20%20alignfull:%20%7B%20selector:%20’p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img’,%20classes:%20’full’%20%7D,%0A%20%20%20%20bold:%20%7B%20inline:%20’span’,%20’classes’:%20’bold’%20%7D,%0A%20%20%20%20italic:%20%7B%20inline:%20’span’,%20’classes’:%20’italic’%20%7D,%0A%20%20%20%20underline:%20%7B%20inline:%20’span’,%20’classes’:%20’underline’,%20exact:%20true%20%7D,%0A%20%20%20%20strikethrough:%20%7B%20inline:%20’del’%20%7D,%0A%20%20%20%20customformat:%20%7B%20inline:%20’span’,%20styles:%20%7B%20color:%20’#00ff00′,%20fontSize:%20’20px’%20%7D,%20attributes:%20%7B%20title:%20’My%20custom%20format’%20%7D,%20classes:%20’example1’%20%7D%0A%20%20%7D,%0A%20%20style_formats:%20[%0A%20%20%20%20%7B%20title:%20’Custom%20format’,%20format:%20’customformat’%20%7D,%0A%20%20%20%20%7B%20title:%20’Align%20left’,%20format:%20’alignleft’%20%7D,%0A%20%20%20%20%7B%20title:%20’Align%20center’,%20format:%20’aligncenter’%20%7D,%0A%20%20%20%20%7B%20title:%20’Align%20right’,%20format:%20’alignright’%20%7D,%0A%20%20%20%20%7B%20title:%20’Align%20full’,%20format:%20’alignfull’%20%7D,%0A%20%20%20%20%7B%20title:%20’Bold%20text’,%20inline:%20’strong’%20%7D,%0A%20%20%20%20%7B%20title:%20’Red%20text’,%20inline:%20’span’,%20styles:%20%7B%20color:%20’#ff0000’%20%7D%20%7D,%0A%20%20%20%20%7B%20title:%20’Red%20header’,%20block:%20’h1′,%20styles:%20%7B%20color:%20’#ff0000’%20%7D%20%7D,%0A%20%20%20%20%7B%20title:%20’Badge’,%20inline:%20’span’,%20styles:%20%7B%20display:%20’inline-block’,%20border:%20’1px%20solid%20#2276d2′,%20’border-radius’:%20’5px’,%20padding:%20’2px%205px’,%20margin:%20’0%202px’,%20color:%20’#2276d2’%20%7D%20%7D,%0A%20%20%20%20%7B%20title:%20’Table%20row%201′,%20selector:%20’tr’,%20classes:%20’tablerow1’%20%7D,%0A%20%20%20%20%7B%20title:%20’Image%20formats’%20%7D,%0A%20%20%20%20%7B%20title:%20’Image%20Left’,%20selector:%20’img’,%20styles:%20%7B%20’float’:%20’left’,%20’margin’:%20’0%2010px%200%2010px’%20%7D%20%7D,%0A%20%20%20%20%7B%20title:%20’Image%20Right’,%20selector:%20’img’,%20styles:%20%7B%20’float’:%20’right’,%20’margin’:%20’0%200%2010px%2010px’%20%7D%20%7D,%0A%20%20]%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-custom”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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