Page Embed plugin
优质
小牛编辑
126浏览
2023-12-01
Live example
This example shows how to use the Page Embed plugin to embed a page in the content in a responsive or exactly sized iframe.For more information on the Page Embed plugin, see the docs.
TinyMCE HTML CSS JS Edit on CodePen
<textarea id="page-embed">
<p style="text-align: center;">
<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 editor demo!</h2>
<h2>Got questions or need help?</h2>
<ul>
<li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
</ul>
<h2>A simple table to play with</h2>
<table style="text-align: center;">
<thead>
<tr>
<th>Product</th>
<th>Cost</th>
<th>Really?</th>
</tr>
</thead>
<tbody>
<tr>
<td>TinyMCE</td>
<td>Free</td>
<td>YES!</td>
</tr>
<tr>
<td>Plupload</td>
<td>Free</td>
<td>YES!</td>
</tr>
</tbody>
</table>
<h2>Found a bug?</h2>
<p>
If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
</p>
<h2>Finally ...</h2>
<p>
Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
</p>
<p>
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
</p>
</textarea>
.tiny-pageembed--21by9,
.tiny-pageembed--16by9,
.tiny-pageembed--4by3,
.tiny-pageembed--1by1 {
display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.tiny-pageembed--21by9::before,
.tiny-pageembed--16by9::before,
.tiny-pageembed--4by3::before,
.tiny-pageembed--1by1::before {
content: "";
display: block;
}
.tiny-pageembed--21by9::before {
padding-top: 42.857143%;
}
.tiny-pageembed--16by9::before {
padding-top: 56.25%;
}
.tiny-pageembed--4by3::before {
padding-top: 75%;
}
.tiny-pageembed--1by1::before {
padding-top: 100%;
}
.tiny-pageembed--21by9 iframe,
.tiny-pageembed--16by9 iframe,
.tiny-pageembed--4by3 iframe,
.tiny-pageembed--1by1 iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
tinymce.init({
selector: 'textarea#page-embed',
plugins: 'pageembed code',
toolbar: 'pageembed code',
menubar: "view",
tiny_pageembed_classes: [
{ text: 'Big embed', value: 'my-big-class' },
{ text: 'Small embed', value: 'my-small-class' }
],
height: 500,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
]
});