引入
~~~
import TinymceEditor from '@/components/TinymceEditor';
~~~
~~~
components: {TinymceEditor},
~~~
初始化
~~~
computed: {
// 初始化富文本
initEditor() {
return {
height: 300,
branding: false,
skin_url: '/tinymce/skins/ui/oxide',
content_css: '/tinymce/skins/content/default/content.css',
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
toolbar_drawer: 'sliding',
images_upload_handler: (blobInfo, success, error) => {
let file = blobInfo.blob();
// 使用axios上傳
const formData = new FormData();
formData.append('file', file, file.name);
this.$http.post('/upload/uploadImage', formData).then(res => {
if (res.data.code == 0) {
success(res.data.data);
} else {
error(res.data.msg);
}
}).catch(e => {
console.error(e);
error(e.message);
});
},
file_picker_types: 'media',
file_picker_callback: () => {
}
}
}
},
~~~
頁面
~~~
<el-form-item label="內容:" prop="cont">
<tinymce-editor v-model="form.cont" :init="initEditor"/>
</el-form-item>
~~~
