You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

235 lines
7.2 KiB

{% include template/menu.html css="body > *" %}
<style>
.modern-main {
width: 1140px;
margin: 0 auto;
display: flex;
}
.modern-navigation {
padding: 0;
position: relative;
width: 250px;
top: 0;
overflow-y: auto;
z-index: 1;
}
.modern-navigation-extra {
padding: 0 0 26px 0;
}
.modern-navigation-extra > div:first-child {
margin: 0 0 16px;
}
.modern-navigation-extra a {
font-size: 14px;
font-weight: 900;
}
.modern-navigation-extra a svg {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
margin: 0.5px 8px 0 0;
}
.modern-navigation-extra a.back-home {
color: #1976D2;
}
.modern-navigation-extra a.back-home:hover path {
fill: rgb(145, 180, 225);
}
.modern-navigation-extra a.back-home:hover {
color: rgb(145, 180, 225);
}
@media screen and (max-width: 1126px) {
.modern-navigation-extra {
padding: 20px 0;
}
}
.modern-main-container {
width: auto;
flex-grow: 1;
padding-top: 16px;
}
main .modern-heading {
margin-left: 0;
}
main .modern-content {
margin-left: 0;
}
.modern-versions {
margin-bottom: 30px;
}
.modern-versions .dropdown {
width: 225px;
height: 42px;
}
.modern-versions .dropdown .dropdown-arrow {
width: 42px;
height: 42px;
border: none;
background-color: transparent;
}
@media screen and (max-width: 1126px) {
.modern-main {
flex-direction: column;
width: auto;
}
.modern-versions {
display: none;
}
.modern-navigation {
width: 100%;
}
}
aside>ul.aside-navlist-override {
margin: 0 !important;
}
@media screen and (max-width: 1126px) {
aside div#optimize-bottom,
aside div#optimize-top {
display: none;
visibility: hidden;
}
}
aside div#optimize-top {
margin: 32px 0 24px 0;
}
aside div#optimize-bottom {
margin: 0 0 348px 0;
}
</style>
<div class="modern-main {{ page.type }} {{ page.class }}">
<aside class="side-nav modern-navigation">
<div class="modern-versions">
<div class="dropdown">
TinyMCE v5
<div class="dropdown-arrow"></div>
<div class="dropdown-options">
<a class="link-gelato" href="/docs/">TinyMCE v5</a>
<a class="link-gelato" href="/docs-4x/">TinyMCE v4</a>
<a class="link-gelato" href="/docs-3x/">TinyMCE v3</a>
</div>
</div>
</div>
<div id="side-nav-controller">Expand Menu</div>
<div class="modern-navigation-extra">
<div>
<a href="/get-tiny/" data-marketing="docs-nav-get-tiny">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#3F3F3F" fill-rule="evenodd" d="M8 12c-.3 0-.5-.1-.7-.3L1.6 6 3 4.6l4 4V0h2v8.6l4-4L14.4 6l-5.7 5.7c-.2.2-.4.3-.7.3zm-7 2h14v2H1v-2z"/>
</svg>Get TinyMCE
</a>
</div>
<div>
<a class="back-home" href="/" data-marketing="docs-nav-back-home">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#1976D2" fill-rule="evenodd" d="M6.25 10.5L1 5.25 6.25 0l1.361 1.361-2.917 2.917h5.445C12.86 4.278 15 6.417 15 9.138 15 11.862 12.861 14 10.139 14H2.36v-1.944h7.778c1.653 0 2.917-1.264 2.917-2.917 0-1.653-1.264-2.917-2.917-2.917H4.694L7.611 9.14 6.25 10.5z"/>
</svg>Return to Website
</a>
</div>
</div>
{% assign nav = site.data.nav | array_concat:site.data.nav_api %}
{% include nav.html links=nav preceding_address="/" %}
<div id="optimize-top">
<a href="/features/">
<img
title="Power meets beauty with TinyMCE 5."
src="{{ site.baseurl }}/images/optimize/editor/standard/base.gif"
srcset="{{ site.baseurl }}/images/optimize/editor/standard/base.gif 1x, {{ site.baseurl }}/images/optimize/editor/standard/base@2x.gif 2x"
/>
</a>
</div>
<div id="optimize-bottom">
<a href="{{ site.accountsignup }}">
<img
title="Create your Tiny Account. Get the most out of TinyMCE with a 30-day free trial of all premium plugins."
src="{{ site.baseurl }}/images/optimize/account/mini/primary.gif"
srcset="{{ site.baseurl }}/images/optimize/account/mini/primary.gif 1x, {{ site.baseurl }}/images/optimize/account/mini/primary@2x.gif 2x"
/>
</a>
</div>
</aside>
<main class="modern-main-container">
<div class="heading modern-heading">
<h1 class="light">{{ page.title }}</h1>
<h2 class="light">{{ page.description }}</h2>
{% if page.url contains '/api/' %}
<!-- Disabled since there is no git link -->
{% else %}
<a class="contribute link-garlic"
href="https://github.com/tinymce/tinymce-docs/tree/master/{{ page.path }}">Contribute to this page<i></i></a>
{% endif %}
{% if page.controls %}
{% assign controls = page.controls | split:',' %}
<div class="badges">
{% for control in controls %}<span class="badge-naan lg">+ {{ control }}</span> {% endfor %}
</div>
{% endif %}
</div>
<div class="content modern-content">
{{ content }}
{% include feedback.html %}
<p class="let-us-know">
Can't find what you're looking for?
<a href="#" data-modal="let-us-know">
Let us know.
</a>
</p>
{% include license.html %}
</div>
<div style="clear: both"></div>
</main>
</div>
{% include_remote {{ site.origin }}/_docs/footer.html css="body > *" %}
<script src="{{ site.shared_baseurl }}{{ site.baseurl }}/scripts/common.min.js"></script>
<script src="{{ site.shared_baseurl }}{{ site.baseurl }}/scripts/docs.min.js"></script>
<script>
{% include js/polyfill/promise-polyfill/polyfill.js %}
{% include js/polyfill/whatwg-fetch/fetch.umd.js %}
{% include js/my-account-button.js %}
{% include js/notifications.js %}
{% include js/store.js %}
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'd70977481e4a0b72eacaec1533b2d81b',
indexName: 'tiny',
inputSelector: '#searchInput',
algoliaOptions: { 'facetFilters': ["tags:docs"] },
debug: true
});
</script>