Trix Custom Toolbar
How do I make an trix custom toolbar?
What is a trix custom toolbar? How do you make a trix custom toolbar? This script and codes were developed by Travis Arnold on 03 September 2022, Saturday.
Trix Custom Toolbar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Trix Custom Toolbar</title> <link rel='stylesheet prefetch' href='https://rawgit.com/basecamp/trix/master/dist/trix.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="trix-toolbar" class="toolbar"> <button type="button" data-format="bold">Bold</button> <button type="button" data-format="italic">Italic</button> <button type="button" data-format="strike">Strike</button> <button type="button" data-format="quote">Quote</button> <button type="button" data-format="code">Code</button> <button type="button" data-format="bullet">Unordered List</button> <button type="button" data-format="number">Ordered List</button> <button type="button" data-format="outdent">Outdent</button> <button type="button" data-format="indent">Indent</button>
</div>
<trix-editor id="trix-editor" class="editor" input="editor" toolbar="trix-toolbar"></trix-editor>
<input id="editor" value="<b>Edit me</b>" type="hidden" name="content"> <script src='https://rawgit.com/basecamp/trix/master/dist/trix.js'></script> <script src="js/index.js"></script>
</body>
</html>
Trix Custom Toolbar - Script Codes CSS Codes
.toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 4px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #D9DEE0; border-bottom: 0;
}
.toolbar > button { margin: 4px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; border: 1px solid #D9DEE0; background: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor { height: 240px; overflow: auto; border: 1px solid #D9DEE0; border-radius: 0; font-family: Helvetica, sans-serif;
}
Trix Custom Toolbar - Script Codes JS Codes
'use strict';
// Need to look into custom buttons: https://github.com/basecamp/trix/issues/133#issuecomment-164948368
var trix = document.getElementById('trix-editor');
var dataFormats = document.querySelectorAll('[data-format]');
function formatText(format) { var editor = trix.editor; var currentAttributes = editor.composition.currentAttributes; if (format === 'indent') { if (!currentAttributes['quote']) { editor.activateAttribute('quote'); } else { editor.increaseIndentationLevel(); } return; } else if (format === 'outdent') { editor.decreaseIndentationLevel(); return; } if (currentAttributes[format]) { editor.deactivateAttribute(format); } else { editor.activateAttribute(format); }
}
function handleMouseDown(e) { e.preventDefault(); formatText(this.getAttribute('data-format'));
}
for (var i = dataFormats.length; i--;) { dataFormats[i].addEventListener('mousedown', handleMouseDown);
}
Developer | Travis Arnold |
Username | souporserious |
Uploaded | September 03, 2022 |
Rating | 3 |
Size | 3,356 Kb |
Views | 62,744 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Parallax Mouse Move | 2,565 Kb |
Animated heading using css and javascript | 3,516 Kb |
Hamburglar | 3,457 Kb |
Offset Animation Mixin | 3,382 Kb |
React Media Player Demo | 3,798 Kb |
React Checkbox MultiSelect | 6,915 Kb |
React Paper Ripple | 5,312 Kb |
React Measure Demo | 3,718 Kb |
Instagram Style HTML5 Video Player | 3,902 Kb |
Simplistic WYSIWYG Editor | 3,740 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Test | Dviate | 2,668 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Nice textured background | Hans | 2,659 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!