diff --git a/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/Open tinymce editor in modal for journal fields.js b/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/Open tinymce editor in modal for journal fields.js new file mode 100644 index 0000000000..e54b205de7 --- /dev/null +++ b/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/Open tinymce editor in modal for journal fields.js @@ -0,0 +1,231 @@ +javascript:!function(){const e={attachmentCanPopup:"true",attachmentCanView:"true",canReadDbImage:!0,canReadDbVideo:!0,allowedExtensions:"",videoExtensions:"webm|mov|swf|avi|mp4",convert_urls:!1,custom_elements:"sn-toc,~sn-mention",link_default_target:"",enable_media_sites:"youtube.com,player.vimeo.com,vimeo.com,players.brightcove.net,brightcove.net",extended_valid_elements:"now-illustration-custom[token-id|src|alt|width|height],sn-toc,sn-mention[class|table|sysid]",font_family_formats:"Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;",language:"en",plugins:"powerpaste accordion advlist align_listitems anchor autolink charmap codemirror directionality editimage emoticons fullscreen help image insertdatetime link lists media nonbreaking pagebreak preview readonlynoborder searchreplace table visualblocks visualchars",powerpaste_html_import:"clean",powerpaste_word_import:"prompt",powerpaste_clean_filtered_inline_elements:"strong, b",relative_urls:!0,remove_script_host:!0,contextmenu:"link image table",toolbar:["bold italic underline undo redo | fontfamily fontsize table | forecolor backcolor link unlink | image media code | alignleft aligncenter alignright | bullist numlist fullscreen"],menubar:!1,menu:{file:{title:"File",items:"newdocument restoredraft | preview | export print | deleteallconversations"},edit:{title:"Edit",items:"undo redo | cut copy paste pastetext | selectall | searchreplace"},view:{title:"View",items:"code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments"},insert:{title:"Insert",items:"image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime"},format:{title:"Format",items:"bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat"},tools:{title:"Tools",items:"spellchecker spellcheckerlanguage | a11ycheck code wordcount"},table:{title:"Table",items:"inserttable | cell row column | advtablesort | tableprops deletetable"},help:{title:"Help",items:"help"}},style_formats:[{title:"Headings",items:[{title:"Heading 1",format:"h1"},{title:"Heading 2",format:"h2"},{title:"Heading 3",format:"h3"},{title:"Heading 4",format:"h4"},{title:"Heading 5",format:"h5"},{title:"Heading 6",format:"h6"}]},{title:"Inline",items:[{title:"Bold",format:"bold"},{title:"Italic",format:"italic"},{title:"Underline",format:"underline"},{title:"Strikethrough",format:"strikethrough"},{title:"Superscript",format:"superscript"},{title:"Subscript",format:"subscript"},{title:"Code",format:"code"}]},{title:"Blocks",items:[{title:"Paragraph",format:"p"},{title:"Blockquote",format:"blockquote"},{title:"Div",format:"div"},{title:"Pre",format:"pre"}]},{title:"Align",items:[{title:"Left",format:"alignleft"},{title:"Center",format:"aligncenter"},{title:"Right",format:"alignright"},{title:"Justify",format:"alignjustify"}]}],text_patterns:!1,promotion:!1,help_tabs:["shortcuts","keyboardnav","versions"],automatic_uploads:!1,allow_script_urls:!1},t=window.gsft_main?window.gsft_main.document:top.document;if(t.getElementById("drc-overlay"))return;(i=>{const a=()=>{if(void 0===window.gsft_main.setupTinymceField){const t=setInterval((()=>{const i=window.gsft_main.setupTinymceField;"function"==typeof i&&(clearInterval(t),i("iidee",e))}),100)}else window.gsft_main.setupTinymceField("iidee",e)};if(t.getElementById("tinymcedeps"))a();else{const e=t.createElement("script");e.id="tinymcedeps",e.src="/scripts/tinymce_default/js_includes_tinymce.jsx?sysparm_substitute=false",e.onload=()=>{a()},window.gsft_main.document.head.appendChild(e)}const n=t.createElement("div");n.style.overflowY="auto",n.style.overflowX="hidden",n.style.maxHeight="60vh";const l=t.createElement("textarea");l.id="iidee";t.createElement("div");const o=window.gsft_main.g_form,s=o.elements.filter((e=>"journal_input"===e.type));n.appendChild(l);const r=t.createElement("div");s.forEach((e=>{const i=t.createElement("button");i.textContent=e.fieldName,r.appendChild(i),i.onclick=()=>{const t=window.gsft_main.tinymce.get("iidee").getContent();o.setValue(e.fieldName,`[code]${t}[/code]`)}})),n.appendChild(r),i.appendChild(n)})((()=>{const e=t.createElement("div");e.id="drc-overlay",e.style.position="fixed",e.style.top=0,e.style.left=0,e.style.width="100vw",e.style.height="100vh",e.style.backgroundColor="rgba(0, 0, 0, 0.6)",e.style.zIndex=9999,e.style.display="flex",e.style.justifyContent="center",e.style.alignItems="center";const i=t.createElement("div");i.id="modal-container",i.style.background="#fff",i.style.padding="20px",i.style.borderRadius="8px",i.style.boxShadow="0 0 10px rgba(0,0,0,0.3)",i.style.maxWidth="1000px",i.style.textAlign="center",i.style.maxHeight="70vh",i.style.position="absolute";const a=t.createElement("div");a.style.cursor="move",a.style.height="20px",a.style.marginBottom="10px",a.style.background="rgba(100, 100, 100, 0.3)",a.style.borderRadius="8px";const n=((e,i)=>{let a=!1,n=0,l=0;const o=e=>{a&&(i.style.left=e.clientX-n+"px",i.style.top=e.clientY-l+"px")},s=()=>{a=!1,t.body.style.userSelect=""};e.addEventListener("mousedown",(e=>{a=!0,n=e.clientX-i.offsetLeft,l=e.clientY-i.offsetTop,t.body.style.userSelect="none"})),t.addEventListener("mousemove",o),t.addEventListener("mouseup",s);const r=[];return r.push((()=>{t.removeEventListener("mousemove",o),t.removeEventListener("mouseup",s)})),r})(a,i);i.append(a),e.appendChild(i),t.body.appendChild(e);return e.addEventListener("click",(a=>{i.contains(a.target)||(t.body.removeChild(e),n.forEach((e=>e())))})),i})())}(); + +/* +(function () { + const tinyMceConfig = { + attachmentCanPopup: "true", + attachmentCanView: "true", + canReadDbImage: true, + canReadDbVideo: true, + allowedExtensions: "", + videoExtensions: "webm|mov|swf|avi|mp4", + convert_urls: false, + custom_elements: "sn-toc,~sn-mention", + link_default_target: "", + enable_media_sites: "youtube.com,player.vimeo.com,vimeo.com,players.brightcove.net,brightcove.net", + extended_valid_elements: "now-illustration-custom[token-id|src|alt|width|height],sn-toc,sn-mention[class|table|sysid]", + font_family_formats: "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;", + language: "en", + plugins: "powerpaste accordion advlist align_listitems anchor autolink charmap codemirror directionality editimage emoticons fullscreen help image insertdatetime link lists media nonbreaking pagebreak preview readonlynoborder searchreplace table visualblocks visualchars", + powerpaste_html_import: "clean", + powerpaste_word_import: "prompt", + powerpaste_clean_filtered_inline_elements: "strong, b", + relative_urls: true, + remove_script_host: true, + contextmenu: "link image table", + toolbar: [ + "bold italic underline undo redo | fontfamily fontsize table | forecolor backcolor link unlink | image media code | alignleft aligncenter alignright | bullist numlist fullscreen" + ], + menubar: false, + menu: { + file: { title: "File", items: "newdocument restoredraft | preview | export print | deleteallconversations" }, + edit: { title: "Edit", items: "undo redo | cut copy paste pastetext | selectall | searchreplace" }, + view: { title: "View", items: "code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments" }, + insert: { title: "Insert", items: "image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime" }, + format: { title: "Format", items: "bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat" }, + tools: { title: "Tools", items: "spellchecker spellcheckerlanguage | a11ycheck code wordcount" }, + table: { title: "Table", items: "inserttable | cell row column | advtablesort | tableprops deletetable" }, + help: { title: "Help", items: "help" } + }, + style_formats: [ + { + title: "Headings", + items: [ + { title: "Heading 1", format: "h1" }, + { title: "Heading 2", format: "h2" }, + { title: "Heading 3", format: "h3" }, + { title: "Heading 4", format: "h4" }, + { title: "Heading 5", format: "h5" }, + { title: "Heading 6", format: "h6" } + ] + }, + { + title: "Inline", + items: [ + { title: "Bold", format: "bold" }, + { title: "Italic", format: "italic" }, + { title: "Underline", format: "underline" }, + { title: "Strikethrough", format: "strikethrough" }, + { title: "Superscript", format: "superscript" }, + { title: "Subscript", format: "subscript" }, + { title: "Code", format: "code" } + ] + }, + { + title: "Blocks", + items: [ + { title: "Paragraph", format: "p" }, + { title: "Blockquote", format: "blockquote" }, + { title: "Div", format: "div" }, + { title: "Pre", format: "pre" } + ] + }, + { + title: "Align", + items: [ + { title: "Left", format: "alignleft" }, + { title: "Center", format: "aligncenter" }, + { title: "Right", format: "alignright" }, + { title: "Justify", format: "alignjustify" } + ] + } + ], + text_patterns: false, + promotion: false, + help_tabs: ["shortcuts", "keyboardnav", "versions"], + automatic_uploads: false, + allow_script_urls: false + }; + + const makeModalMovable = (headerElement, modalElement) => { + let isDragging = false, + offsetX = 0, + offsetY = 0; + + const mouseMoveHandler = (event) => { + if (isDragging) { + modalElement.style.left = `${event.clientX - offsetX}px` + modalElement.style.top = `${event.clientY - offsetY}px` + } + } + const mouseUpHandler = () => { + isDragging = false; + document.body.style.userSelect = ""; + }; + const mouseDownHandler = (e) => { + isDragging = true; + offsetX = e.clientX - modalElement.offsetLeft; + offsetY = e.clientY - modalElement.offsetTop; + document.body.style.userSelect = "none"; + }; + + headerElement.addEventListener("mousedown", mouseDownHandler); + document.addEventListener("mousemove", mouseMoveHandler); + document.addEventListener("mouseup", mouseUpHandler); + + const cleanupHandlers = []; + cleanupHandlers.push(() => { + document.removeEventListener('mousemove', mouseMoveHandler); + document.removeEventListener('mouseup', mouseUpHandler); + }); + + return cleanupHandlers; + } + + const createOverlay = () => { + const overlay = document.createElement("div") + overlay.id = "drc-overlay"; + overlay.style.position = "fixed"; + overlay.style.top = 0; + overlay.style.left = 0; + overlay.style.width = "100vw"; + overlay.style.height = "100vh"; + overlay.style.backgroundColor = "rgba(0, 0, 0, 0.6)"; + overlay.style.zIndex = 9999; + overlay.style.display = "flex"; + overlay.style.justifyContent = "center"; + overlay.style.alignItems = "center"; + + const modalContainer = document.createElement("div"); + modalContainer.id = "modal-container"; + modalContainer.style.background = "#fff"; + modalContainer.style.padding = "20px"; + modalContainer.style.borderRadius = "8px"; + modalContainer.style.boxShadow = "0 0 10px rgba(0,0,0,0.3)"; + modalContainer.style.maxWidth = "1000px"; + modalContainer.style.textAlign = "center"; + modalContainer.style.maxHeight = "70vh"; + modalContainer.style.position = 'absolute'; + + const modalHeader = document.createElement("div"); + modalHeader.style.cursor = "move"; + modalHeader.style.height = "20px"; + modalHeader.style.marginBottom = "10px"; + modalHeader.style.background = "rgba(100, 100, 100, 0.3)"; + modalHeader.style.borderRadius = "8px"; + + const cleanupHandlers = makeModalMovable(modalHeader, modalContainer); + modalContainer.append(modalHeader) + overlay.appendChild(modalContainer); + document.body.appendChild(overlay); + + const onOverlayClick = (event) => { + if (!modalContainer.contains(event.target)) { + document.body.removeChild(overlay); + cleanupHandlers.forEach(fn => fn()); + } + } + overlay.addEventListener("click", onOverlayClick); + + return modalContainer; + } + + const addModalContent = (modalContainer) => { + const createEditor = () => { + if (typeof window.gsft_main.setupTinymceField === 'undefined') { + const interval = setInterval(() => { + const fn = window.gsft_main.setupTinymceField; + if (typeof fn === 'function') { + clearInterval(interval); + fn("iidee", tinyMceConfig); + } + }, 100); + } else { + window.gsft_main.setupTinymceField("iidee", tinyMceConfig); + } + + } + if (!document.getElementById("tinymcedeps")) { + const tinymceScript = document.createElement('script'); + tinymceScript.id = "tinymcedeps" + tinymceScript.src = '/scripts/tinymce_default/js_includes_tinymce.jsx?sysparm_substitute=false'; + tinymceScript.onload = () => { + createEditor() + }; + window.gsft_main.document.head.appendChild(tinymceScript) + } else { + createEditor() + } + + const modalContent = document.createElement("div"); + modalContent.style.overflowY = "auto"; + modalContent.style.overflowX = "hidden"; + modalContent.style.maxHeight = "60vh"; + const textArea = document.createElement("textarea"); + textArea.id = "iidee"; + const buttons = document.createElement("div"); + const g_form = window.gsft_main.g_form; + const journalInputs = g_form.elements.filter(e => e.type === "journal_input"); + + modalContent.appendChild(textArea) + const buttonContainer = document.createElement("div"); + journalInputs.forEach(journalInput => { + const button = document.createElement("button"); + button.textContent = journalInput.fieldName; + buttonContainer.appendChild(button) + button.onclick = () => { + const content = window.gsft_main.tinymce.get('iidee').getContent(); + g_form.setValue(journalInput.fieldName, `[code]${content}[/code]`) + } + }); + modalContent.appendChild(buttonContainer) + modalContainer.appendChild(modalContent) + } + const document = window.gsft_main ? window.gsft_main.document : top.document; + + if (document.getElementById("drc-overlay")) return; + + const modalContainer = createOverlay(); + addModalContent(modalContainer); +})(); +/* diff --git a/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/README.md b/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/README.md new file mode 100644 index 0000000000..3b39eea614 --- /dev/null +++ b/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/README.md @@ -0,0 +1,22 @@ +# tinymce journal editor Bookmarklet Modal + +This script is a bookmarklet that injects a draggable modal into a form with a tiny mce editor and buttons to insert the html to the journal fields on the form. + +The dependency for tinymce is loaded from the instance itself and a html field does not need to be present on the form. + +--- + +## 📸 Screenshots + +### Modal Overview +![Modal Overview](image.png) + +--- + +## 🔧 How to Use + +1. **Copy the minified script** on the first line of the *Open tinymce editor in modal for journal fields.js* file +2. **Create a bookmark** in your browser. +3. Paste the script into the bookmark's URL field. +4. Navigate to a ServiceNow form and click the bookmarklet. +5. Input formatted text into editor and click a button from the bottom to set the html to the corresponding journal field with the [code] tags diff --git a/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/image.png b/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/image.png new file mode 100644 index 0000000000..3e39b58c3f Binary files /dev/null and b/Specialized Areas/Browser Bookmarklets/Open tinymce for journal/image.png differ