vue-pell-editor
vue-pell-editor
Vue wrapper for pell WYSIWYG text editor
Installation
Install via NPM or Yarn:
$ npm install --save vue-pell-editor
# OR
$ yarn add vue-pell-editor
Usage
main.js:
import Vue from 'vue'
import VuePellEditor from 'vue-pell-editor'
Vue.use(VuePellEditor)
example.vue:
<template>
<vue-pell-editor
v-model="editorContent"
:actions="editorOptions"
:content="editorContent"
:placeholder="editorPlaceholder"
:style-with-css="false"
:classes="editorClasses"
default-paragraph-separator="p"
@change="doSomething"
@mounted="doSomethingAfterMounted"
/>
</template>
<script>
export default {
data: () => ({
editorOptions: [
'bold',
'underline',
{
name: 'italic',
result: () => window.pell.exec('italic')
},
{
name: 'custom',
icon: '<b><u><i>C</i></u></b>',
title: 'Custom Action',
result: () => console.log('YOLO')
},
{
name: 'image',
result: () => {
const url = window.prompt('Enter the image URL')
if (url) window.pell.exec('insertImage', ensureHTTP(url))
}
},
{
name: 'link',
result: () => {
const url = window.prompt('Enter the link URL')
if (url) window.pell.exec('createLink', ensureHTTP(url))
}
}
],
editorPlaceholder: 'Write something amazing...',
editorContent: '<div>Predefined Content</div>',
editorClasses: {
actionbar: 'pell-actionbar',
button: 'pell-button',
content: 'pell-content',
selected: 'pell-button-selected'
}
}),
methods: {
doSomething() {
console.log('Hello')
},
doSomethingAfterMounted() {
console.log('Editor mounted')
}
}
}
</script>
For the pell-editor-options have a look at the pell repository.
License
vue-pell-editor is open source and released under the MIT License.
Copyright (c) 2018 Lars Eichler.
PS: You're a happy user of vue-pell-editor? Let me know via Twitter: @cinkon.
Dependencies
@babel/cli: ^7.0.0-beta.44@babel/core: ^7.0.0-beta.44@babel/plugin-proposal-class-properties: ^7.0.0-beta.46@babel/plugin-proposal-object-rest-spread: ^7.0.0-beta.46@babel/plugin-syntax-dynamic-import: ^7.0.0-beta.46@babel/plugin-transform-runtime: ^7.0.0-beta.46@babel/polyfill: ^7.0.0-beta.46@babel/preset-env: ^7.0.0-beta.46@babel/register: ^7.0.0-beta.46@types/jest: ^23.3.1@vue/babel-preset-app: ^3.0.0-rc.3@vue/server-test-utils: ^1.0.0-beta.20@vue/test-utils: ^1.0.0-beta.20autoprefixer: ^9.1.0babel-7-jest: ^21.3.3babel-core: ^7.0.0-0babel-eslint: ^8.2.1babel-jest: ^23.2.0babel-loader: ^8.0.0-beta.2clean-webpack-plugin: ^0.1.19cross-env: ^5.1.4css-loader: ^1.0.0cssnano: ^4.0.5eslint: ^5.0.1eslint-config-prettier: ^2.9.0eslint-config-standard: ^12.0.0-alpha.0eslint-config-vue: ^2.0.2eslint-formatter-pretty: ^1.3.0eslint-friendly-formatter: ^4.0.0eslint-import-resolver-webpack: ^0.9.0eslint-loader: ^2.0.0eslint-plugin-import: ^2.10.0eslint-plugin-jsx-a11y: ^6.0.3eslint-plugin-node: ^6.0.1eslint-plugin-prettier: ^2.6.0eslint-plugin-promise: ^3.7.0eslint-plugin-standard: ^3.0.1eslint-plugin-typescript: ^0.12.0eslint-plugin-vue: ^4.4.0extract-text-webpack-plugin: ^4.0.0-beta.0file-loader: ^1.1.11friendly-errors-webpack-plugin: ^1.6.1html-webpack-plugin: ^3.2.0jest: ^23.2.0jest-vue-preprocessor: ^1.4.0node-sass: ^4.9.0optimize-css-assets-webpack-plugin: ^5.0.0pell: ^1.0.4portfinder: ^1.0.13postcss-aspect-ratio: ^1.0.1postcss-assets: ^5.0.0postcss-calc: ^6.0.1postcss-custom-media: ^6.0.0postcss-custom-properties: ^7.0.0postcss-custom-selectors: ^4.0.1postcss-easings: ^1.0.0postcss-flexbugs-fixes: ^4.1.0postcss-loader: ^2.1.3postcss-normalize: ^6.0.0postcss-pseudo-class-any-link: ^5.0.0postcss-scss: ^2.0.0postcss-short-size: ^3.0.0postcss-svg: ^2.4.0prettier: ^1.11.1regenerator-runtime: ^0.12.0sass-loader: ^7.0.1style-loader: ^0.20.3svg-sprite-loader: ^3.7.0svg-transform-loader: ^1.1.0svgo: ^1.0.5svgo-loader: ^2.1.0ts-loader: ^4.4.2typescript: ^3.0.0typescript-eslint-parser: ^18.0.0url-loader: ^1.0.0vue: ^2.5.16vue-jest: ^2.6.0vue-loader: ^15.0.0vue-style-loader: ^4.1.0vue-template-compiler: ^2.5.16webpack: ^4.14.0webpack-bundle-analyzer: ^2.11.1webpack-cli: ^3.0.1webpack-config-utils: ^2.3.0webpack-dev-middleware: ^3.1.0webpack-dev-server: ^3.1.0webpack-hot-middleware: ^2.21.2webpack-merge: ^4.1.2webpack-stylish: ^0.1.8webpackbar: ^2.6.1write-file-webpack-plugin: ^4.2.0