Paper Wysiwyg

A minimalistic yet powerful VueJS 2 WYSIWYG, built on TipTap 2 and inspired by Outline wiki

Demo

See Paper WYSIWYG in action

Install

npm install @dvwd/paper-wysiwyg

Dependencies

• VueJS 2.X
• Axios (for image uploads) @todo make optional

Usage

In a component.

<template>
  <paper-wysiwyg v-model="content"></paper-wysiwyg>
</template>
<script>
  import PaperWysiwyg from "@dvwd/paper-wysiwyg"

  export default {
    components: { PaperWysiwyg },
    data() {
      return {
        content: '<p>Hello world</p>',
      }
   }
}
</script>

Styling

Import the CSS

@import '@dvwd/paper-wysiwyg/dist/styles.css';

Overriding styles

Most colours and styles you may want to change are CSS variables, have a look through src/styles, specifically _settings.scss.

Eg. Change the bubble menu background:

::root {
  --paper-wysiwyg-color-bubble-bg: #000;
}

Alternatively import the SCSS

@import '../node_modules/@dvwd/paper-wysiwyg/src/styles/all';

Image uploads

To enable uploads, you just have to add a upload-url prop. Eg

   <paper-wysiwyg upload-url="/upload/image"></paper-wysiwyg>

The upload route should return JSON array of saved file paths.

Once uploading is enabled, you can

• Drag and drop an image
• Paste an image from the clipboard
• Click + and browse for an image

Example of a basic laravel backend route

<?php
Route::post('/upload/image', function(Request $request) {
    $files = [];
    
    if ($request->hasFile('images')) {
        $uploadedFiles = $request->file('images');
      
        foreach ($uploadedFiles as $file) {
            if (! $file->isValid()) {
              continue;
            }
            
            $name = uniqid().'_'.trim($file->getClientOriginalName());           
            $file->move(Storage::path('public/'.$path), $name);            
            $files[] = Storage::url($path.'/'.$name);
        }
    }
    
    return $files;
});

Building

Docker

If node is not installed but docker is, just use the helper scripts to run npm. If node is installed, just remove ./node-docker.sh from below commands.

Install dependencies

./node-docker.sh npm install

Build package (dist)

./node-docker.sh npm run build

Build demo

./node-docker.sh npm run build && ./node-docker.sh npm run build:demo

Who made this happen

• Created by Jeremy Graham
• Everyone who contributed to TipTap and its plugins
• Authors of Outline editor
• Table component by Carl Bradshaw
• Skills provided by Doghouse Agency and District CMS