https://github.com/tylerecouture/summernote-add-text-tags

A summernote extension that adds additional text-level semantic elements (html tags)
https://github.com/tylerecouture/summernote-add-text-tags

Last synced: about 1 month ago
JSON representation

A summernote extension that adds additional text-level semantic elements (html tags)

• Host: GitHub
• URL: https://github.com/tylerecouture/summernote-add-text-tags
• Owner: tylerecouture
• License: mit
• Created: 2017-09-03T00:35:50.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-18T22:00:08.000Z (over 6 years ago)
• Last Synced: 2024-02-15T03:34:22.294Z (10 months ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 5
• Watchers: 3
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-summernote - summernote-add-text-tags

README

        
# Summernote Extension: Additional Text Tags

A [Summernote](http://summernote.org/) extension that adds additional text-level semantic elements (html tags) that are already provided with styling by Bootstrap 3 and 4.

A backport for older Summernote version (0.6.16) is available in a separate branch.

### Additional tags

* [Inline text elements](https://v4-alpha.getbootstrap.com/content/typography/#inline-text-elements):

  * `` highlighted text

  * `` fine print

  * `` indicate text added to a document

  * `` indicating text deleted from a document


* [Inline code elements](https://v4-alpha.getbootstrap.com/content/code/)

  * `` for inline code snippets

  * `` for sample output

  * `` for indicating user input.

  * `` for indicating variables.  


### Usage

1. Include the js and css

2. add `add-text-tags` to your toolbar in the `style` or `font` group:

        $('#summernote').summernote({

            toolbar: [

                ...

                ['style', ['bold', 'italic', 'underline', 'add-text-tags', 'clear']]

            ]

        });

### Example

See Example/example.html or the [fiddle here](https://jsfiddle.net/43Tesseracts/y4t0zep2/).

### Limitations

* This extension doesn't use Summernote's built in parser, but it can handle some basic cross-node insertions.

* The elements won't toggle on and off, however they will clear with Summernote's `Remove Font Style` button (rubber icon).