Skip to content

Commit

Permalink
update dependencies and rewrite example
Browse files Browse the repository at this point in the history
  • Loading branch information
lpreterite committed Feb 5, 2018
1 parent afab86c commit 4961bd1
Show file tree
Hide file tree
Showing 13 changed files with 288 additions and 136 deletions.
23 changes: 23 additions & 0 deletions CHANGE_LOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Change log

## 0.1.5
fix the problem of not updating the content in real time.

## 0.1.4
fix editor plugin is loading and set content will throw error.
add execCommand on to editor event, fix issue #2.

## 0.1.3
fix vue-tinymce can't set content after init.

## 0.1.2

The tinymce default setting is removed.

Vue element change to 'div'.

Have new example: add emotion to context and format html.

## 0.1.1

support v-model, and fix input bug.
29 changes: 3 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
# vue-tinymce
![vue](https://img.shields.io/badge/vue-%5E2.2.x-green.svg)
![vue](https://img.shields.io/badge/tinymce-%5E4.5.7-green.svg)

A vue component for TinyMCE

## Features
- [x] v-model support
- [x] self managed id
- [ ] add more tinymce example

## How to use
### setup
Expand Down Expand Up @@ -64,29 +66,4 @@ npm run dev
```
npm i
npm run build
```


# Change log

## 0.1.5
fix the problem of not updating the content in real time.

## 0.1.4
fix editor plugin is loading and set content will throw error.
add execCommand on to editor event, fix issue #2.

## 0.1.3
fix vue-tinymce can't set content after init.

## 0.1.2

The tinymce default setting is removed.

Vue element change to 'div'.

Have new example: add emotion to context and format html.

## 0.1.1

support v-model, and fix input bug.
```
9 changes: 9 additions & 0 deletions example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# example

## Features

- [ ] How to use
- [ ] Use scaffold
- [ ] Add button
- [ ] Insert image
- [ ] Insert emotions
14 changes: 3 additions & 11 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,8 @@
<title>vue-tinymce</title>
</head>
<body>
<div id="route-app">
<section class="container">
<p>
<router-link to="/home">Home</router-link> |
<router-link to="/article">Article</router-link>
</p>
<router-view></router-view>
</section>
</div>
<div id="app">
<section id="app"></section>
<!-- <div id="app">
<h1>{{ title }}</h1>
<p>
<button @click="getTinymceId('test1')">getTinymceId('test1')</button>
Expand All @@ -40,7 +32,7 @@ <h2>
<code>format before: {{ format.before }}</code>
</div>
<vue-tinymce ref="test2" v-model="tinymce[1].content" :setting="tinymce[1].setting"></vue-tinymce>
</div>
</div> -->
<script src="/tinymce.min.js"></script>
<script src="/build.js"></script>
</body>
Expand Down
185 changes: 95 additions & 90 deletions example/main.js
Original file line number Diff line number Diff line change
@@ -1,102 +1,107 @@
import Vue from 'vue';
import tinymce from 'tinymce';
window.tinymce = tinymce;
import router from './routes';
// import { VueTinymce , TinymceSetting } from '../dist/vue-tinymce';
import { VueTinymce , TinymceSetting } from '../src/';
import Wrapper from "./pages/Wrapper.vue";

const app = new Vue({
name: 'route-root',
el: '#route-app',
name: 'root',
el: '#app',
template: '<App />',
components: { "App": Wrapper },
router
});

Vue.component('vue-tinymce', VueTinymce);

var vm = new Vue({
el: '#app',
data: function(){
setTimeout(()=>{
this.tinymce[0].content = 'html content'+ Date.now() +'';
}, 1000);
// var vm = new Vue({
// el: '#app',
// data: function(){
// setTimeout(()=>{
// this.tinymce[0].content = 'html content'+ Date.now() +'';
// }, 1000);

return {
title: 'VueTinymce',
emotions: {
'[哈哈]': '//img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_thumb.gif'
},
format: {
after: '',
before: ''
},
tinymce: [
{
content: 'html content',
setting: Object.assign(TinymceSetting, {
language_url: "langs/zh_CN.js",
height: 200
})
},
{
content: '<p>Vue</p><hr><p>The Progressive JavaScript Framework</p>',
setting: {
language_url: "langs/zh_CN.js",
height: 200,
theme: 'inlite',
menubar: false,
keep_styles: false,
invalid_styles: 'color font-size',
plugins: 'image table link paste contextmenu textpattern autolink',
insert_toolbar: 'quickimage quicktable',
selection_toolbar: 'bold italic | quicklink h2 h3 blockquote',
inline: true,
paste_data_images: true,
}
}
]
}
},
methods: {
getTinymceId(name){
alert(this.$refs[name].id);
},
insertImg(editor, {path, key}){
editor.undoManager.transact(function(){
editor.focus();
editor.selection.setContent(editor.dom.createHTML('img', {src: path, 'data-key': key}));
})
},
insertEmotion(editor, key){
this.insertImg(editor, {key, path:this.emotions[key]});
},
formatHtml(html, emotions){
var parser = new tinymce.html.DomParser();
var serializer = new tinymce.html.Serializer();
var nodes = parser.parse(html);
nodes.getAll('img').map(function(item){
var key = item.attr('data-key') || '';
if(key.length > 0){
var spanNode = new tinymce.html.Node('span', 1);
var textNode = new tinymce.html.Node('#text', 3);
textNode.value = key;
spanNode.append(textNode);
item.replace(spanNode);
}
});
return serializer.serialize(nodes);
},
restoreHtml(html, emotions){
var parser = new tinymce.html.DomParser();
var serializer = new tinymce.html.Serializer();
var nodes = parser.parse(html);
nodes.getAll('#text').map(function(item){
var value = emotions[item.value];
if(value){
var imgNode = new tinymce.html.Node('img', 1);
imgNode.attr('data-key', item.value);
imgNode.attr('src', value);
item.replace(imgNode);
}
})
return serializer.serialize(nodes);
}
}
})
// return {
// title: 'VueTinymce',
// emotions: {
// '[哈哈]': '//img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_thumb.gif'
// },
// format: {
// after: '',
// before: ''
// },
// tinymce: [
// {
// content: 'html content',
// setting: Object.assign(TinymceSetting, {
// language_url: "utils/tinymce/langs/zh_CN.js",
// height: 200
// })
// },
// {
// content: '<p>Vue</p><hr><p>The Progressive JavaScript Framework</p>',
// setting: {
// language_url: "langs/zh_CN.js",
// height: 200,
// theme: 'inlite',
// menubar: false,
// keep_styles: false,
// invalid_styles: 'color font-size',
// plugins: 'image table link paste contextmenu textpattern autolink',
// insert_toolbar: 'quickimage quicktable',
// selection_toolbar: 'bold italic | quicklink h2 h3 blockquote',
// inline: true,
// paste_data_images: true,
// }
// }
// ]
// }
// },
// methods: {
// getTinymceId(name){
// alert(this.$refs[name].id);
// },
// insertImg(editor, {path, key}){
// editor.undoManager.transact(function(){
// editor.focus();
// editor.selection.setContent(editor.dom.createHTML('img', {src: path, 'data-key': key}));
// })
// },
// insertEmotion(editor, key){
// this.insertImg(editor, {key, path:this.emotions[key]});
// },
// formatHtml(html, emotions){
// var parser = new tinymce.html.DomParser();
// var serializer = new tinymce.html.Serializer();
// var nodes = parser.parse(html);
// nodes.getAll('img').map(function(item){
// var key = item.attr('data-key') || '';
// if(key.length > 0){
// var spanNode = new tinymce.html.Node('span', 1);
// var textNode = new tinymce.html.Node('#text', 3);
// textNode.value = key;
// spanNode.append(textNode);
// item.replace(spanNode);
// }
// });
// return serializer.serialize(nodes);
// },
// restoreHtml(html, emotions){
// var parser = new tinymce.html.DomParser();
// var serializer = new tinymce.html.Serializer();
// var nodes = parser.parse(html);
// nodes.getAll('#text').map(function(item){
// var value = emotions[item.value];
// if(value){
// var imgNode = new tinymce.html.Node('img', 1);
// imgNode.attr('data-key', item.value);
// imgNode.attr('src', value);
// item.replace(imgNode);
// }
// })
// return serializer.serialize(nodes);
// }
// }
// })
7 changes: 5 additions & 2 deletions example/pages/Article.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,20 @@
</div>
</template>
<script>
import { VueTinymce , TinymceSetting } from '../../src/';
export default {
data(){
return {
setting: {
}
setting: Object.assign({}, TinymceSetting, {})
}
},
methods: {
setup(editor){
console.log("Article init editor id:"+editor.id);
}
},
components: {
VueTinymce
}
}
</script>
Loading

0 comments on commit 4961bd1

Please sign in to comment.