w-tinymce-vue
Version:
A wrapper for @tinymce/tinymce-vue.
89 lines (75 loc) • 3.21 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>example for w-tinymce-vue</title>
<!-- tinymce -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@5.10.7/tinymce.min.js"></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<!-- w-tinymce-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-tinymce-vue@latest/dist/w-tinymce-vue.umd.js"></script>
</head>
<body style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; margin:0px; padding:0px; height:100vh;">
<div id="app">
<div style="margin:20px;">
<div>1. bind height</div>
<div>
<button type="button" @click="height=150">set height to 150px</button>
<button type="button" @click="height=200">set height to 200px</button>
</div>
<w-tinymce-vue
:height="height"
v-model="content"
></w-tinymce-vue>
</div>
<div style="margin:20px;">
<div>2. sync content</div>
<w-tinymce-vue
:height="200"
v-model="content"
></w-tinymce-vue>
</div>
<div style="margin:20px;">
<div>3. settings</div>
<w-tinymce-vue
:settings="settings"
v-model="content"
></w-tinymce-vue>
</div>
</div>
<script>
//install w-tinymce-vue
Vue.component('w-tinymce-vue',window['w-tinymce-vue'])
//initialize
new Vue({
el: '#app',
data: {
content: 'abc中文123',
height: 200,
settings: {
menubar: '',
plugins: '',
toolbar: 'fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
// language: 'zh_TW',
// menubar: 'edit insert format table',
// plugins: 'paste imagetools link table lists advlist hr charmap', //autoresize
// toolbar: 'undo redo | fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
// fontsize_formats: '8pt 10pt 11pt 12pt 14pt 18pt 24pt 36pt',
// invalid_elements: 'wbr', //禁止使用適合換行處元素wbr
// paste_data_images: true,
// branding: false, //移除logo
// elementpath: false, //移除選擇元素路徑
// resize: false, //禁止改變視窗大小
},
},
// mounted: function() {
// let vo=this
// setInterval(function(){
// vo.height+=10
// },1000)
// },
})
</script>
</body>
</html>