Tinymce的安裝
網上資料有很多安裝教程，而且大都一樣。記得當初看到一篇文章說是tinymce安裝教程，收藏之後就再也沒有親手實踐。臨近過春節，都放假了，趁今天有點空閒時間，就研究了一下，還是發現有不少坑需要踩的，以防將來需要用的時候，戳手不及，就記錄一下。
1、安裝tinymce
npm install tinymce -S2、安裝tinymce-vue,在vue日益強大的趨勢下，官方推出了依賴包。
npm install @tinymce/tinymce-vue -S我其實很納悶，這些安裝依賴項別人怎麼知道，原來這些都在官網上說明了。費話不多說，有圖有真相。
對應步驟1,官方給出的Get Tinymce by npm
對應步驟2，官方給出的tinymce-vue整合包
3、漢化，下載中文語言包
- 在專案根目錄的public目錄下新建tinymce資料夾，將下載的中文語言包解壓後放在該資料夾下
- 在依賴包node_modules裡找到tinymce資料夾，將裡面的skins資料夾複製到public/tinymce目錄下
4、簡單DEMO
<template>
<div class="activeConfig">
<div class="activeConfig-container">
<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
</div>
</div>
</template>
<script>
// 引入元件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文字編輯器主題的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 擴充套件外掛
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/template'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/help'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/autoresize'
//import 'tinymce/plugins/formatpainter'
//以下元件為自定義元件，並且多圖片上傳，和百度地圖，表情包存在坑，這些坑後面再介紹
import '@/plugins/axupimgs'
import '@/plugins/bdmap'
import '@/plugins/indent2em'
import '@/plugins/lineheight'
export default {
name: 'ActiveConfig',
components: { Editor },
data() {
return {
// tinymce的繫結值
tinymceHtml: '',
// tinymce的初始化配置
editorInit: {
//tinumce容器
selector: '#tinymce',
//配置語言
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
//配置皮膚
skin_url: '/tinymce/skins/ui/oxide',
//配置編輯器高度
height:500,
min_height: 300,
max_height:650,
width:1000,
min_width:900,
max_width:1200,
emoticons_database_url: '/emojis.js',
emoticons_append: {
"diy1": {
"keywords": ["diy1"],
"char": "\uD83E\uDD2F",
"category": "animals_and_nature"
}
},
//配置外掛
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link' +
' media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist ' +
'lists wordcount imagetools textpattern help autosave bdmap indent2em autoresize lineheight ' +
'axupimgs emoticons',
toolbar: 'code undo redo restoredraft | cut copy paste pastetext | \
forecolor backcolor bold italic underline strikethrough link anchor | \
alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | \
blockquote subscript superscript removeformat | \
table image media charmap hr pagebreak insertdatetime print preview | fullscreen | \
bdmap indent2em lineheight axupimgs emoticons',
// 此處為圖片上傳處理函式
iimages_upload_base_path: '/demo',
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//轉化為易於理解的file物件
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/demo/upimg2.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.location);
};
formData = new FormData();
formData.append('file', file, file.name );
xhr.send(formData);
},
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
link_list: [
{ title: '預置連結1', value: 'http://www.tinymce.com' },
{ title: '預置連結2', value: 'http://tinymce.ax-z.cn' }
],
image_list: [
{ title: '預置圖片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
{ title: '預置圖片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' }
],
importcss_append: true,
//自定義檔案選擇器的回撥內容
file_picker_callback: function (callback, value, meta) {
if (meta.filetype === 'file') {
callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
}
if (meta.filetype === 'image') {
callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
}
if (meta.filetype === 'media') {
callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
}
},
autosave_ask_before_unload: false,
// 水印“Powered by TinyMCE”
branding: false,
statusbar: false,
}
}
},
mounted() {
tinymce.init({})
},
methods: {
// 圖片上傳
handleImgUpload(blobInfo, success, failure) {
}
}
}
</script>
<style scoped>
.activeConfig-container {
margin-top: 30px;
margin-left:25%;
}
</style>
效果展示
Tinymce元件屬性
| 名稱 | 型別 | 描述 |
|---|---|---|
| :content | string | 作為文字內容傳入編輯器，可以使用v-model實現雙向繫結 |
| @change | function | 編輯器中Input Change Undo Redo ExecCommand KeyUp NodeChange事件響應後觸發的事件返回文字內容 |
| :setting | object | 編輯器的設定，setup不建議在這設定 |
| :setup | function | 常用與自定義編輯器處理，組建內部做了些處理，建議在這裡新增自定義的程式碼 |
| :init | object | tinymce編輯器的初始化配置 |
注意事項
tinymce-vue版本為 ^3.0.1,tinymce的版本為^5.1.5,多圖片上傳，和百度地圖，表情包這些外掛存在坑，這些坑後面再介紹。因為我也要回老家過年了，啊哈哈。提前祝大家新年快樂！！！
本作品採用《CC 協議》，轉載必須註明作者和本文連結