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

Checklist plugin

发布于 2019-05-06 字数15505 浏览 815 评论 0

Live example

This example shows how to use the Checklist plugin to add interactive checklists to your content. For more information on the Checklist plugin, see the docs.

TinyMCE HTML CSS JS Edit on CodePen .tox-checklist > li:not(.tox-checklist–hidden) { list-style: none; margin: .25em 0; position: relative; } .tox-checklist > li:not(.tox-checklist–hidden)::before { background-image: url(“data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A”); background-size: 100%; content: ”; cursor: pointer; height: 1em; left: -1.5em; position: absolute; top: .125em; width: 1em; } .tox-checklist li:not(.tox-checklist–hidden).tox-checklist–checked::before { background-image: url(“data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A”); }


<textarea id="checklist">
  <p style="text-align: center;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>

  <h1 style="text-align: center;">Welcome to Checklist!</h1>

  <p>
    Please try out this demo of our new <b>Checklist</b> premium plugin plugin that adds interactive checklists to your content.<br>
    Note that he Checklist Plugin has to be used together with the <a external-link="true" href="https://www.tiny.cloud/docs/plugins/lists/">Lists</a> plugin to work.
  </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/" target="_blank">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>



.tox-checklist > li:not(.tox-checklist--hidden) {
  list-style: none;
  margin: .25em 0;
  position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  background-size: 100%;
  content: '';
  cursor: pointer;
  height: 1em;
  left: -1.5em;
  position: absolute;
  top: .125em;
  width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}


tinymce.init({
  selector: "textarea#checklist",
  plugins: "lists checklist",
  toolbar: "checklist",
  height: "600px",
});


(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#checklist”, plugins: “lists checklist”, toolbar: “checklist”, height: “600px”, }); })(); (function() { /* TODO: more js, less jekyll */ var id = “checklist”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22checklist%22%3E%0A%20%20%3Cp%20style=%22text-align:%20center;%22%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%3Ch1%20style=%22text-align:%20center;%22%3EWelcome%20to%20Checklist!%3C/h1%3E%0A%0A%20%20%3Cp%3E%0A%20%20%20%20Please%20try%20out%20this%20demo%20of%20our%20new%20%3Cb%3EChecklist%3C/b%3E%20premium%20plugin%20plugin%20that%20adds%20interactive%20checklists%20to%20your%20content.%3Cbr%3E%0A%20%20%20%20Note%20that%20he%20Checklist%20Plugin%20has%20to%20be%20used%20together%20with%20the%20%3Ca%20href=%22https://www.tiny.cloud/docs/plugins/lists/%22%3ELists%3C/a%3E%20plugin%20to%20work.%0A%20%20%3C/p%3E%0A%0A%20%20%3Ch2%3EGot%20questions%20or%20need%20help?%3C/h2%3E%0A%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%20target=%22_blank%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%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%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%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%22textarea#checklist%22,%0A%20%20plugins:%20%22lists%20checklist%22,%0A%20%20toolbar:%20%22checklist%22,%0A%20%20height:%20%22600px%22,%0A%7D);%0A%0A”); var css = decodeURIComponent(“%0A.tox-checklist%20%3E%20li:not(.tox-checklist–hidden)%20%7B%0A%20%20list-style:%20none;%0A%20%20margin:%20.25em%200;%0A%20%20position:%20relative;%0A%7D%0A.tox-checklist%20%3E%20li:not(.tox-checklist–hidden)::before%20%7B%0A%20%20background-image:%20url(%22data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Cg%20id=%22checklist-unchecked%22%20fill=%22none%22%20fill-rule=%22evenodd%22%3E%3Crect%20id=%22Rectangle%22%20width=%2215%22%20height=%2215%22%20x=%22.5%22%20y=%22.5%22%20fill-rule=%22nonzero%22%20stroke=%22#4C4C4C%22%20rx=%222%22/%3E%3C/g%3E%3C/svg%3E%0A%22);%0A%20%20background-size:%20100%25;%0A%20%20content:%20”;%0A%20%20cursor:%20pointer;%0A%20%20height:%201em;%0A%20%20left:%20-1.5em;%0A%20%20position:%20absolute;%0A%20%20top:%20.125em;%0A%20%20width:%201em;%0A%7D%0A.tox-checklist%20li:not(.tox-checklist–hidden).tox-checklist–checked::before%20%7B%0A%20%20background-image:%20url(%22data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Cg%20id=%22checklist-checked%22%20fill=%22none%22%20fill-rule=%22evenodd%22%3E%3Crect%20id=%22Rectangle%22%20width=%2216%22%20height=%2216%22%20fill=%22#4099FF%22%20fill-rule=%22nonzero%22%20rx=%222%22/%3E%3Cpath%20id=%22Path%22%20fill=%22#FFF%22%20fill-rule=%22nonzero%22%20d=%22M11.5703186,3.14417309%20C11.8516238,2.73724603%2012.4164781,2.62829933%2012.83558,2.89774797%20C13.260121,3.17069355%2013.3759736,3.72932262%2013.0909105,4.14168582%20L7.7580587,11.8560195%20C7.43776896,12.3193404%206.76483983,12.3852142%206.35607322,11.9948725%20L3.02491697,8.8138662%20C2.66090143,8.46625845%202.65798871,7.89594698%203.01850234,7.54483354%20C3.373942,7.19866177%203.94940006,7.19592841%204.30829608,7.5386474%20L6.85276923,9.9684299%20L11.5703186,3.14417309%20Z%22/%3E%3C/g%3E%3C/svg%3E%0A%22);%0A%7D%0A”); var tabNames = [“run”,”html”,”css”,”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_checklist”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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