Vue中使用tinymce富文本编辑器
提示：文章是以vue2.x 引入tinymce富文本编译器，以下是一些我在安装中的注意事项记录一下。
1.使用tinymce的时候注意一下Vue使用的版本，我使用的是Vue2.x所以引入tinymce的版本：
npm install tinymce@5.1.0
npm install @tinymce/tinymce-vue@3.0.1
之前安装的时候没有挂版本号直接下载的，运行的时候控制台一直报错。
2.安装之后我的实践是将，node_modules 中 tinymce文件，拷贝到了 public目录下。
3.因为tinymce 默认是英文界面，所以还需要下载一个中文语言包。
还是在public/tinymce文件夹内新建langs文件夹，用来存放下载的中文语言包，如下图所示：
4.富文本组件
<template>
<div class="pages-container">
<div class="pages-container-editor">
<editor id="textarea" v-model="content"
:init="init"
:key="tinymceFlag"
:api-key="apiKey"
:disabled="disabledEditor">
</editor>
</div>
</div>
</template>
<script>
// 编辑器引入
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
// 引入的插件
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/plugins/image';
import 'tinymce/plugins/axupimgs';
import "tinymce/plugins/print";
import "tinymce/plugins/preview";
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/code';
import 'tinymce/plugins/link';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/template';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/autoresize';
// 上传
import {uploadingFiles} from '@/unit/uploadingFile.js';
export default {
name: 'HomeWrapScrollWrapper',
components: {
Editor
},
data() {
return {
// 内容
content: '内容',
// 保存上传成功后的文件地址和名称
videomsg: {
url: '',
name: ''
},
// 富文本便签key值
tinymceFlag: '1',
// 密钥(使用本地加载js的话可以不用apiKey，去官网注册账号会生成一个密钥)
apiKey: '',
// 控制禁用状态
disabledEditor: false,
// 初始化配置
init: {
// 选择器，这里选取id为textarea的文本框
selector: '#textarea',
// 汉化包路径(public目录下的)
language_url: '/tinymce/langs/zh_CN.js',
// 指定语言包
language: 'zh_CN',
// 主题
skin_url: '/tinymce/skins/ui/oxide',
base_url: '/tinymce',
// 引用添加自定义插件(mathtype公式插件)
external_plugins: {'tiny_mce_wiris': '/tinymce/@wiris/mathtype-tinymce5/plugin.min.js'},
toolbar_mode: 'wrap',
// 指定需加载的插件
plugins: 'code link image axupimgs imagetools media table lists fullscreen quickbars charmap preview print kityformula-editor',
// 工具栏配置
toolbar: 'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink code | numlist bullist | image axupimgs media table kityformula-editor tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough charmap | indent outdent | superscript subscript | removeformat | preview print',
content_style: 'p {margin: 5px 0;}',
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;',
// 允许粘贴图片上传,及格式
paste_data_images: true,
images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
// 内容预展示文本
placeholder: '请输入...',
// 自动聚焦
auto_focus : true,
//隐藏右下角技术支持
branding: false,
//禁止拖拽改变大小
resize: false,
// 对话框支持拖动
draggable_modal: true,
// 开启拖入功能，true：禁止拖入
paste_block_drop: true,
block_unsupported_drop: false,
// 菜单栏显隐
menubar: true,
// 隐藏编辑器底部的状态栏
statusbar: false,
// 富文本高度
height: 500,
min_height: 350,
max_height: 500,
file_picker_types: 'media',
media_live_embeds: true,
// 文件上传处理
file_picker_callback: (callback, value, meta) => {
if (meta.filetype === 'media') {
let that = this;
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.onchange = async function() {
// 为 HTMLInputElement 构造函数中的 this，指向 input 实例对象
let file = this.files[0];
let isValid = await that.validateVideo(file);
if (isValid) {
setTimeout(() => {
if (that.videomsg.url != '') {
callback(that.videomsg.url);
}
}, 1000);
// 自定义上传的方法
that.uploadFile(file, 'video');
} else {
callback();
}
}
input.click();
}
},
// 修改视频上传时显示的内容(解决不能视频预览的问题)
video_template_callback: (data) => {
data.width = '100%'
data.height = 'auto'
return `
<p>
<span class="mce-preview-object mce-object-video" contenteditable="false"
data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen"
data-mce-p-frameborder="no" data-mce-p-scrolling="no"
data-mce-p-src=${data.source1}
data-mce-p-width=${data.width}
data-mce-p-height=${data.height}
data-mce-p-controls="controls" data-mce-html="%20">
<video width=${data.width} height=${data.height} controls="controls">
<source src=${data.source1} type=${data.source1mime}></source>
</video>
</span>
</p>`
},
// 图片异步上传处理
images_upload_handler: (blobInfo, success, failure) => {
try {
this.handleUploadFiles(blobInfo, success, failure)
} catch (err) {
console.log(err)
}
}
}
}
},
created() {
},
mounted() {
this.handleTinymceInit();
},
methods: {
//
handleTinymceInit() {
this.tinymceFlag = Math.random() + '';
tinymce.init({});
}，
// 图片上传
handleUploadFiles(blobInfo, success, failure) {
let blob = blobInfo.blob();
let fileName = blob.name
let formData = new FormData()
formData.append('file', blob)
// 上传请求
},
// 视频上传方法
uploadFile(file, folder = 'images') {}
}
在官网下载的汉化包按照其他大佬的方式总是汉化不成功，最后还是在其他地方找到了一个编码后的汉化包才成功。
运行成功后的效果
第一次记录，如有错误请指正。谢谢
3254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
