iview引用富文本插件

1.iview安装富文本组件
使用命令npm install tinymce -S

2.把富文本使用的配置文件存放于创建的static文件目录下
在这里插入图片描述
3.在调试和打包的配置文件中配置下用到富文本的页面
在这里插入图片描述
4.在页面中引用富文本
(1)页面的开头引用富文本插件

import tinymce from 'tinymce'

(2)写出富文本的init方法


 - init () {
                      this.$nextTick(() => {
                          let vm = this;
                          let height = document.body.offsetHeight - 300;
                          tinymce.init({
                              selector: '#tinymceEditer',
                              branding: false,
                              elementpath: false,
                              height: height,
                              language: 'zh_CN.GB2312',
                              menubar: 'edit insert view format table tools',
                              plugins: [
                                  'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                                  'searchreplace visualblocks visualchars code fullpage',
                                  'insertdatetime media nonbreaking save table contextmenu directionality',
                                  'emoticons paste textcolor colorpicker textpattern imagetools codesample'
                              ],
                              toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic |
   alignleft    aligncenter alignright alignjustify | bullist numlist
   outdent indent    | link image emoticons media codesample',
                              autosave_interval: '20s',
                              image_advtab: true,
                              table_default_styles: {
                                  width: '100%',
                                  borderCollapse: 'collapse'
                              },
                              setup: function (editor) {
                                  editor.on('init', function (e) {
                                      vm.spinShow = false;
                                      tinymce.get('tinymceEditer').setContent(self.formData.content);
                                  });
                                  editor.on('keydown', function (e) {
                                      self.formData.content = tinymce.get('tinymceEditer').getContent();//将得到的内容进行绑定用于传给后台
                                  });
                              }
                          });
                      });
                  },

(3)在最后的初始化这个方法和获取富文本中的内容

mounted () {
            self.init();
        },
destroyed () {
    tinymce.get('tinymceEditer').destroy();
},
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值