vue - blog開發(fā)學(xué)習(xí)3

1、添加less 和less-loader支持

npm install less less-loader --save-dev

2、新建main.less，將這個(gè)樣式添加到home.vue中的content標(biāo)簽上（添加之后頁(yè)面可滾動(dòng)）

.content-wrapper{padding: 18px;height: ~"calc(100% - 80px)";overflow: auto; }

3、main.less需要在home.vue中引入

import '../main.less'

4、添加富文本編輯

https://liubing.me/vue-tinymce-5.html

npm install @tinymce/tinymce-vue -S npm install tinymce -S

5、創(chuàng)建edit-post.vue

<template><div class="editor"><TinymceEditor ref="editor" v-model="content" :disabled="disabled" @onClick="onClick"></TinymceEditor></div> </template><script>import TinymceEditor from '@/components/tinymce-editor'export default {name: "EidtPost",components: {TinymceEditor},data() {return {content: 'Welcome to Use Tinymce Editor',disabled: false}},methods: {// 鼠標(biāo)單擊的事件 onClick(e, editor) {console.log('Element clicked')console.log(e)console.log(editor)},// 清空內(nèi)容 clear() {this.$refs.editor.clear()}}} </script><style scoped>.editor {padding: 20px;height: 100%;margin-left: 10%;margin-right: 10%;}</style>

6、創(chuàng)建tinymce-editor.vue

<template><div class="tinymce-editor"><editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor></div> </template> <script>import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/silver'// 編輯器插件plugins// 更多插件參考：https://www.tiny.cloud/docs/plugins/import 'tinymce/plugins/image'// 插入上傳圖片插件import 'tinymce/plugins/media'// 插入視頻插件import 'tinymce/plugins/table'// 插入表格插件import 'tinymce/plugins/lists'// 列表插件import 'tinymce/plugins/wordcount'// 字?jǐn)?shù)統(tǒng)計(jì)插件export default {components: {Editor},props: {value: {type: String,default: ''},disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'lists image media table wordcount autoresize'},toolbar: {type: [String, Array],default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'}},data () {return {init: {language_url: '/static/tinymce/langs/zh_CN.js',language: 'zh_CN',skin_url: '/static/tinymce/skins/ui/oxide',// skin_url: '/tinymce/skins/ui/oxide',//暗色系height: document.body.clientHeight * 0.8,plugins: this.plugins,toolbar: this.toolbar,branding: false,menubar: false,// 此處為圖片上傳處理函數(shù)，這個(gè)直接用了base64的圖片形式上傳圖片，// 如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)}},myValue: this.value}},mounted () {tinymce.init({})},methods: {// 添加相關(guān)的事件，可用的事件參照文檔=> https://github.com/tinymce/tinymce-vue => All available events// 需要什么事件可以自己增加 onClick (e) {this.$emit('onClick', e, tinymce)},// 可以添加一些自己的自定義事件，如清空內(nèi)容 clear () {this.myValue = ''}},watch: {value (newValue) {this.myValue = newValue},myValue (newValue) {this.$emit('input', newValue)}}}</script><style scoped>.editor {padding: 20px;height: 100%;margin-left: 10%;margin-right: 10%;}</style>

?

?

頁(yè)面顯示：

?

posted @ 2019-05-27 22:03 巡山小妖N 閱讀(...) 評(píng)論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的vue - blog开发学习3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。