Skip to content

Instantly share code, notes, and snippets.

@d0ruk

d0ruk/README.md

Last active November 28, 2023 11:04
Show Gist options
  • Save d0ruk/c5bdf3f64fb160766ae954d3aae13f1a to your computer and use it in GitHub Desktop.
Save d0ruk/c5bdf3f64fb160766ae954d3aae13f1a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.css
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
body,
div.container-fluid {
background-color: lavenderblush;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="https://unpkg.com/[email protected]/tinymce.min.js"></script>
<script src="https://unpkg.com/[email protected]/prism.js"></script>
<title>editor</title>
</head>
<body>
<div class="container-fluid mt-1">
<div class="row">
<div class="col-sm-10 col-md-8 ms-auto">
<textarea></textarea>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
tinymce.init({
selector: "textarea",
height: "99vh",
plugins:
"wordcount image media code fullpage imagetools link lists advlist autolink autosave codesample table preview insertdatetime nonbreaking pagebreak paste visualchars textpattern print searchreplace visualblocks",
menu: {
file: {
title: "File",
items: "newdocument restoredraft | preview print ",
},
edit: {
title: "Edit",
items: "undo redo | cut copy paste | selectall searchreplace",
},
view: {
title: "View",
items:
"code | visualaid visualchars visualblocks | spellchecker | preview fullscreen",
},
insert: {
title: "Insert",
items:
"image link media template codesample | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime",
},
format: {
title: "Format",
items:
"bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat",
},
tools: {
title: "Tools",
items: "spellchecker spellcheckerlanguage | code wordcount",
},
table: {
title: "Table",
items:
"inserttable inserttabledialog | cell row column | tableprops deletetable",
},
},
toolbar:
"undo redo searchreplace print | formatting colors link unlink | table lists alignment blockstyles | image codesample wordcount more",
toolbar_groups: {
formatting: {
icon: "bold",
tooltip: "Formatting",
items:
"bold italic underline | superscript subscript strikethrough blockquote",
},
colors: {
icon: "color-picker",
tooltip: "Colors",
items: "forecolor backcolor hilitecolor",
},
alignment: {
icon: "align-justify",
tooltip: "Alignment",
items: "alignleft aligncenter alignright alignjustify lineheight",
},
blockstyles: {
icon: "visualblocks",
tooltip: "Block styles",
items: "styleselect pagebreak",
},
lists: {
icon: "list-bull-default",
tooltip: "Lists",
items: "numlist bullist",
},
more: {
icon: "chevron-down",
tooltip: "Moar",
items: "preview visualchars restoredraft fullpage code",
},
},
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: "#", format: "h1" },
{ start: "##", format: "h2" },
{ start: "###", format: "h3" },
{ start: "####", format: "h4" },
{ start: "#####", format: "h5" },
{ start: "######", format: "h6" },
{ start: "* ", cmd: "InsertUnorderedList" },
{ start: "- ", cmd: "InsertUnorderedList" },
{
start: "1. ",
cmd: "InsertOrderedList",
value: { "list-style-type": "decimal" },
},
{
start: "1) ",
cmd: "InsertOrderedList",
value: { "list-style-type": "decimal" },
},
{
start: "a. ",
cmd: "InsertOrderedList",
value: { "list-style-type": "lower-alpha" },
},
{
start: "a) ",
cmd: "InsertOrderedList",
value: { "list-style-type": "lower-alpha" },
},
{
start: "i. ",
cmd: "InsertOrderedList",
value: { "list-style-type": "lower-roman" },
},
{
start: "i) ",
cmd: "InsertOrderedList",
value: { "list-style-type": "lower-roman" },
},
{ start: "---", replacement: "<hr/>" },
{ start: "(c)", replacement: "©" },
],
fix_list_elements: true,
keep_styles: false,
resize: false,
statusbar: false,
nonbreaking_force_tab: true,
paste_block_drop: false,
paste_as_text: true,
// paste_data_images: true,
// table_use_colgroups: true,
// theme: "mobile",
// elementpath: false,
// default_link_target: "_blank",
// link_assume_external_targets: "https",
content_css: "dark",
skin: "oxide-dark",
image_title: true,
automatic_uploads: true,
image_advtab: true,
link_context_toolbar: true,
link_default_protocol: "https",
link_list: [
{ title: "Google", value: "https://www.google.com" },
{
title: "TinyMCE",
menu: [
{
title: "Documentation",
value: "https://www.tiny.cloud/docs/",
},
{ title: "GitHub", value: "https://github.com/tinymce/" },
],
},
],
link_quicklink: true,
autosave_interval: "10s",
autosave_restore_when_empty: true,
autosave_retention: "1440m",
codesample_languages: [
{ text: "HTML/XML", value: "markup" },
{ text: "JavaScript", value: "javascript" },
{ text: "CSS", value: "css" },
{ text: "PHP", value: "php" },
{ text: "Ruby", value: "ruby" },
{ text: "Python", value: "python" },
{ text: "Java", value: "java" },
{ text: "C", value: "c" },
{ text: "C#", value: "csharp" },
{ text: "C++", value: "cpp" },
],
codesample_global_prismjs: true,
branding: false,
contextmenu_avoid_overlap: "*",
draggable_modal: true,
file_picker_types: "image media",
file_picker_callback: function (cb, value, meta) {
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*,audio/*,video/*");
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
/*
Note: Now we need to register the blob in TinyMCEs image blob
registry. In the next release this part hopefully won't be
necessary, as we are looking to handle it internally.
*/
var id = "blobid" + new Date().getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(",")[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
fullpage_default_doctype: "<!DOCTYPE html>",
fullpage_default_encoding: "UTF-8",
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment