cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <div id="html-app" class="container-fluid">
  <div class="row">
    <div class="col">
  <form method="post">
    <textarea id="textarea" name="textarea">

<!--     <button name="submitbtn">Save</button> -->

<!-- <div class="col">

  <form method="post">
    <div editable id="divarea">
      <p>This section of content can be edited. Click here to see how.</p>

</div> -->


<!--       <div id="lipsum"> -->
<!-- <p> Finished on media button https://www.tinymce.com/docs/plugins/media/<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt, lacus ut sollicitudin volutpat, nisl nisi fringilla orci, nec vulputate purus erat vitae velit. Mauris vestibulum nibh et efficitur placerat. Nullam in ligula ac justo finibus finibus. Fusce et elementum nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque nec nisi et lorem tincidunt laoreet. Ut at tortor in ex elementum vehicula sed ac ligula. Curabitur viverra ultrices mi ac commodo. In in luctus urna. Aliquam blandit massa id sodales sodales.
<p class="mceNonEditable_deletethis">
Pellentesque dapibus ultricies odio, vitae suscipit metus placerat et. Vestibulum semper enim ac egestas pulvinar. Nullam nec volutpat elit. Maecenas sodales porta sapien pharetra auctor. Phasellus suscipit volutpat tortor, quis ornare nunc rutrum efficitur. Etiam sed dictum lectus. Nulla eget tempus est. Mauris a nunc pulvinar, pretium urna vitae, feugiat dui. Aenean nisl orci, ultricies eu posuere vel, varius quis mauris. In pretium leo eu enim dignissim dictum. Mauris ac nunc eget metus egestas gravida ac vel nibh. Proin consectetur sagittis sem, eu consequat ex dignissim eget. Suspendisse dui tortor, condimentum sed sagittis ac, tempus non leo. Sed aliquet dui ac tellus tristique, eget sollicitudin purus aliquam. Maecenas eu vulputate sapien. Donec sapien tellus, suscipit feugiat molestie vitae, tempor volutpat mauris.
Morbi vitae aliquam nibh, vitae sodales ipsum. Nulla eget condimentum odio, quis auctor risus. Mauris ut ante dolor. Quisque consequat non arcu non pharetra. Phasellus tristique nulla quis odio finibus, eu euismod nunc bibendum. Nulla accumsan tempus lectus, quis dignissim eros. Aliquam aliquam euismod lacus, eget maximus arcu iaculis sit amet.
Nullam malesuada justo ac leo tempor ullamcorper. Quisque et blandit lectus, vitae scelerisque turpis. Nulla pretium neque nec efficitur faucibus. Mauris a dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit orci quam, et hendrerit justo condimentum lobortis. Nunc elementum erat enim, sit amet vulputate quam feugiat ac. Donec bibendum interdum condimentum. Nulla ut nisi mollis, pharetra ex ac, suscipit purus. Duis iaculis sit amet tortor quis imperdiet. Praesent in efficitur risus. Praesent ac dignissim est, lacinia commodo lectus. Curabitur blandit, felis quis volutpat faucibus, neque lorem tincidunt dolor, in dapibus lectus urna vitae elit. Vivamus vulputate ex in lectus scelerisque, eget vulputate tellus elementum. In ornare facilisis consequat. Nam at sapien lectus.
Fusce quis enim feugiat, aliquam mauris at, faucibus velit. Pellentesque varius, neque id pulvinar porttitor, nunc velit scelerisque est, sit amet dictum mauris augue eu nisl. Aenean semper consectetur ligula. Curabitur molestie, nibh eget feugiat faucibus, quam elit bibendum ex, et facilisis est nisi vel eros. Integer at pellentesque orci. Fusce facilisis laoreet metus quis condimentum. Suspendisse pretium ornare euismod. In eu massa vel enim interdum scelerisque quis ac risus. Suspendisse porttitor a quam sed sagittis. Suspendisse tortor odio, volutpat eget sollicitudin et, eleifend id est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas tincidunt, odio ac congue suscipit, nunc eros varius mi, nec placerat purus ipsum nec odio.
  padding-top: 3em;

/* Basic styles for Table of Contents plugin (toc) */
/* .mce-toc {
    border: 1px solid gray;

.mce-toc h2 {
    margin: 4px;

.mce-toc li {
    list-style-type: none;
} */
  selector: "textarea", //#textarea,#divarea
  auto_focus: "textarea",
    "wordcount code lists advlist anchor autolink autosave charmap codesample textcolor colorpicker contextmenu fullpage fullscreen help hr image insertdatetime link media noneditable pagebreak paste preview print save searchreplace tabfocus table template textpattern toc visualblocks visualchars",
  //TODO see full page defaults https://www.tinymce.com/docs/plugins/fullpage/
  //TODO look at importcss plugin and content_css https://www.tinymce.com/docs/plugins/importcss/
  // See available date formats https://www.tinymce.com/docs/plugins/insertdatetime/
  // TODO see media options https://www.tinymce.com/docs/plugins/media/
  branding: false, //adds tinymce name to bottom
  height: 500,
  max_height: 800,
  min_height: 200,
  min_width: 100,
  max_width: 900,
  insert_button_items: "",
  // menubar: 'file edit view insert format table help',
  // menu: {
  //   file: {title: 'Files', items: 'newdocument'},
  //   edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
  //   insert: {title: 'Insert', items: 'link media | template hr'},
  //   view: {title: 'View', items: 'visualaid'},
  //   format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
  //   tools: {title: 'Tools', items: 'spellchecker code'},
  //   access: {title: 'Accessibility', items: ''}
  // },
  // mobile: {
  //   theme: "mobile",
  //   plugsins: [""],
  //   toolbar: [""]
  // },
  preview_styles: true, //shows how formats and headings look in the menu
  // resize: 'both',
  statusbar: true,
    "insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | link image code",
    "save insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | link image code",
  // toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
  // inline_boundaries_selector: 'a[href],code,b,i,strong,em', //don't know what this does
  visual: true, //don't know what this does
  browser_spellcheck: true,
  custom_undo_redo_levels: 20, // saves this many undo points
  //advlist_bullet_styles: "square",  // only include square bullets in list
  //advlist_number_styles: "lower-alpha",  // only include lower alpha in list
  //autosave_ask_before_unload: true, //does this work TODO
  //autosave_restore_when_empty: true,
  //autosave_interval: "5s",
  //autosave_retention: "30m",
  // charmap: [[0x2615, 'morning coffee']  ], //this overrides the char map
  // charmap_append: [    [0x2600, 'sun'],    [0x2601, 'cloud']  ], //this appends to the current char map
  // contextmenu: "copy paste link image inserttable | cell row column deletetable",
  image_caption: true,
  image_list: [
      title: "Turtle Image",
      title: "Dog Image",
      value: "https://www.what-dog.net/Images/faces2/scroll0015.jpg"
  image_advtab: true,
  image_class_list: [
    { title: "None", value: "" },
    { title: "Responsive", value: "img-fluid" },
    { title: "Thumbnail", value: "img-thumbnail" },
    { title: "Float Left", value: "rounded float-left" },
    { title: "Float Right", value: "rounded float-right" }
  ], //TODO add image classes
  image_dimensions: true,
  // image_title: true,
  // image_prepend_url: "https://www.tinymce.com/images/",
    "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css", //adds bootstrap or external css
  insertdatetime_dateformat: "%YYYY-%m-%d",
  insertdatetime_formats: ["%H:%M:%S", "%Y-%m-%d", "%I:%M:%S %p", "%D"],
  default_link_target: "_blank", //default links to new window
  link_context_toolbar: true,
  // link_assume_external_targets: true //TODO see  https://www.tinymce.com/docs/plugins/link/
  link_class_list: [
    { title: "None", value: "" },
    { title: "Badge Primary", value: "badge badge-primary" },
    { title: "Badge Secondary", value: "cat" }
  ], //this would be great to select a font awesome icon css
  link_list: [
    { title: "A Link preset", value: "https://www.tinymce.com" },
    { title: "Preset 2", value: "https://www.ephox.com" }
  ], //link list to common places
  // noneditable_editable_class: "mceEditable",
  noneditable_noneditable_class: "mceNonEditable",
    '<div style="page-break-after: always;" class="pagebreak"></div><!-- my page break -->',
  paste_data_images: true, //allow images to be pasted
  paste_as_text: false, //updates default in menu
  paste_enable_default_filters: true,
  paste_preprocess: function(plugin, args) {
    // args.content += ' preprocess';
  // paste_postprocess: function(plugin, args) {
  // console.log(args.node);
  // args.node.setAttribute('id', '42');
  // },
  // paste_word_valid_elements: "h3",
  paste_webkit_styles: "none", //which span styles to keep
  paste_retain_style_properties: "none", //which inline styles to keep
  paste_merge_formats: true, //merges multiple text formats like <b>
  paste_convert_word_fake_lists: true,
  plugin_preview_height: 500,
  plugin_preview_width: 650,
  save_enablewhendirty: true,
  //tabfocus_elements: ":prev,:next", //next form field
  save_onsavecallback: function() {
  table_appearance_options: true, //removes spacing padding, border caption options
  table_grid: true, //the draggable table matrix to create table
  table_default_attributes: {
    // border: '1'
  }, //default attritbutes
  table_default_styles: {
    'border-collapsed': 'collapse', 'width': '100%'
  table_responsive_width: true, //uses percentages for table size
  table_class_list: [
    { title: "None", value: "" },
    { title: "Table", value: "table" },
    { title: "Bordered Table", value: "table table-bordered" },
    { title: "Small Table", value: "table table-sm" },
    { title: "Striped", value: "table table-striped" },
    { title: "Striped Dark", value: "table table-striped table-dark" },
    { title: "Hover Rows", value: "table table-hover" }
  inline_styles : false,
  invalid_styles: 'width, height',
  table_cell_class_list: [
    { title: "None", value: "" },
    { title: "Primary", value: "table-primary" },
    { title: "Active", value: "table-active" },
    { title: "Dark", value: "table-dark" }
  table_row_class_list: [
    { title: "None", value: "" },
    { title: "Primary", value: "table-primary" },
    { title: "Active", value: "table-active" },
    { title: "Dark", value: "table-dark" }
  table_advtab: false, //disabled advanced table tab
  table_cell_advtab: false, //disable advanced cell tab
  table_row_advtab: false, //disable advanced row tab
  templates: [
    { title: "Sample Template 1", content: "<h4>sample html code</h4>" },
    { title: "Templat2 2", content: "Number 2 template stuff" }
  // textcolor_cols: "10",
  // textcolor_rows: "10",
  // textcolor_map: [
  //   "000000", "Black",
  //   "993300", "Burnt orange",
  //   "333300", "Dark olive",
  //   "003300", "Dark green",
  //   "003366", "Dark azure",
  //   "000080", "Navy Blue",
  //   "333399", "Indigo",
  //   "333333", "Very dark gray",
  //   "800000", "Maroon",
  //   "FF6600", "Orange",
  //   "808000", "Olive",
  //   "008000", "Green",
  //   "008080", "Teal",
  //   "0000FF", "Blue",
  //   "666699", "Grayish blue",
  //   "808080", "Gray",
  //   "FF0000", "Red",
  //   "FF9900", "Amber",
  //   "99CC00", "Yellow green",
  //   "339966", "Sea green",
  //   "33CCCC", "Turquoise",
  //   "3366FF", "Royal blue",
  //   "800080", "Purple",
  //   "999999", "Medium gray",
  //   "FF00FF", "Magenta",
  //   "FFCC00", "Gold",
  //   "FFFF00", "Yellow",
  //   "00FF00", "Lime",
  //   "00FFFF", "Aqua",
  //   "00CCFF", "Sky blue",
  //   "993366", "Red violet",
  //   "FFFFFF", "White",
  //   "FF99CC", "Pink",
  //   "FFCC99", "Peach",
  //   "FFFF99", "Light yellow",
  //   "CCFFCC", "Pale green",
  //   "CCFFFF", "Pale cyan",
  //   "99CCFF", "Light sky blue",
  //   "CC99FF", "Plum"
  // ],
  textpattern_patterns: [
    { start: "*", end: "*", format: "italic" },
    { start: "**", end: "**", format: "bold" },
    { start: "#", format: "h1" },
    { start: "##", format: "h2" },
    { start: "###", format: "h3" },
    { start: "####", format: "h4" },
    { start: "#####", format: "h5" },
    { start: "######", format: "h6" },
    { start: "1. ", cmd: "InsertOrderedList" },
    { start: "* ", cmd: "InsertUnorderedList" },
    { start: "- ", cmd: "InsertUnorderedList" }
  toc_depth: 3, // depth of table of contents
  toc_header: "h2", // case doesn't matter
  // toc_class: "our-toc",

  visualblocks_default_state: false,
  setup: function(editor) {
    editor.on("click", function(e) {
      // console.log("editor was clicked");

//      tinymce.init({
//             selector: '#editor',
//             inline: true,
//             height: 500,
//             menubar: false,
//             browser_spellcheck: true,
//             theme: 'modern',
//             advlist_bullet_styles: "default",
//             advlist_number_styles: "default lower-alpha upper-alpha upper-roman lower-roman",
//             plugins: [
//               'advlist autolink lists link charmap print preview pagebreak',
//               'searchreplace wordcount visualblocks visualchars code fullscreen',
//               'insertdatetime media nonbreaking save table directionality',
//               'template paste textpattern codesample'
//             ],
//             paste_retain_style_properties: "none",
//             paste_word_valid_elements: "b,strong,i,em,h1,h2,h3,h4,h5,p,ol,ul,li",
//             invalid_elements: 'style',
//             keep_styles: false,
//             // paste_as_text: true,
//             toolbar1: 'savesyllabus | undo redo copy paste | styleselect visualblocks | table',
//             toolbar2: 'formatselect | bold italic underline | bullist numlist  | link charmap | template code ',
//             save_enablewhendirty: true,
//             templates: [
//               { title: '15 weeks list', content: '<ol><li>A systematic and orderly list of activities and/or events that will comprise the total allotted time for the course. The activities, whether based on units or topics, should correspond to the number of weeks of instruction. The 15th week is the final exam period.<li><li><li><li><li><li><li><li><li><li><li><li><li><li>Final Exam Week</ol>' },
//               { title: '15 weeks with chapters', content: '<ol><li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Chapter<li>Final Exam Week</ol>' }
//             ],
//             textpattern_patterns: [
//               { start: '#', format: 'h1' },
//               { start: '##', format: 'h2' },
//               { start: '###', format: 'h3' },
//               { start: '####', format: 'h4' },
//               { start: '#####', format: 'h5' },
//               { start: '######', format: 'h6' },
//               { start: '1. ', cmd: 'InsertOrderedList' },
//               { start: '- ', cmd: 'InsertUnorderedList' }
//             ],
//             setup: function (editor) {
//               editor.addButton('savesyllabus', {
//                 text: 'Save Syllabus',
//                 onclick: function () {
//                   savetodb();
//                 }
//               });
//             }

//           });

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................