Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
sango-quill-html-edit-button
Advanced tools
Readme
Quill.js Module which allows you to quickly view/edit the HTML in the editor
yarn add quill-html-edit-button
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import htmlEditButton from "quill-html-edit-button";
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
"modules/htmlEditButton": htmlEditButton
})
const quill = new Quill(editor, {
// ...
modules: {
// ...
htmlEditButton: {}
}
});
Due to Quill's implementation, typescript integration is not trivial:
src/demos/typescript/demo.ts
setup.js
is to use the library without types (as they aren't implemented with quill modules).tsconfig.json
needs the following properties, to prevent errors: "compilerOptions": {
"allowJs": true,
"checkJs": false
}
<script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
<script src="https://unpkg.com/quill-html-edit-button@2.1.0/dist/quill.htmlEditButton.min.js"></script>
<script>
Quill.register("modules/htmlEditButton", htmlEditButton);
const quill = new Quill(editor, {
// ...
modules: {
// ...
htmlEditButton: {}
}
});
</script>
modules: {
// ...
htmlEditButton: {
debug: true, // logging, default:false
msg: "Edit the content in HTML format", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor's contents will be replaced
okText: "Ok", // Text to display in the OK button, default: Ok,
cancelText: "Cancel", // Text to display in the cancel button, default: Cancel
buttonHTML: "<>", // Text to display in the toolbar button, default: <>
buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
editorModules: {} // The default mod
}
}
By default syntax highlighting is off, if you want to enable it use syntax: true
in the options (as shown above) and make sure you add the following script tags:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/github.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script
charset="UTF-8"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/xml.min.js"
></script>
Alternatively, include these scripts in your package bundler, as long as highlightjs is available in the global space at window.hljs
.
The editor itself is actually a Quill Editor instance too! So you can pass in custom modules like this:
// options
htmlEditButton: {
// Flags
debug?: boolean; // default: false
syntax?: boolean; // default: false
// Overlay
closeOnClickOverlay: boolean; // default: true
prependSelector: string; // default: null
// Labels
buttonHTML?: string; // default: "<>"
buttonTitle?: string; // default: "Show HTML source"
msg: string; // default: 'Edit HTML here, when you click "OK" the quill editor\'s contents will be replaced'
okText: string; // default: "Ok"
cancelText: string; // default: "Cancel"
// Quill Modules (for the HTML editor)
editorModules?: { // default: null
// Any modules here will be declared in HTML quill editor instance
keyboard: {
bindings: {
custom: {
key: 'a',
handler: function(range, context) {
console.log('A KEY PRESSED!');
}
},
},
},
},
},
This project is based on quill-image-uploader, thanks mate!
FAQs
A Quill rich text editor Module which adds an html edit button to the quill editor
The npm package sango-quill-html-edit-button receives a total of 7 weekly downloads. As such, sango-quill-html-edit-button popularity was classified as not popular.
We found that sango-quill-html-edit-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.