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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
对盗链说再见...
2006/10/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP实现微信提现功能
2018/09/30 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
python实现统计代码行数的方法
2015/05/22 Python
python实现京东秒杀功能
2018/07/30 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python文件路径名的操作方法
2019/10/30 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
党的生日活动方案
2014/08/15 职场文书
妈妈活动方案
2014/08/15 职场文书
2014年司法所工作总结
2014/11/22 职场文书