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 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
js实现九宫格抽奖
Mar 19 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开发中常用的字符串操作函数
2011/02/08 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
axios学习教程全攻略
2017/03/26 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
python对字典进行排序实例
2014/09/25 Python
Python有序字典简单实现方法示例
2017/09/28 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python高斯消除矩阵
2019/01/02 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
社区安全检查制度
2014/02/03 职场文书
统计系教授推荐信
2014/02/28 职场文书
春风行动实施方案
2014/03/28 职场文书
孩子教育的心得体会
2014/09/01 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
医院见习报告范文
2014/11/03 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers