vuesiwyg
v1.0.15
Published
A rich text to html wysiwyg editor
Readme
Vuesiwyg
A simple wysiwyg rich text html editor built with Vue.js
Installation
With HTML Tags
- Download
- Extract the contents of dist folder to your public assets directory. Structure should look like this:
public
│
│
├───css
│ ├─ vuesiwyg.min.css
│ └─ ...
│
├───js
│ ├─ vuesiwyg.stand-alone.min.js
│ └─ ...
│
├─── ...- Add css and script tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<!-- Styles -->
<link href="path_to_css/vuesiwyg.min.css" rel="stylesheet">
</head>
<body>
<!-- Your HTML stuff -->
<!-- Your Scripts -->
<!-- Vuesiwyg Script -->
<script src="path_to_js/vuesiwyg.stand-alone.min.js"></script>
</body>
</html>Laravel
There are basically two ways to install Vuesiwyg in Laravel
Method 1 (stand-alone):
- download
- extract to your resources directory
- add to/modify your webpack.mix.js, according to your project requirements:
// this is just a basic sample. you should decide what's best for your project.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.sass', 'public/css')
.styles(['public/css/app.css', 'resources/assets/css/vuesiwyg.min.css'], 'public/css/all.css')
.scripts([public/js/app.js', resources/assets/js/vuesiwyg.stand-alone.min.js'], 'public/js/all.js');- add to your template
@extends('layouts.app')
@section('content')
<div id="app" class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Vuesiwyg</div>
<div class="panel-body">
<vue-siwyg id="body"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
</vue-siwyg>
</div>
</div>
</div>
</div>
</div>
@endsection
Method 2 (Vue):
- install with npm
npm install vuesiwyg --save- add to resources/assets/js/app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Vuesiwyg
*/
import Vuex from 'vuex'
import vsw from 'vuesiwyg'
const conf = vsw.Settings
const store = vsw.Store
const component = vsw.Component
Vue.use(Vuex)
const vStore = store(conf)
let vStoreData = {
conf,
components: [
'toolbar',
'editable',
'markup'
]
}
const vuesiwyg = Vue.component('vuesiwyg', Object.assign({}, component, {
store: new Vuex.Store(vStore),
data: function () {
return vStoreData
}
}))
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
})
Vue
- install
npm install vuesiwyg --save- add to your index.js/main.js
/**
* Vuesiwyg
*/
import Vuex from 'vuex'
import vsw from 'vuesiwyg'
const conf = vsw.Settings
const store = vsw.Store
const component = vsw.Component
Vue.use(Vuex)
const vStore = store(conf)
let vStoreData = {
conf,
components: [
'toolbar',
'editable',
'markup'
]
}
const vuesiwyg = Vue.component('vuesiwyg', Object.assign({}, component, {
store: new Vuex.Store(vStore),
data: function () {
return vStoreData
}
}))Usage
Component will always be mounted on an #app root tag:
<div id="app">
<form>
<input type="text" id="subject" name="subject">
<vuesiwyg id="body" text=""></vuesiwyg>
</form>
</div>Define the id property, in order to POST the rendered HTML to a server. The id property will set both the id and name attributes.
Both id and text properties should ALWAYS be strings.
Default
<vuesiwyg id="body" text=""></vuesiwyg>Passing a text
<vuesiwyg id="body" text="Lorem ipsum dolor sit amet"></vuesiwyg>Setting a class
Should you like to override some styling, you can also set a class:
<vuesiwyg id="body" text="" class="My-class"></vuesiwyg>Passing images
This property will populate the 'Insert Image' tool. This property value MUST BE a valid JSON string.
Example in Laravel:
@php
// This is just an example, for the sake of brevity.
// Obviously, you should generate your JSON encoded file list in your controller and pass it to the view.
$u = url('img'); // <- generates http://yourdomain.tld/public/img
$image_array = [$u . '/image1.jpg', $u . '/image2.jpg', $u . '/image33.jpg', $u . '/image44.jpg', $u . '/image5.jpg'];
$images = json_encode($image_array);
@endphp
<vuesiwyg id="body" text="" images="{{ $images }}"></vuesiwyg>Example with stand-alone
<script>
var images = '["img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg", "img/img5.jpg", "img/img6.jpg"]';
</script>
<vuesiwyg id="body" text="" images="{{ $images }}"></vuesiwyg>Credits
Icons are from Font Awesome optimised with SVGOMG and encoded with sass-svg-uri.
Images kindly provided by tiagossaurus_rex
Contribution
Is always welcome, in all forms: Suggestions, Bug reports, Security issues, Pull requests, Translations, Documentation, Tests...
TODO
- Markdown support
- Image upload support
- Full screen support
- Syntax highlight support
- Prettify HTML view
- Translations support
License
Open-sourced software licensed under the MIT license