新來(lái)一需求 說(shuō)要在后臺(tái)管理里添加富文本 之前用了百度富文本 打包失敗
boss這么跟我說(shuō)的開(kāi)始pingvue富文本這里需要提到的是 富文本會(huì)將上傳的圖片轉(zhuǎn)成base64 保存時(shí)數(shù)據(jù)庫(kù)壓力太大 所以建議寫(xiě)成我這樣 先上傳到服務(wù)器然后生成個(gè)標(biāo)簽寫(xiě)進(jìn)去 這樣最好
tinymce 有vue組件 果斷用起來(lái)
github - vue-tinymce
基本步驟
建議一步一步來(lái) 別直接粘貼代
- 安裝 一下兩個(gè)包
"@tinymce/tinymce-vue": "^2.0.0"
"tinymce": "^5.0.6"
npm install tinymce -S npm --save @tinymce/tinymce-vue
- 下載中文包
-
將node_moudles里面tinymce里的skins文件復(fù)制
皮膚引入 將上述上個(gè)操作文件 放入一個(gè)目錄下 我這里是public根據(jù)你的項(xiàng)目文件結(jié)構(gòu)來(lái)定
我的中文包是在tinymce里跟skins一個(gè)層級(jí)
請(qǐng)注意上下層結(jié)構(gòu)
組件內(nèi)容
設(shè)置內(nèi)容基本都在備注里
<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'
},
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: '/tinymce/zh_CN.js', //public目錄下
language: 'zh_CN',
skin_url: '/tinymce/skins/ui/oxide', //public目錄下
height: 300,
plugins: this.plugins, // 父組件傳入 或者 填寫(xiě)個(gè)默認(rèn)的插件 要選用什么插件都可以 去官網(wǎng)可以查到
toolbar: this.toolbar, // 工具欄 我用到的也就是lists image media table wordcount 這些 根據(jù)需求而定
images_upload_url: '', //上傳路徑
// 此處為圖片上傳處理函數(shù)琐旁，這個(gè)直接用了base64的圖片形式上傳圖片，
// 如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
// 官網(wǎng)抄的圖片上傳 項(xiàng)目如果用了vue-resource可以用$http 因?yàn)楸容^懶就沒(méi)改
images_upload_handler: (blobInfo, success, failure) => {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', `${config.webPath}` + "basic/upload/");
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
// if (!json || typeof json.img_url != 'string') {
// failure('Invalid JSON: ' + xhr.responseText);
// return;
// }
console.log(json)
success(json.img_url);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
console.log('formData', formData)
xhr.send(formData);
}
},
myValue: this.value
}
},
mounted () {
tinymce.init({})
},
methods: {
onClick (e) {
this.$emit('onClick', e, tinymce)
}
},
watch: {
value (newValue) {
this.myValue = newValue
},
myValue (newValue) {
this.$emit('input', newValue)
}
}
}
</script>
- 引入
import TinymceEditor from '@/components/tiny-editor'
- 使用
<tinymce-editor ref="editor"
v-model="newFrom.contents" // 富文本內(nèi)容
@onClick="onClick"> //事件
</tinymce-editor>
最終界面
界面 - 工具欄可以自己引入插件
- 與這篇無(wú)關(guān) 如果有同學(xué)跟我一樣是新手 在組件引入的時(shí)候因?yàn)橄鄬?duì)絕對(duì)路徑想死的 請(qǐng)看這個(gè)webpack配置 在webpack.config.js里改路徑
alias: {
"@src":path.resolve("src"),
"@component":path.resolve("src/component"),
"@pages":path.resolve("src/pages"),
"@utils":path.resolve("src/utils"),
}
從此沒(méi)遇到過(guò)任何引入相關(guān)的問(wèn)題 開(kāi)心
這篇沒(méi)看明白的可以看一下鏈接 我也是從這里學(xué)習(xí)到很多
遇到問(wèn)題或卡住 請(qǐng)指出
