Distraction-free editor example

发布于 2019-05-06 字数17492 浏览 730 评论 0

Live example

This example shows you how to use TinyMCE’s Distraction-free editor.

TinyMCE HTML CSS JS Edit on CodePen .demo-dfree { position: relative; width: 690px; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2); text-align: left; color: #626262; font-family: Lato; font-size: 14px; padding: 20px; } .demo-dfree *[contentEditable=”true”]:hover { outline: 1px solid #2276d2; } .demo-dfree h1 { color: #1976d2; font-family: Aileron !important; font-size: 2em; font-weight: bold; } .demo-dfree h2 { color: #1976d2; font-family: Aileron; font-size: 2em; font-weight: bold; } .demo-dfree h3 { font-size: 1.5em; color: #403f42; font-weight: bold; color: inherit; font-family: Aileron; } .demo-dfree h2, .demo-dfree h3 { margin-bottom: 0px; margin-top: 0px; line-height: 40px; } .demo-dfree ul, .demo-dfree ol { padding-left: 20px; } .demo-dfree ul { list-style: disc; } .demo-dfree ol { list-style: decimal; } .demo-dfree a { text-decoration: underline; } .demo-dfree textarea { display: none; } .demo-dfree .dfree-header { font-size: 2.4em; text-align: center; margin: 10px; } .demo-dfree .dfree-body { padding: 20px; padding-top: 0px; } .demo-dfree .dfree-body p { margin-bottom: 10px; } .demo-dfree .dfree-body blockquote { margin-left: 30px; padding-left: 10px; margin-right: 40px; font-style: italic; border-left: 1px solid #696969; } .demo-dfree .dfree-body a { text-decoration: underline; } .demo-dfree .dfree-body td, .demo-dfree .dfree-body tr { border: 1px solid #696969; }

The latest and greatest from 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!


<div class='demo-dfree'>
  <h2 class="dfree-header mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
    The latest and greatest from TinyMCE
  </h2>
  <br/>
  <div class="dfree-body mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
    <p><img src="https://tiny.cloud/images/medium-pic.jpg" style="display: block; margin-left: auto; margin-right: auto; width: 100%;" data-mce-style="display: block; margin-left: auto; margin-right: auto;" data-mce-selected="1"></p>
    <br/>
    <h2>The world’s first rich text editor in the cloud</h2>

    <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 external-link="true" 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>
  
    <h3>An editor for every project</h3>
  
    <p>
      Here are some of our customer’s most common use cases for TinyMCE:
      <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>
  
    <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>
</div>



.demo-dfree {
  position: relative;
  width: 690px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
  text-align: left;
  color: #626262;
  font-family: Lato;
  font-size: 14px;
  padding: 20px;
}
.demo-dfree *[contentEditable="true"]:hover {
  outline: 1px solid #2276d2;
}
.demo-dfree h1 {
  color: #1976d2;
  font-family: Aileron !important;
  font-size: 2em;
  font-weight: bold;
}
.demo-dfree h2 {
  color: #1976d2;
  font-family: Aileron;
  font-size: 2em;
  font-weight: bold;
}
.demo-dfree h3 {
  font-size: 1.5em;
  color: #403f42;
  font-weight: bold;
  color: inherit;
  font-family: Aileron;
}
.demo-dfree h2,
.demo-dfree h3 {
  margin-bottom: 0px;
  margin-top: 0px;
  line-height: 40px;
}
.demo-dfree ul,
.demo-dfree ol {
  padding-left: 20px;
}
.demo-dfree ul {
  list-style: disc;
}
.demo-dfree ol {
  list-style: decimal;
}
.demo-dfree a {
  text-decoration: underline;
}
.demo-dfree textarea {
  display: none;
}
.demo-dfree .dfree-header {
  font-size: 2.4em;
  text-align: center;
  margin: 10px;
}
.demo-dfree .dfree-body {
  padding: 20px;
  padding-top: 0px;
}
.demo-dfree .dfree-body p {
  margin-bottom: 10px;
}
.demo-dfree .dfree-body blockquote {
  margin-left: 30px;
  padding-left: 10px;
  margin-right: 40px;
  font-style: italic;
  border-left: 1px solid #696969;
}
.demo-dfree .dfree-body a {
  text-decoration: underline;
}
.demo-dfree .dfree-body td,
.demo-dfree .dfree-body tr {
  border: 1px solid #696969;
}



var dfreeHeaderConfig = {
  selector: '.dfree-header',
  menubar: false,
  inline: true,
  toolbar: false,
  plugins: [ 'quickbars' ],
  quickbars_insert_toolbar: 'undo redo',
  quickbars_selection_toolbar: 'italic underline'
};

var dfreeBodyConfig = {
  selector: '.dfree-body',
  menubar: false,
  inline: true,
  plugins: [
    'autolink',
    'codesample',
    'link',
    'lists',
    'media',
    'powerpaste',
    'table',
    'textcolor',
    'image',
    'quickbars'
  ],
  toolbar: false,
  quickbars_insert_toolbar: 'quicktable image',
  quickbars_selection_toolbar: 'bold italic | h2 h3 | blockquote quicklink',
  contextmenu: 'inserttable | cell row column deletetable',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean'
};

tinymce.init(dfreeHeaderConfig);
tinymce.init(dfreeBodyConfig);

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { var dfreeHeaderConfig = { selector: ‘.dfree-header’, menubar: false, inline: true, toolbar: false, plugins: [ ‘quickbars’ ], quickbars_insert_toolbar: ‘undo redo’, quickbars_selection_toolbar: ‘italic underline’ }; var dfreeBodyConfig = { selector: ‘.dfree-body’, menubar: false, inline: true, plugins: [ ‘autolink’, ‘codesample’, ‘link’, ‘lists’, ‘media’, ‘powerpaste’, ‘table’, ‘textcolor’, ‘image’, ‘quickbars’ ], toolbar: false, quickbars_insert_toolbar: ‘quicktable image’, quickbars_selection_toolbar: ‘bold italic | h2 h3 | blockquote quicklink’, contextmenu: ‘inserttable | cell row column deletetable’, powerpaste_word_import: ‘clean’, powerpaste_html_import: ‘clean’ }; tinymce.init(dfreeHeaderConfig); tinymce.init(dfreeBodyConfig); })(); (function() { /* TODO: more js, less jekyll */ var id = “editor-dfree”; var html = decodeURIComponent(“%0A%3Cdiv%20class=’demo-dfree’%3E%0A%20%20%3Ch2%20class=%22dfree-header%20mce-content-body%22%20contenteditable=%22true%22%20style=%22position:%20relative;%22%20spellcheck=%22false%22%3E%0A%20%20%20%20The%20latest%20and%20greatest%20from%20TinyMCE%0A%20%20%3C/h2%3E%0A%20%20%3Cbr/%3E%0A%20%20%3Cdiv%20class=%22dfree-body%20mce-content-body%22%20contenteditable=%22true%22%20style=%22position:%20relative;%22%20spellcheck=%22false%22%3E%0A%20%20%20%20%3Cp%3E%3Cimg%20src=%22https://tiny.cloud/images/medium-pic.jpg%22%20style=%22display:%20block;%20margin-left:%20auto;%20margin-right:%20auto;%20width:%20100%25;%22%20data-mce-style=%22display:%20block;%20margin-left:%20auto;%20margin-right:%20auto;%22%20data-mce-selected=%221%22%3E%3C/p%3E%0A%20%20%20%20%3Cbr/%3E%0A%20%20%20%20%3Ch2%3EThe%20world%E2%80%99s%20first%20rich%20text%20editor%20in%20the%20cloud%3C/h2%3E%0A%0A%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20Have%20you%20heard%20about%20Tiny%20Cloud?%20%0A%20%20%20%20%20%20It%E2%80%99s%20the%20first%20step%20in%20our%20journey%20to%20help%20you%20deliver%20great%20content%20creation%20experiences,%20no%20matter%20your%20level%20of%20expertise.%20%0A%20%20%20%20%20%2050,000%20developers%20already%20agree.%20%0A%20%20%20%20%20%20They%20get%20free%20access%20to%20our%20global%20CDN,%20image%20proxy%20services%20and%20auto%20updates%20to%20the%20TinyMCE%20editor.%20%0A%20%20%20%20%20%20They%E2%80%99re%20also%20ready%20for%20some%20exciting%20updates%20coming%20soon.%0A%20%20%20%20%3C/p%3E%0A%20%20%0A%20%20%0A%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20One%20of%20these%20enhancements%20is%20%3Cstrong%3ETiny%20Drive%3C/strong%3E:%20imagine%20file%20management%20for%20TinyMCE,%20in%20the%20cloud,%20made%20super%20easy.%20%0A%20%20%20%20%20%20Learn%20more%20at%20%3Ca%20href=’https://www.tiny.cloud/tinydrive/’%3Etiny.cloud/tinydrive%3C/a%3E,%20where%20you%E2%80%99ll%20find%20a%20working%20demo%20and%20an%20opportunity%20to%20provide%20feedback%20to%20the%20product%20team.%0A%20%20%20%20%3C/p%3E%0A%20%20%0A%20%20%20%20%3Ch3%3EAn%20editor%20for%20every%20project%3C/h3%3E%0A%20%20%0A%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20Here%20are%20some%20of%20our%20customer%E2%80%99s%20most%20common%20use%20cases%20for%20TinyMCE:%0A%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EContent%20Management%20Systems%20(%3Cem%3Ee.g.%20WordPress,%20Umbraco%3C/em%3E)%3C/li%3E%0A%20%20%20%20%20%20%20%20%3Cli%3ELearning%20Management%20Systems%20(%3Cem%3Ee.g.%20Blackboard%3C/em%3E)%3C/li%3E%0A%20%20%20%20%20%20%20%20%3Cli%3ECustomer%20Relationship%20Management%20and%20marketing%20automation%20(%3Cem%3Ee.g.%20Marketo%3C/em%3E)%3C/li%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EEmail%20marketing%20(%3Cem%3Ee.g.%20Constant%20Contact%3C/em%3E)%3C/li%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EContent%20creation%20in%20SaaS%20systems%20(%3Cem%3Ee.g.%20Eventbrite,%20Evernote,%20GoFundMe,%20Zendesk%3C/em%3E)%3C/li%3E%0A%20%20%20%20%20%20%3C/ul%3E%0A%20%20%20%20%3C/p%3E%0A%20%20%0A%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20And%20those%20use%20cases%20are%20just%20the%20start.%20%0A%20%20%20%20%20%20TinyMCE%20is%20incredibly%20flexible,%20and%20with%20hundreds%20of%20APIs%20there%E2%80%99s%20likely%20a%20solution%20for%20your%20editor%20project.%20%0A%20%20%20%20%20%20If%20you%20haven%E2%80%99t%20experienced%20Tiny%20Cloud,%20get%20started%20today.%20%0A%20%20%20%20%20%20You%E2%80%99ll%20even%20get%20a%20free%20trial%20of%20our%20premium%20plugins%20%E2%80%93%20no%20credit%20card%20required!%0A%20%20%20%20%3C/p%3E%0A%20%20%3C/div%3E%0A%3C/div%3E%0A%0A”); var js = decodeURIComponent(“%0Avar%20dfreeHeaderConfig%20=%20%7B%0A%20%20selector:%20′.dfree-header’,%0A%20%20menubar:%20false,%0A%20%20inline:%20true,%0A%20%20toolbar:%20false,%0A%20%20plugins:%20[%20’quickbars’%20],%0A%20%20quickbars_insert_toolbar:%20’undo%20redo’,%0A%20%20quickbars_selection_toolbar:%20’italic%20underline’%0A%7D;%0A%0Avar%20dfreeBodyConfig%20=%20%7B%0A%20%20selector:%20′.dfree-body’,%0A%20%20menubar:%20false,%0A%20%20inline:%20true,%0A%20%20plugins:%20[%0A%20%20%20%20’autolink’,%0A%20%20%20%20’codesample’,%0A%20%20%20%20’link’,%0A%20%20%20%20’lists’,%0A%20%20%20%20’media’,%0A%20%20%20%20’powerpaste’,%0A%20%20%20%20’table’,%0A%20%20%20%20’textcolor’,%0A%20%20%20%20’image’,%0A%20%20%20%20’quickbars’%0A%20%20],%0A%20%20toolbar:%20false,%0A%20%20quickbars_insert_toolbar:%20’quicktable%20image’,%0A%20%20quickbars_selection_toolbar:%20’bold%20italic%20%7C%20h2%20h3%20%7C%20blockquote%20quicklink’,%0A%20%20contextmenu:%20’inserttable%20%7C%20cell%20row%20column%20deletetable’,%0A%20%20powerpaste_word_import:%20’clean’,%0A%20%20powerpaste_html_import:%20’clean’%0A%7D;%0A%0Atinymce.init(dfreeHeaderConfig);%0Atinymce.init(dfreeBodyConfig);%0A”); var css = decodeURIComponent(“%0A.demo-dfree%20%7B%0A%20%20position:%20relative;%0A%20%20width:%20690px;%0A%20%20box-shadow:%200px%202px%208px%200px%20rgba(0,%200,%200,%200.2);%0A%20%20text-align:%20left;%0A%20%20color:%20#626262;%0A%20%20font-family:%20Lato;%0A%20%20font-size:%2014px;%0A%20%20padding:%2020px;%0A%7D%0A.demo-dfree%20*[contentEditable=%22true%22]:hover%20%7B%0A%20%20outline:%201px%20solid%20#2276d2;%0A%7D%0A.demo-dfree%20h1%20%7B%0A%20%20color:%20#1976d2;%0A%20%20font-family:%20Aileron%20!important;%0A%20%20font-size:%202em;%0A%20%20font-weight:%20bold;%0A%7D%0A.demo-dfree%20h2%20%7B%0A%20%20color:%20#1976d2;%0A%20%20font-family:%20Aileron;%0A%20%20font-size:%202em;%0A%20%20font-weight:%20bold;%0A%7D%0A.demo-dfree%20h3%20%7B%0A%20%20font-size:%201.5em;%0A%20%20color:%20#403f42;%0A%20%20font-weight:%20bold;%0A%20%20color:%20inherit;%0A%20%20font-family:%20Aileron;%0A%7D%0A.demo-dfree%20h2,%0A.demo-dfree%20h3%20%7B%0A%20%20margin-bottom:%200px;%0A%20%20margin-top:%200px;%0A%20%20line-height:%2040px;%0A%7D%0A.demo-dfree%20ul,%0A.demo-dfree%20ol%20%7B%0A%20%20padding-left:%2020px;%0A%7D%0A.demo-dfree%20ul%20%7B%0A%20%20list-style:%20disc;%0A%7D%0A.demo-dfree%20ol%20%7B%0A%20%20list-style:%20decimal;%0A%7D%0A.demo-dfree%20a%20%7B%0A%20%20text-decoration:%20underline;%0A%7D%0A.demo-dfree%20textarea%20%7B%0A%20%20display:%20none;%0A%7D%0A.demo-dfree%20.dfree-header%20%7B%0A%20%20font-size:%202.4em;%0A%20%20text-align:%20center;%0A%20%20margin:%2010px;%0A%7D%0A.demo-dfree%20.dfree-body%20%7B%0A%20%20padding:%2020px;%0A%20%20padding-top:%200px;%0A%7D%0A.demo-dfree%20.dfree-body%20p%20%7B%0A%20%20margin-bottom:%2010px;%0A%7D%0A.demo-dfree%20.dfree-body%20blockquote%20%7B%0A%20%20margin-left:%2030px;%0A%20%20padding-left:%2010px;%0A%20%20margin-right:%2040px;%0A%20%20font-style:%20italic;%0A%20%20border-left:%201px%20solid%20#696969;%0A%7D%0A.demo-dfree%20.dfree-body%20a%20%7B%0A%20%20text-decoration:%20underline;%0A%7D%0A.demo-dfree%20.dfree-body%20td,%0A.demo-dfree%20.dfree-body%20tr%20%7B%0A%20%20border:%201px%20solid%20#696969;%0A%7D%0A%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_editor-dfree”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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