vue-publisher
v1.5.0
Published
A content editing toolset for Vue.js
Downloads
33
Readme
vue-publisher 🗞️
A pre-packaged zero-config collection of amazing tools for managing content.
This package includes:
- TipTap
- Reader (Original)
- ListEditor (Original)
Please go support tha packages' respective creators.
Install
Get vue-publisher as an NPM package:
npm i -S vue-publisher
Usage
The goal here is to keep everything as simple as possible, in fact, with just 2 components you can have a publisher and a reader to render your finished article from its native JSON form.
<template>
<div id="app">
<Publisher v-model="result" />
<Reader v-model="result" />
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Publisher, Reader } from 'vue-publisher';
export default Vue.extend({
name: 'ExampleApp',
data(){
return {
result: {},
}
},
components: {
Publisher,
Reader,
}
});
</script>
Customization
These components provide useful CSS classes to customize the look of your editor. The class structure is as follows:
// The editor's internal container
.editor {
// The commands container
.commands {
// The single command button
button {
background-color: red;
// A button when its property is activated
&.is-active {
background-color: green;
}
}
}
// The editor itself
.content {
color: black;
}
}
// The external component
.reader {
// The content
.content {
color: black;
}
}
Conclusion
This package is just for a quick implementation of the TipTap editor for Vue.js.
So, please, feel free to check them!
Mini-project by Mattia Sinisi