Skip to content
Laravel Nova Tiptap Field
Vue PHP JavaScript CSS
Branch: master
Clone or download
Latest commit 72576f5 Oct 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Issue #8 - can't add a link Oct 9, 2019
readme-images readme and new images Oct 11, 2018
resources Issue #8 - can't add a link Oct 9, 2019
src update to work with vue-tiptap 1.x Feb 9, 2019
.gitignore gitignore log files Oct 16, 2018
LICENCE Update LICENCE Jan 19, 2019
Readme.md Change heyscrumpy to scrumpy in Readme May 25, 2019
composer.json changed composer name Oct 9, 2018
package.json Fixed saving but and started on tables Jun 30, 2019
webpack.mix.js Initial commit. Oct 9, 2018

Readme.md

Laravel Nova Tiptap Editor Field

A Laravel Nova implementation of the tiptap editor for Vue.js by @scrumpy.

Installation

Install via composer:

composer require manogi/nova-tiptap

Usage with default settings:

Tiptap::make('FieldName')

This will give you just the bold and italic buttons.

You will also have to add this use statement to the top of the file:

use Manogi\Tiptap\Tiptap;

Usage with your selection of buttons:

Tiptap::make('FieldName')
  ->buttons([
      'heading',
      'italic',
      'bold',
      'code',
      'link',
      'strike',
      'underline',
      'bullet_list',
      'ordered_list',
      'code_block',
      'blockquote',
  ])
  ->headingLevels(6),

When just passing the string 'heading' you will have H1, H2 and H3 to choose from. You can set the level of headings by using for example headingLevels(6) which will give you H1 through H6.

Note on the old way of setting heading levels

In older versions you could set the level of headings by using the object style notation like this: 'heading' => 6, This is still working, but is deprecated. It will be removed in the next minor version.

The two different "code" buttons

'code' is inline code (like <code></code>) while 'code_block' will give you <pre><code></code></pre>.

Screenshots

The tiptap editor with all the buttons:

the tiptap editor with all the buttons

The idea is that the editor can be themed together with the rest of Nova - here it is looking differently just by using the Laravel Nova Stripe Theme:

the tiptap editor with all the buttons

Roadmap

  • Add the option to upload or choose images and add them to to the content.
  • Easy option to style the text inside the editor.

Licence

The MIT License (MIT). Please see License File for more information.

You can’t perform that action at this time.