Содержание
The best WYSIWYG editor for CMS
Building or extending. Headless or traditional.
No matter the CMS, TinyMCE works best
Take control of your CMS content
Using TinyMCE means you can put the best rich text editor in your CMS and move on. Your developers have full control of the code, UI, configuration and integrations, while your non-technical users can create, manage and modify every type of content in your website or SaaS application.
CMS starter config
The basic editing experience every CMS should start with. Includes all the editing controls your users expect, plus PowerPaste, Accessibility Checker, Enhanced Image Editing and more.
1doctype html> 2 html lang="en"> 3 head> 4 meta charset="utf-8"> 5 title>TinyMCE Landing Page Exampletitle> 6 meta name="viewport" content="width=device-width, initial-scale=1"> 7 link rel="preconnect" href="https://fonts.googleapis.com"> 8 link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 9 link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet"> 10 script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin">script> 11 12 script> 13 tinymce.init( 14 selector: '#editor', 15 plugins: 'a11ychecker advcode advtemplate advlist advtable anchor autocorrect autosave editimage image link linkchecker lists media mediaembed pageembed powerpaste searchreplace table template tinymcespellchecker typography visualblocks wordcount', 16 toolbar: 'undo redo | styles fontsizeinput | bold italic | align bullist numlist | table link image media pageembed | spellcheckdialog a11ycheck code | inserttemplate', 17 toolbar_sticky: true, 18 toolbar_mode: 'wrap', 19 height: 620, 20 editable_root: false, 21 editable_class: 'tiny-editable', 22 elementpath: false, 23 object_resizing: false, 24 resize: false, 25 image_caption: true, 26 images_file_types: "jpeg,jpg,png,gif", 27 style_formats: [ 28 title: 'Heading 1', block: 'h1'>, 29 title: 'Heading 2', block: 'h2'>, 30 title: 'Heading 3', block: 'h3'>, 31 title: 'Paragraph', block: 'p'>, 32 title: 'Blockquote', block: 'blockquote'>, 33 title: 'Fancy list', selector: 'ul', classes: 'fancy'>, 34 ], 35 advcode_inline: true, 36 spellchecker_ignore_list: [ 'CMS', 'devs' ], 37 a11ychecker_level: 'aaa', 38 advtemplate_templates: [ 39 40 title: "About us", 41 content: 42 'h2>About our company/h2> 43 p>a href="https://tiny.cloud">XYZ Inc./a> is a global leader in providing innovative solutions to businesses. We provide our clients with the latest technology, state-of-the-art equipment, and experienced professionals to help them stay ahead of their competition. Our comprehensive suite of services, from cloud computing and big data analytics to mobile and e-commerce solutions, ensures that all of our clients have the resources they need to stay competitive in an ever-changing business landscape. Our commitment to customer service and satisfaction is second to none, and we strive to be a reliable and trusted partner for our clients./p>', 44 >, 45 ], 46 content_css: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', 47 content_style: ` 48 :root 49 --bs-primary-rgb: 62, 92, 210; 50 --bs-border-radius: 0; 51 --bs-border-radius-lg: 0; 52 > 53 54 html 55 font-size: 16px; 56 > 57 58 .tiny-logo 59 position: absolute; 60 top: 2rem; 61 left: 2rem; 62 > 63 64 h1 65 font-size: 2.75rem; 66 > 67 68 h1, 69 h2, 70 h3 71 margin-bottom: .5em; 72 > 73 74 ul.fancy li 75 margin-bottom: .5em; 76 > 77 78 ul.fancy li::marker 79 content: '✅ '; 80 > 81 82 .tiny-hero 83 background-image: url(images/sbc-cms-template-cover.png); 84 background-size: cover; 85 background-position: center center; 86 > 87 88 @media screen and (min-width: 768px) 89 .register-form 90 margin-bottom: -200px; 91 > 92 > 93 94 form 95 pointer-events: none; 96 > 97 98 .tiny-editable 99 position: relative; 100 > 101 102 .tiny-editable:hover:not(:focus), 103 .tiny-editable:focus 104 outline: 3px solid #b4d7ff; 105 outline-offset: 4px; 106 > 107 108 .tiny-editable:empty::before, 109 .tiny-editable:has(> br[data-mce-bogus]:first-child)::before 110 content: "Write here. "; 111 position: absolute; 112 top: 0; 113 left: 0; 114 color: #999; 115 > 116 ` 117 >); 118 script> 119 style> 120 body 121 margin: 2rem; 122 > 123 124 main 125 max-width: 1100px; 126 margin: auto; 127 > 128 style> 129 head> 130 131 body> 132 main> 133 textarea id="editor"> 134 div class="container-fluid text-bg-dark pt-5 tiny-hero"> 135 img src="images/sbc-cms-template-logo.png" alt="The Tiny Technologies logo" class="tiny-logo" width="120"> 136 div class="container-lg"> 137 div class="row gx-5 py-5"> 138 div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12 pt-5"> 139 div class="tiny-editable"> 140 p>This is a sample landing page built using TinyMCEp> 141 h1>Adding rich text editing to your CMSh1> 142 p>span style="font-size: 22px;">Wednesday, December 16, 2023span>br>span style="font-size: 22px;">5:00 - 7:00 PMspan>p> 143 div> 144 div> 145 div class="col-xl-4 col-lg-5 col-md-5 col-sm-12 register-form"> 146 div class="bg-primary p-3"> 147 h2 class="text-center my-3">Register nowh2> 148 form> 149 div class="mb-2"> 150 label for="first-name" class="form-label">First namelabel> 151 input type="text" class="form-control" id="first-name"> 152 div> 153 div class="mb-2"> 154 label for="last-name" class="form-label">Last namelabel> 155 input type="text" class="form-control" id="last-name"> 156 div> 157 div class="mb-2"> 158 label for="email" class="form-label">Email addresslabel> 159 input type="email" class="form-control" id="email"> 160 div> 161 div class="text-center my-3"> 162 button type="submit" class="btn btn-info btn-lg text-white px-5 py-2">Registerbutton> 163 div> 164 form> 165 div> 166 div> 167 div> 168 div> 169 div> 170 171 div class="container-fluid"> 172 div class="container-lg"> 173 div class="row gx-5 py-5"> 174 div class="offset-xl-1 col-xl-6 col-lg-7 col-md-7 col-sm-12"> 175 div class="tiny-editable"> 176 h2>Are you:h2> 177 ul class="fancy"> 178 li style="font-size: 20px;">span style="font-size: 20px;">Building a new CMS and need rich text editor functionality?span>li> 179 li style="font-size: 20px;">span style="font-size: 20px;">Extending an existing CMS and need to add more rich text editor functionality, or enhance the default editor?span>li> 180 ul> 181 p>span style="font-size: 20px;">Then use the only WYSIWYG editor that’s trusted by 1.5M devs.span>p> 182 div> 183 div> 184 div> 185 div> 186 div> 187 188 div class="container-fluid bg-primary text-white"> 189 div class="container-lg"> 190 div class="row gx-5 py-5 justify-content-center"> 191 div class="col-md-10 col-lg-8 col-xl-6 text-center"> 192 div class="tiny-editable"> 193 h2>How it worksh2> 194 p>This landing page was built using TinyMCE.p> 195 p>All you have to do is define your page structure, which regions are editable, and then which TinyMCE features you want enabled.p> 196 p>Play around with this demo to see how TinyMCE works as a CMS WYSIWYG editor!p> 197 div> 198 div> 199 div> 200 div> 201 202 div class="container-lg"> 203 div class="row gx-5 pb-5"> 204 div class="col text-center"> 205 div class="tiny-editable">img src="images/sbc-cms-template-face-1.png" alt="Portrait of Andrew Mitchell" width="200px"> 206 h3>span style="font-size: 20px;">Andrew Mitchellspan>h3> 207 p>Chief Technology Officer (CTO)br>Syntech Solutionsp> 208 div> 209 div> 210 div class="col text-center"> 211 div class="tiny-editable">img src="images/sbc-cms-template-face-2.png" alt="Portrait of Jennifer Lee" width="200" 212 height="200"> 213 h3>span style="font-size: 20px;">Jennifer Leespan>h3> 214 p>Director of Product Developmentbr>Stellar Innovationsp> 215 div> 216 div> 217 div class="col text-center"> 218 div class="tiny-editable">img src="images/sbc-cms-template-face-3.png" alt="Portrait of David Faraguay" width="200" 219 height="200"> 220 h3>span style="font-size: 20px;">David Faraguayspan>h3> 221 p>Senior Data Scientistbr>QuantumTech Labsp> 222 div> 223 div> 224 div> 225 div> 226 div> 227 228 div class="container-fluid"> 229 div class="container-lg"> 230 div class="row gx-5 py-4"> 231 div class="col offset-xl-1"> 232 p>Tiny Technologies, Inc. 2023p> 233 div> 234 div> 235 div> 236 div> 237 238 textarea> 239 main> 240 body> 241 html>