vue使用 Tinymce富文本编辑器

1，目录结构

2.index.vue

<template><div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container"><textarea :id="tinymceId" class="tinymce-textarea" /><div class="editor-custom-btn-container"><editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" /><editorVideo color="#1890ff" class="editor-upload-btn" @successCBK="VideoSuccessCBK" /></div></div>
</template><script>
import editorImage from './components/EditorImage'
import editorVideo from './components/EditorVideo'
import plugins from './plugins'
import toolbar from './toolbar'export default {name: 'Tinymce',components: { editorImage,editorVideo},props: {id: {type: String,default: function() {return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')}},value: {type: String,default: ''},toolbar: {type: Array,required: false,default() {return []}},menubar: {type: String,default: 'file edit insert view format table'},height: {type: Number,required: false,default: 360}},data() {return {hasChange: false,hasInit: false,tinymceId: this.id,fullscreen: false,languageTypeList: {'en': 'en','zh': 'zh_CN'}}},computed: {language() {return this.languageTypeList[this.$store.getters.language]}},watch: {value(val) {if (!this.hasChange && this.hasInit) {this.$nextTick(() =>window.tinymce.get(this.tinymceId).setContent(val || ''))}},language() {this.destroyTinymce()this.$nextTick(() => this.initTinymce())}},mounted() {this.initTinymce()},activated() {this.initTinymce()},deactivated() {this.destroyTinymce()},destroyed() {this.destroyTinymce()},methods: {initTinymce() {const _this = thiswindow.tinymce.init({language: this.language,selector: `#${this.tinymceId}`,height: this.height,body_class: 'panel-body ',object_resizing: false,toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,menubar: this.menubar,plugins: plugins,fontsize_formats: "8px 9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 25px 26px 27px 28px 29px 30px 31px 32px 33px 34px 35px 36px 37px 38px",end_container_on_empty_block: true,powerpaste_word_import: 'clean',code_dialog_height: 400,code_dialog_width: 1000,advlist_bullet_styles: 'square',advlist_number_styles: 'default',imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],default_link_target: '_blank',link_title: false,nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugininit_instance_callback: editor => {if (_this.value) {editor.setContent(_this.value)}_this.hasInit = trueeditor.on('NodeChange Change KeyUp SetContent', () => {this.hasChange = truethis.$emit('input', editor.getContent())})},setup(editor) {editor.on('FullscreenStateChanged', (e) => {_this.fullscreen = e.state})}// 整合七牛上传// images_dataimg_filter(img) {//   setTimeout(() => {//     const $image = $(img);//     $image.removeAttr('width');//     $image.removeAttr('height');//     if ($image[0].height && $image[0].width) {//       $image.attr('data-wscntype', 'image');//       $image.attr('data-wscnh', $image[0].height);//       $image.attr('data-wscnw', $image[0].width);//       $image.addClass('wscnph');//     }//   }, 0);//   return img// },// images_upload_handler(blobInfo, success, failure, progress) {//   progress(0);//   const token = _this.$store.getters.token;//   getToken(token).then(response => {//     const url = response.data.qiniu_url;//     const formData = new FormData();//     formData.append('token', response.data.qiniu_token);//     formData.append('key', response.data.qiniu_key);//     formData.append('file', blobInfo.blob(), url);//     upload(formData).then(() => {//       success(url);//       progress(100);//     })//   }).catch(err => {//     failure('出现未知问题，刷新页面，或者联系程序员')//     console.log(err);//   });// },})},destroyTinymce() {const tinymce = window.tinymce.get(this.tinymceId)if (this.fullscreen) {tinymce.execCommand('mceFullScreen')}if (tinymce) {tinymce.destroy()}},setContent(value) {window.tinymce.get(this.tinymceId).setContent(value)},getContent() {window.tinymce.get(this.tinymceId).getContent()},imageSuccessCBK(arr) {const _this = thisarr.forEach(v => {window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" style="width:100%;display:block" src="${v.url}" >`)})},VideoSuccessCBK(arr){const _this = thisarr.forEach(v => {window.tinymce.get(_this.tinymceId).insertContent(`<span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-controls="controls" data-mce-html="<source src='${v.url}' />"><video src="${v.url}" controls="controls" width="100%" height="auto" frameborder="0"></video><span class="mce-shim"></span></span>`)})}}
}
</script><style scoped>
.tinymce-container {position: relative;line-height: normal;
}
.tinymce-container>>>.mce-fullscreen {z-index: 10000;
}
.wscnph{width: 100%;
}
.tinymce-textarea {visibility: hidden;z-index: -1;
}
.editor-custom-btn-container {position: absolute;right: 4px;top: 4px;/*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {z-index: 10000;position: fixed;
}
.editor-upload-btn {display: inline-block;
}
.mce-container{white-space: normal !important;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset{white-space: normal !important;
}
</style>
<style>
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset{white-space: normal !important;
}
</style>

3,上传视频组件

<template><div class="upload-container"><el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary"@click=" dialogVisible=true">上传视频</el-button><el-dialog :append-to-body="true" :visible.sync="dialogVisible"><div class="dialog-bodyer"><upload @getImg="getImg"   accept=".mp4, .ogg" @delImg="delImg" :isVideo="true" :file-list="uploadFileList"uploadNotice="请上传视频,上传成功之前请不要关闭此窗口"></upload></div><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="handleSubmit">确认</el-button></div></el-dialog></div>
</template><script>import upload from "@/components/upload/upload";export default {name: "EditorSlideUploadVideo",props: {color: {type: String,default: "#1890ff",},},components: {upload,},data() {return {uploadUrl:"/oss/service/upload/imgNoParams",dialogVisible: false,listObj: {},fileList: [],uploadFileList: [],params: {},};},methods: {// data为图片地址getImg(data) {console.log(data, "datadatadatadatadatadatadata")this.$message({type: "success",message: `上传成功`,});// this.handleSubmit()},delImg(index) {// this.models.picture = "";},checkAllSuccess() {return Object.keys(this.listObj).every((item) => this.listObj[item].hasSuccess);},handleSubmit() {if (!this.checkAllSuccess()) {this.$message("Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!");return;}this.$emit("successCBK", this.uploadFileList);this.uploadFileList = [];this.dialogVisible = false;},},};</script><style lang="scss" scoped>.dialog-footer {padding: 20px;}.dialog-bodyer {padding: 20px;}.editor-slide-upload {margin-bottom: 20px;/deep/ .el-upload--picture-card {width: 100%;}}</style>

4.plugins

// Any plugins you want to use has to be imported
// Detail plugins list see https://www.tinymce.com/docs/plugins/
// Custom builds see https://www.tinymce.com/download/custom-builds/const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']export default plugins

5，toolbar

// Here is a list of the toolbar
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrolsconst toolbar = ['fontsizeselect fontselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']export default toolbar

vue使用 Tinymce富文本编辑器相关推荐

vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
vue引用tinymce富文本编辑器及tinymce配置
一.效果如图所示二.页面标签展示 <editor id="editer" api-key="no-api-key" v-model="edit ...
tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
Layui 使用 TinyMCE 富文本编辑器
Layui 使用 TinyMCE 富文本编辑器 Layui 使用 TinyMCE 富文本编辑器 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 3.调用 TinyMCE ...
TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签通过如下设置 ...
Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...

vue使用 Tinymce富文本编辑器

vue使用 Tinymce富文本编辑器相关推荐

最新文章

热门文章