Inline editor example

优质

小牛编辑

129浏览

2023-12-01

This example shows you the inline editing capabilities of TinyMCE.

The world’s first rich text editor in the cloud

Have you heard about Tiny Cloud? It’s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They’re also ready for some exciting updates coming soon.

One of these enhancements is Tiny Drive: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at tiny.cloud/tinydrive, where you’ll find a working demo and an opportunity to provide feedback to the product team.

An editor for every project

Here are some of our customer’s most common use cases for TinyMCE:

Content Management Systems (e.g. WordPress, Umbraco)
Learning Management Systems (e.g. Blackboard)
Customer Relationship Management and marketing automation (e.g. Marketo)
Email marketing (e.g. Constant Contact)
Content creation in SaaS systems (e.g. Eventbrite, Evernote, GoFundMe, Zendesk)

And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there’s likely a solution for your editor project. If you haven’t experienced Tiny Cloud, get started today. You’ll even get a free trial of our premium plugins – no credit card required!

<table>
  <tbody>
    <tr>
      <td>
        <img src='https://www.tiny.cloud/images/email-banner-2.png' />
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td>
                <h2>The world’s first rich text editor in the cloud</h2>
                <div>
                  <p>
                    Have you heard about Tiny Cloud? 
                    It’s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 
                    50,000 developers already agree.
                    They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. 
                    They’re also ready for some exciting updates coming soon.
                  </p>
                  <p>
                    One of these enhancements is <strong>Tiny Drive</strong>: imagine file management for TinyMCE, in the cloud, made super easy. 
                    Learn more at <a href='https://www.tiny.cloud/tinydrive/'>tiny.cloud/tinydrive</a>, where you’ll find a working demo and an opportunity to provide feedback to the product team.
                  </p>
                </div>
              </td>
              <td>
                <img src='https://www.tiny.cloud/images/image-two.jpg'/>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <h3>An editor for every project</h3>
        <div>
          <p>
            Here are some of our customer’s most common use cases for TinyMCE:
          </p>
          <ul>
            <li>Content Management Systems (<em>e.g. WordPress, Umbraco</em>)</li>
            <li>Learning Management Systems (<em>e.g. Blackboard</em>)</li>
            <li>Customer Relationship Management and marketing automation (<em>e.g. Marketo</em>)</li>
            <li>Email marketing (<em>e.g. Constant Contact</em>)</li>
            <li>Content creation in SaaS systems (<em>e.g. Eventbrite, Evernote, GoFundMe, Zendesk</em>)</li>
          </ul>
        
          <p>
            And those use cases are just the start. 
            TinyMCE is incredibly flexible, and with hundreds of APIs there’s likely a solution for your editor project. 
            If you haven’t experienced Tiny Cloud, get started today. 
            You’ll even get a free trial of our premium plugins – no credit card required!
          </p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

.demo-inline {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: left;
  color: #626262;
  font-family: Lato;
  color: #626262;
  line-height: 1.3;
  font-size: 14px;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
}
.demo-inline p {
  margin: 0 0;
}
.demo-inline h1 {
  color: #1976d2;
  font-family: Aileron;
  font-size: 2em;
  font-weight: bold;
  margin: 0 0;
}
.demo-inline h2 {
  color: #1976d2;
  font-family: Aileron;
  font-size: 2em;
  font-weight: bold;
}
.demo-inline h3 {
  font-family: Aileron;
  font-size: 1.5em;
  color: #403f42;
  font-weight: bold;
  color: inherit;
}
.demo-inline h2,
.demo-inline h3 {
  margin-bottom: 0;
  margin-top: 0;
  line-height: 40px;
}
.demo-inline ul,
.demo-inline ol {
  padding-left: 20px;
}
.demo-inline ul {
  list-style: disc;
}
.demo-inline ol {
  list-style: decimal;
}
.demo-inline a {
  text-decoration: underline;
}
.demo-inline textarea {
  display: none;
}
.demo-inline .demo-inline-content {
  padding: 20px;
  text-align: left;
  vertical-align: top;
}
.demo-inline .demo-inline-content h3 {
  color: #626262;
}
.demo-inline *[contentEditable="true"]:focus,
.demo-inline *[contentEditable="true"]:hover {
  outline: 2px solid #2276d2;
}

var emailHeaderConfig = {
  selector: '.tinymce-heading',
  menubar: false,
  inline: true,
  plugins: [
    'textcolor',
    'lists',
    'powerpaste',
    'autolink'
  ],
  toolbar: 'undo redo | bold italic underline',
  valid_elements: 'strong,em,span[style],a[href]',
  valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
  },
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
  ]
};

var emailBodyConfig = {
  selector: '.tinymce-body',
  menubar: false,
  inline: true,
  plugins: [
    'link',
    'textcolor',
    'lists',
    'powerpaste',
    'autolink',
    'tinymcespellchecker'
  ],
  toolbar: [
    'undo redo | bold italic underline | fontselect fontsizeselect',
    'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
  ],
  valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
  valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
  },
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
  ]
};

tinymce.init(emailHeaderConfig);
tinymce.init(emailBodyConfig);