vuecli3.x中轻松4步带你使用tinymce的步骤


Posted in Javascript onJune 25, 2020

前言

笔者在使用tinymce时发现跟着网上的方法去做,基本都会因为版本等一些问题报错,所以笔者总结了以下方案!可以收藏哦

第一步:

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

第二步:

找到node_modules中的skins文件夹,然后在项目中的public下新建tinymce文件夹,然后将刚刚找到的整个skins文件夹拷贝到public的tinymce目录下。

接着去官网下载语言包,解压,将langs文件夹拷贝到public的tinymce文件夹下(和skins文件夹同级)

第三步:

在components文件夹下新建tinymce组件的文件夹,新建index.vue文件,复制以下代码进去:

<template>
 <div class="tinymce-editor">
  <Editor
   :id="editorId"
   v-model="editorValue"
   :init="editorInit"
  />
 </div>
</template>

<script>
// 引入组件
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver';
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min';
import 'tinymce/skins/ui/oxide/skin.min.css';
// 扩展插件
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/template';// 模板插件
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/textcolor';
export default {
 name: 'TinymceEditor',
 components: {Editor},
 props: {
  height: {
   type: Number,
   default: 500
  },
  id: {
   type: String,
   default: 'tinymceEditor'
  },
  value: {
   type: String,
   default: ''
  },
  plugins: {
   type: [String, Array],
   default: 'link lists image code table wordcount media fullscreen preview paste contextmenu textcolor'
  },
  toolbar: {
   type: [String, Array],
   default: 'fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat'
  }
 },
 data() {
  return {
   editorInit: {
    language_url: `${window.baseUrl}/tinymce/langs/zh_CN.js`,
    language: 'zh_CN',
    skin_url: `${window.baseUrl}/tinymce/skins/ui/oxide`,
    content_css: `${window.baseUrl}/tinymce/skins/content/default/content.css`,
    height: this.height,
    content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',
    plugin_preview_width: 375, // 预览宽度
    plugin_preview_height: 668,
    lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",
    fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
    font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
    plugins: this.plugins,
    powerpaste_word_import: 'merge',
    toolbar: this.toolbar,
    paste_data_images: true,
    statusbar: true, // 底部的状态栏
    menubar: true, // 最上方的菜单
    branding: false, // 水印“Powered by TinyMCE”
    images_upload_handler: (blobInfo, success, failure) => {
     this.$emit('handleImgUpload', blobInfo, success, failure);
    }
   },
   editorId: this.id,
   newValue: ''
  };
 },
 watch: {
  newValue(newValue) {
   this.$emit('input', newValue);
  }
 },
 mounted() {
  tinymce.init({});
 },
 computed: {
  editorValue: {
   get() {
    return this.value;
   },
   set(val) {
    this.newValue = val;
   }
  }
 },
 methods: {
  // https://github.com/tinymce/tinymce-vue => All available events
  clear() {
   this.editorValue = '';
  }
 }
};
</script>

第四步:

在要使用的组件中加入以下代码:

import TinymceEditor from '@/components/tinymce';

components: { //注册TinymceEditor组件
  TinymceEditor
},

data() {
  return {
    content: '', //富文本的内容
    baseUrl: window.baseUrl, //默认为'' 空字符串
  }
}

computed:{
  realHeight() {
   return (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 200
  }
}

methods:{
  async imgUpload(blobInfo, success, failure) {
   const formData = new FormData();
   formData.append('file', blobInfo.blob());
   try {
    const res = await uploadFile(formData);
    success(this.server + res);
    console.log(this.server + res);
   } catch (e) {
    console.log(e);
    failure('上传失败:' + e);
   }
  },
}
模板中使用:

<tinymce-editor
 id="editor"
 ref="editor"
 v-model="content"
 :height="realHeight"
 @handleImgUpload="imgUpload"
/>

然后就大功告成:

vuecli3.x中轻松4步带你使用tinymce的步骤

到此这篇关于vuecli3.x中轻松4步带你使用tinymce的步骤的文章就介绍到这了,更多相关vuecli3.x使用tinymce内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
viewer.js实现图片预览功能
Jun 24 #Javascript
Javascript实现鼠标移入方向感知
Jun 24 #Javascript
javascript实现前端input密码输入强度验证
Jun 24 #Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 #Javascript
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
You might like
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php合并js请求的例子
2013/11/01 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
document.createElement()用法
2013/03/13 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
python删除服务器文件代码示例
2018/02/09 Python
python实现三次样条插值
2018/12/17 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
《雾凇》教学反思
2014/02/17 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
Golang解析JSON对象
2022/04/30 Golang