tinymce.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. {% assign id = include.id | default: 'mytextarea' %}
  2. <form method="post">
  3. <textarea id="tinymce-{{ id }}">Hello, <b>Tabler</b>!</textarea>
  4. </form>
  5. {% capture_global scripts %}
  6. <script>
  7. // @formatter:off
  8. document.addEventListener("DOMContentLoaded", function () {
  9. let options = {
  10. selector: '#tinymce-{{ id }}',
  11. height: 300,
  12. menubar: false,
  13. statusbar: false,
  14. plugins: [
  15. 'advlist autolink lists link image charmap print preview anchor',
  16. 'searchreplace visualblocks code fullscreen',
  17. 'insertdatetime media table paste code help wordcount'
  18. ],
  19. toolbar: 'undo redo | formatselect | ' +
  20. 'bold italic backcolor | alignleft aligncenter ' +
  21. 'alignright alignjustify | bullist numlist outdent indent | ' +
  22. 'removeformat',
  23. content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
  24. }
  25. if (localStorage.getItem("tablerTheme") === 'dark') {
  26. options.skin = 'oxide-dark';
  27. options.content_css = 'dark';
  28. }
  29. tinyMCE.init(options);
  30. })
  31. // @formatter:on
  32. </script>
  33. {% endcapture_global %}