返回介绍

Comments 2-0 Demo

发布于 2019-05-06 字数10088 浏览 833 评论 0

Live example

This example displays how to add the ability to start or join a conversation by adding comments to the content within the TinyMCE editor.

In this example, the features in Comments 2.0 are highlighted, including adding a comment, replying to a comment, and deleting a comment.

For more information on the other Comments 2.0 configuration options, see the docs.

TinyMCE HTML JS Edit on CodePen


<div id="tiny-ui">
  <textarea class="editor" style="width: 100%; height: 300px;">
    <h2>Welcome to Tiny Comments!</h2>
    <p>Please try out this demo of our new Tiny Comments premium plugin.  Just highlight the content you want to add a comment to, click the Comment icon in the toolbar, type your comment into the text field at the bottom of the Comment sidebar, and click ‘Start’. Your comment is then attached to the text, <span class="mce-annotation" data-mce-annotation-uid="96pewyxd0h5" data-mce-annotation="tinycomments">exactly like this!</span></p>

    <p>If you want to take Tiny Comments for a test drive in your own environment, Tiny Comments is one of the premium plugins you can try for free for 30 days by signing up for a Tiny account. Make sure to check out our documentation as well.</p>

    <p>And if you are ready to buy, you can either purchase Tiny Comments a la carte or as part of your Tiny Pro subscription. If you are a current cloud user, Tiny Comments has already been added to your key, and if you are a self-hosted user, Tiny Comments is now available in the latest download which you can access in My Account.</p>

    <h2>A simple table to play with</h2>
    <table style="text-align: center;">
      <thead>
        <tr>
          <th>Product</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a external-link="true" href="https://www.tinymce.com">Tiny Cloud</a></td>
          <td>The easiest and most reliable way to integrate powerful rich text editing into your application.</td>
        </tr>
        <tr>
          <td><a external-link="true" href="https://www.tiny.cloud/tinydrive/">Tiny Drive</a></td>
          <td>Image and file management for TinyMCE in the cloud.</td>
        </tr>
      </tbody>
    </table>

    <p>Thanks for supporting TinyMCE! We hope it helps your users create great content.</p>
  </textarea>
</div>


tinymce.init({
  selector: '#tiny-ui .editor',
  toolbar: 'bold italic underline | addcomment',
  menubar: 'file edit view insert format tools tc',
  menu: {
    tc: {
      title: 'TinyComments',
      items: 'addcomment showcomments deleteallconversations'
    }
  },
  plugins: 'paste tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'Author'
});

(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: ‘#tiny-ui .editor’, toolbar: ‘bold italic underline | addcomment’, menubar: ‘file edit view insert format tools tc’, menu: { tc: { title: ‘TinyComments’, items: ‘addcomment showcomments deleteallconversations’ } }, plugins: ‘paste tinycomments’, tinycomments_mode: ’embedded’, tinycomments_author: ‘Author’ }); })(); (function() { /* TODO: more js, less jekyll */ var id = “comments-2”; var html = decodeURIComponent(“%0A%3Cdiv%20id=%22tiny-ui%22%3E%0A%20%20%3Ctextarea%20class=%22editor%22%20style=%22width:%20100%25;%20height:%20300px;%22%3E%0A%20%20%20%20%3Ch2%3EWelcome%20to%20Tiny%20Comments!%3C/h2%3E%0A%20%20%20%20%3Cp%3EPlease%20try%20out%20this%20demo%20of%20our%20new%20Tiny%20Comments%20premium%20plugin.%20%20Just%20highlight%20the%20content%20you%20want%20to%20add%20a%20comment%20to,%20click%20the%20Comment%20icon%20in%20the%20toolbar,%20type%20your%20comment%20into%20the%20text%20field%20at%20the%20bottom%20of%20the%20Comment%20sidebar,%20and%20click%20%E2%80%98Start%E2%80%99.%20Your%20comment%20is%20then%20attached%20to%20the%20text,%20%3Cspan%20class=%22mce-annotation%22%20data-mce-annotation-uid=%2296pewyxd0h5%22%20data-mce-annotation=%22tinycomments%22%3Eexactly%20like%20this!%3C/span%3E%3C/p%3E%0A%0A%20%20%20%20%3Cp%3EIf%20you%20want%20to%20take%20Tiny%20Comments%20for%20a%20test%20drive%20in%20your%20own%20environment,%20Tiny%20Comments%20is%20one%20of%20the%20premium%20plugins%20you%20can%20try%20for%20free%20for%2030%20days%20by%20signing%20up%20for%20a%20Tiny%20account.%20Make%20sure%20to%20check%20out%20our%20documentation%20as%20well.%3C/p%3E%0A%0A%20%20%20%20%3Cp%3EAnd%20if%20you%20are%20ready%20to%20buy,%20you%20can%20either%20purchase%20Tiny%20Comments%20a%20la%20carte%20or%20as%20part%20of%20your%20Tiny%20Pro%20subscription.%20If%20you%20are%20a%20current%20cloud%20user,%20Tiny%20Comments%20has%20already%20been%20added%20to%20your%20key,%20and%20if%20you%20are%20a%20self-hosted%20user,%20Tiny%20Comments%20is%20now%20available%20in%20the%20latest%20download%20which%20you%20can%20access%20in%20My%20Account.%3C/p%3E%0A%0A%20%20%20%20%3Ch2%3EA%20simple%20table%20to%20play%20with%3C/h2%3E%0A%20%20%20%20%3Ctable%20style=%22text-align:%20center;%22%3E%0A%20%20%20%20%20%20%3Cthead%3E%0A%20%20%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cth%3EProduct%3C/th%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cth%3EValue%3C/th%3E%0A%20%20%20%20%20%20%20%20%3C/tr%3E%0A%20%20%20%20%20%20%3C/thead%3E%0A%20%20%20%20%20%20%3Ctbody%3E%0A%20%20%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctd%3E%3Ca%20href=%22https://www.tinymce.com%22%3ETiny%20Cloud%3C/a%3E%3C/td%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctd%3EThe%20easiest%20and%20most%20reliable%20way%20to%20integrate%20powerful%20rich%20text%20editing%20into%20your%20application.%3C/td%3E%0A%20%20%20%20%20%20%20%20%3C/tr%3E%0A%20%20%20%20%20%20%20%20%3Ctr%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctd%3E%3Ca%20href=%22https://www.tiny.cloud/tinydrive/%22%3ETiny%20Drive%3C/a%3E%3C/td%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctd%3EImage%20and%20file%20management%20for%20TinyMCE%20in%20the%20cloud.%3C/td%3E%0A%20%20%20%20%20%20%20%20%3C/tr%3E%0A%20%20%20%20%20%20%3C/tbody%3E%0A%20%20%20%20%3C/table%3E%0A%0A%20%20%20%20%3Cp%3EThanks%20for%20supporting%20TinyMCE!%20We%20hope%20it%20helps%20your%20users%20create%20great%20content.%3C/p%3E%0A%20%20%3C/textarea%3E%0A%3C/div%3E%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’#tiny-ui%20.editor’,%0A%20%20toolbar:%20’bold%20italic%20underline%20%7C%20addcomment’,%0A%20%20menubar:%20’file%20edit%20view%20insert%20format%20tools%20tc’,%0A%20%20menu:%20%7B%0A%20%20%20%20tc:%20%7B%0A%20%20%20%20%20%20title:%20’TinyComments’,%0A%20%20%20%20%20%20items:%20’addcomment%20showcomments%20deleteallconversations’%0A%20%20%20%20%7D%0A%20%20%7D,%0A%20%20plugins:%20’paste%20tinycomments’,%0A%20%20tinycomments_mode:%20’embedded’,%0A%20%20tinycomments_author:%20’Author’%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_comments-2”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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