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 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 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截取后台登陆密码的代码
2012/05/05 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python编写俄罗斯方块
2020/03/13 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
捐赠仪式主持词
2014/03/19 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
美术课外活动总结
2014/07/08 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
周一给客户的问候语
2015/11/10 职场文书