@mindfiredigital/textigniter-web-component NPM

The @mindfiredigital/textigniter-web-component is a tool that allows developers to integrate TextIgniter.

Live Demo

Features

Bold: When you apply bold formatting to text, it makes the selected text appear thicker and more prominent.
Italic: Italic text is slanted to the right.
Underline: Underlining text places a horizontal line beneath it.
Subscript: Subscript lowers the selected text below the baseline.
Superscript: Superscript raises the selected text above the baseline.
Left Align: This feature aligns text to the left margin, creating a straight left edge.
Center Align: Center alignment places text in the middle of the page or text box.
Right Align: Text is aligned to the right margin, creating a straight right edge..
Bullet List: Bullet lists present information as a series of items with bullets.
Numbered List: Numbered lists provide a sequential order to items.
Insert Table: This feature allows you to create tables to organize data.
Insert Layout: This feature allows you to create Layout to organize data.
Heading: Headings are typically used to divide a document into sections or chapters. They are usually styled differently, such as with larger text or bold formatting.
Hyperlink: A hyperlink is a clickable link that connects to a webpage or another location within the document.
Image: This feature allows you to insert images or graphics into your document to enhance its visual appeal or convey additional information.
GETHTML: This feature allows you to get HTML for the data of editor.
GETJSON: This feature allows you to get JSON for the data of editor.
Custom Height: This feature allows you to set height of editor.

Installation

To install the @mindfiredigital/textigniter-web-component npm package in your project, use the following command:

npm install @mindfiredigital/textigniter-web-component

Getting Started

Initialization: Initialize the TextIgniter in your project.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rich Text Editor</title>
  <meta name="description" content="New features implemented.">
  <style>
  </style>
</head>

<body>
  <div id="editor-container"></div>
  <!-- <link rel="stylesheet" href="dist/index.css"> -->
  <!-- <script src="dist/index.js"></script> -->
  <script type="module" src="node_modules/@mindfiredigital/textigniter-web-component/dist/index.js"></script>
  <text-igniter config='{
    "showToolbar": true,
    "features": [
      "bold",
      "italic",
      "underline",
      "hyperlink",
      "fontFamily",
      "fontSize",
      "alignLeft",
      "alignCenter",
      "alignRight",
      "unorderedList",
      "orderedList",
      "image",
      "fontColor",
      "bgColor",
      "getHtmlContent",
      "loadHtmlContent"
    ]
}
'></text-igniter>
</body>

</html>

Contributing

We welcome contributions from the community. If you'd like to contribute to the textigniter-web-component npm package, please follow our Contributing Guidelines.

License

Licensed under the MIT license.

tsup typescript vite

@mindfiredigital/textigniter-angular @mindfiredigital/textigniter-react

1.0.0

12 months ago

@mindfiredigital/textigniter-web-component v1.0.0