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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
python Tkinter版学生管理系统
2019/02/20 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python类如何定义私有变量
2020/02/03 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python实现手绘图效果实例分享
2020/07/22 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
仓库主管的岗位职责
2013/12/04 职场文书
初中校园之声广播稿
2014/01/15 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
库房保管员岗位职责
2014/04/07 职场文书
幼儿生日活动方案
2014/08/27 职场文书
采购员岗位职责
2015/02/03 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers