-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update dependencies and rewrite example
- Loading branch information
1 parent
afab86c
commit 4961bd1
Showing
13 changed files
with
288 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
// } | ||
// } | ||
// }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.