A minimalistic yet powerful VueJS 2 WYSIWYG, built on TipTap 2 and inspired by Outline wiki
npm install @dvwd/paper-wysiwyg
- VueJS 2.X
- Axios (for image uploads)
@todo make optional
<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>
@import '@dvwd/paper-wysiwyg/dist/styles.css';
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;
}
@import '../node_modules/@dvwd/paper-wysiwyg/src/styles/all';
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.
- Drag and drop an image
- Paste an image from the clipboard
- Click + and browse for an image
<?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;
});
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.
./node-docker.sh npm install
./node-docker.sh npm run build
./node-docker.sh npm run build && ./node-docker.sh npm run build:demo
- 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