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

Valid elements example

发布于 2019-05-06 字数9985 浏览 908 评论 0

This example shows you how to use the extended_valid_elements option. This option enables you to specify valid elements and attributes.

TinyMCE HTML JS Edit on CodePen


<textarea id="valid-elements">
  <p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
  <p>
    Please try out the features provided in this example. Check out the next paragraph's HTML.
    You'll see html tags not rendered in the editor's WYSIWYG output. Next, play with the
    Codepen JS to see what you can change in the editor.
  </p>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a href="//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 style="text-align: center;">
    <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#valid-elements',
  height: 500,
  extended_valid_elements: 'img[class=myclass|!src|border:0|alt|title|width|height|style]',
  invalid_elements: 'strong,b,em,i',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});

(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#valid-elements’, height: 500, extended_valid_elements: ‘img[class=myclass|!src|border:0|alt|title|width|height|style]’, invalid_elements: ‘strong,b,em,i’, content_css: [ ‘//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’, ‘//www.tiny.cloud/css/codepen.min.css’ ] }); })(); (function() { /* TODO: more js, less jekyll */ var id = “valid-elements”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22valid-elements%22%3E%0A%20%20%3Cp%20style=%22text-align:%20center;%20font-size:%2015px;%22%3E%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%20%20%3Ch2%20style=%22text-align:%20center;%22%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%20example.%20Check%20out%20the%20next%20paragraph’s%20HTML.%0A%20%20%20%20You’ll%20see%20html%20tags%20not%20rendered%20in%20the%20editor’s%20WYSIWYG%20output.%20Next,%20play%20with%20the%0A%20%20%20%20Codepen%20JS%20to%20see%20what%20you%20can%20change%20in%20the%20editor.%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=%22//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%20style=%22text-align:%20center;%22%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%3EIf%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.%3C/p%3E%0A%0A%20%20%3Ch2%3EFinally%20…%3C/h2%3E%0A%20%20%3Cp%3EDon’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.%3C/p%3E%0A%20%20%3Cp%3EThanks%20for%20supporting%20TinyMCE!%20We%20hope%20it%20helps%20you%20and%20your%20users%20create%20great%20content.%3Cbr%3EAll%20the%20best%20from%20the%20TinyMCE%20team.%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#valid-elements’,%0A%20%20height:%20500,%0A%20%20extended_valid_elements:%20’img[class=myclass%7C!src%7Cborder:0%7Calt%7Ctitle%7Cwidth%7Cheight%7Cstyle]’,%0A%20%20invalid_elements:%20’strong,b,em,i’,%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%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_valid-elements”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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