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

Live example

发布于 2019-05-06 字数3610 浏览 841 评论 0

Live example

In this example we highlight new features in our latest release, including the image caption option, media embeds and code snippets. For more information on the latest updates to TinyMCE, see the changelog.

TinyMCE HTML JS Edit on CodePen

<textarea id="whats-new"><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 Cloud demo!</h2>
  <h5 style="text-align: center;">Note, this includes some "enterprise/premium" features.<br>Visit the <a external-link="true" href="https://www.tiny.cloud/pricing/#demo-enterprise">pricing page</a> to learn more about our premium plugins.</h5>

  <h2>Notable Features</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.tiny.cloud">TinyMCE 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/docs/enterprise/tinydrive/">Tiny Drive</a></td>
        <td>Image and file manager add-on for TinyMCE.</td>
      </tr>
    </tbody>
  </table>

  <h2>Get involved</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 repository</a> to report it to the developers.</p>

  <h2>Finally ...</h2>
  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.</p>
  <p><a external-link="true" href="https://www.tiny.cloud/">Get started today!</a></p>
</textarea>



tinymce.init({
  selector: 'textarea#whats-new',
  height: 550,
  plugins: 'print preview fullpage powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount a11ychecker imagetools colorpicker textpattern help',
  toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent | removeformat',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
  content_style: [
    'body{max-width:700px; padding:30px; margin:auto;font-size:16px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif; line-height:1.3; letter-spacing: -0.03em;color:#222} h1,h2,h3,h4,h5,h6 {font-weight:400;margin-top:1.2em} h1 {} h2{} .tiny-table {width:100%; border-collapse: collapse;} .tiny-table td, th {border: 1px solid #555D66; padding:10px; text-align:left;font-size:16px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif; line-height:1.6;} .tiny-table th {background-color:#E2E4E7}'
  ],
  visual_table_class: 'tiny-table'
 });

您暂时不能评论!

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

还没有评论!

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