Vue+Webpack完美整合富文本编辑器TinyMce的方法


Posted in Javascript onNovember 30, 2018

选择一个合适的富文本编辑器对于一个前端项目至关重要,这次我基于Vue来开发我项目中的前端部分,经过权衡选择了tinymce。其在UI,功能都很适合,tinymce官方文档:点击打开链接;

引入tinymce 我选用的版本4.7.4

npm install tinymce -S

将tinymce创建为Vue的组件,便于日后复用,创建组件editor.vue

<template>
    <textarea :id="id" :value="value"></textarea>
</template>
<script>
  // Import TinyMCE
  import tinymce from 'tinymce/tinymce';
  import 'tinymce/themes/modern/theme';
  import 'tinymce/plugins/paste';
  import 'tinymce/plugins/link';
  const INIT = 0;
  const CHANGED = 2;
  var EDITOR = null;
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      setting: {}
    },
    watch: {
      value: function (val) {
        console.log('init ' + val)
        if (this.status == INIT || tinymce.activeEditor.getContent() != val){
          tinymce.activeEditor.setContent(val);
        }
        this.status = CHANGED
      }
    },
    data: function () {
      return {
        status: INIT,
        id: 'editor-'+new Date().getMilliseconds(),
      }
    },
    methods: {
    },
    mounted: function () {
      const _this = this;
      const setting =
        {
          selector:'#'+_this.id,
          language:"zh_CN",
          init_instance_callback:function(editor) {
            EDITOR = editor;
            console.log("Editor: " + editor.id + " is now initialized.");
            editor.on('input change undo redo', () => {
              var content = editor.getContent()
              _this.$emit('input', content);
            });
          },
          plugins:[]
        };
      Object.assign(setting,_this.setting)
      tinymce.init(setting);
    },
    beforeDestroy: function () {
      tinymce.get(this.id).destroy();
    }
  }
  
</script>

在钩子mounted 进行了tinymce的初始化工作,调用 tinymce.init(setting),setting为配置信息这样我们便初步配置完成了editor组件

在其他页面使用组件

<template>
  <div class="app-container">
    <div>
      <!-- 组件有两个属性 value 传入内容双向绑定 setting传入配置信息 -->
      <editor class="editor" :value="content" :setting="editorSetting" @input="(content)=> content = content"></editor>
    </div>
 
  </div>
</template>
<script>
  import editor from '@/components/editor'
  export default {
    name: "editor-demo",
    data: function () {
      return {
        content:'我是富文本编辑器的内容',
        //tinymce的配置信息 参考官方文档 https://www.tinymce.com/docs/configure/integration-and-setup/
        editorSetting:{
          height:400,
        }
      }
    },
    components:{
      'editor':editor
    }
  }
</script>
<style scoped>
</style>

此刻我们已经完成了百分之90的配置 ,最后只需将node_modules/_tinymce@4.7.4@tinymce/文件夹下的skins文件夹放置于项目根目录下,这样tinymce才可获取皮肤css文件

下载并解压语言包langs文件夹放置项目根目录,中文下载链接 ,其他语言包选择;

之后在页面轻松使用组件

Vue+Webpack完美整合富文本编辑器TinyMce的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
javascript实现控制div颜色
Jul 07 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
图文讲解vue的v-if使用方法
Feb 11 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
jQuery实现网页拼图游戏
Apr 22 #jQuery
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 #Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 #Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 #Javascript
微信小程序实现保存图片到相册功能
Nov 30 #Javascript
js canvas实现写字动画效果
Nov 30 #Javascript
You might like
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
清空上传控件input file的值
2010/07/03 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
遗嘱公证书标准样本
2014/04/08 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
联片教研活动总结
2014/07/01 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
2014年部门工作总结
2014/11/12 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Python语言规范之Pylint的详细用法
2021/06/24 Python
vue3获取当前路由地址
2022/02/18 Vue.js
Python 绘制多因子柱状图
2022/05/11 Python