https://github.com/MuhammedAlkhudiry/quill-find-replace-module

A module for Quill rich text editor to allow searching/finding words and replacing them.
https://github.com/MuhammedAlkhudiry/quill-find-replace-module

Last synced: 3 months ago
JSON representation

A module for Quill rich text editor to allow searching/finding words and replacing them.

• Host: GitHub
• URL: https://github.com/MuhammedAlkhudiry/quill-find-replace-module
• Owner: MuhammedAlkhudiry
• License: mit
• Created: 2019-08-03T14:57:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-09-02T16:22:19.000Z (over 5 years ago)
• Last Synced: 2024-06-07T13:35:14.480Z (8 months ago)
• Language: JavaScript
• Size: 39.1 KB
• Stars: 16
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-quill - quill-find-replace-module - A module for Quill.js for finding words and replacing them (Uncategorized / Uncategorized)

README

        
#  Quill Find/Replace Module

A module for Quill rich text editor to allow searching/finding words and replacing them.

## Demo

[Demo](https://codepen.io/muhammedalkhudiry/pen/VoMxeK)

## Usage

Download Searcher.js, SearchBlot.js files, then:

JS

```

// import module files

import Searcher from "path/to/Searcher.js";

import SearchedStringBlot from "path/to/SearchBlot.js";

// register them

Quill.register('modules/Searcher', Searcher);

Quill.register(SearchedStringBlot);

// initialize Quill editor

const quill = new Quill('#editor', {

    modules: {

        Searcher: true,

    },

});

```

CSS

* You could choose how the searched word will look, but don't change: display: inline;

```

.ql-searched-string {

    background-color: #f8ff00;

    display: inline;

}

```

## UI

There should be an input and button for every needed functionality:

* Three button for search, replace, replace-all

with IDs: "search", "replace", "replace-all"

* Two input with IDs: "search-input", "replace-input"

#### Example:

```

find

replace

replace all

```

# future plans

* add options

* the module now only support text-only editor, if your editor will include images, then the searcher with not work properly,

see [here](https://github.com/quilljs/quill/issues/2698)

# Contribution

Please, make an [issue](https://github.com/MuhammedAlkhudiry/quill-find-replace-module/issues).

# License

[MIT License](https://rmm5t.mit-license.org/)