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();
},