Vue.js + element-ui + tinymce 实现富文本（不使用脚手架）-耘朵250

**官方网站：**
[https://www.tiny.cloud/](https://www.tiny.cloud/)

## 样例展示
![](/api/file/getImage?fileId=6579cc024521a0000d00023a)

## 首先要引用官方的CDN

```javascript
<script src="https://cdn.tiny.cloud/1/p535a0rl97lbll4nfz4kxo7o90ie2zr5qzrm04l3xdw45hmc/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
```

如果你不使用CDN，也可以下载包引用到你的项目中
下载完成后，把src地址改成你本地的tinymce.min.js地址
下载地址：
[https://www.tiny.cloud/get-tiny/#self-hosted](https://www.tiny.cloud/get-tiny/#self-hosted)
![](/api/file/getImage?fileId=6579cc024521a0000d000239)

## 然后写HTML代码

```html
<el-input type="textarea" v-model="article"></el-input>
```

实际上，tinymce支持的是textarea标签，但是我使用的是element ui， 而element ui中的input，type="textarea"时下层就是textarea，这样就又可以绑定vue数据，又可以使用富文本功能。

## 组件初始化代码

```javascript
<script>
  tinymce.init({
    selector: 'textarea',
    plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize formatpainter',
    toolbar: 'fullscreen preview code undo redo restoredraft | \
              formatpainter lineheight  fontsize forecolor backcolor bold italic underline strikethrough  | \
              alignleft aligncenter alignright alignjustify outdent indent | \
              bullist numlist | \
              blockquote subscript superscript removeformat | \
              table link image media charmap emoticons hr insertdatetime  | \
              bdmap indent2em axupimgs ',

skin:'oxide-dark', //皮肤
    language:'zh_CN', //语言
    height: 1000, //编辑器高度
    min_height: 1000,
    // menubar: false, //菜单栏
    branding: false, //右下角技术支持
    toolbar_sticky: true, //工具栏跟随滚动
  });
</script>
```

这段是整理下来算比较常用的功能都包含了，需要其他功能，就在plugins中再添加，toolbar是快捷功能栏
皮肤方面：官方的有4种oxide、oxide-dark、tinymce-5、tinymce-5-dark
语言方面：如果你的tinymce.min.js是使用本地包，那么语言也需要引入进包内，参考 [https://www.jianshu.com/p/88566fa751f7](https://www.jianshu.com/p/88566fa751f7)

## vue数据代码

```javascript
const vm = new Vue({
    el: '#app',
    data: () => ({
      article:''
    }),
    computed: {},
    watch: {},
    methods: {
    },
    mounted: function () {
    },
    created: function () {
    }
  });
```

这里data中的article文章内容，可以通过后端接口获取内容，是h5代码。
但是这样绑定只能将数据赋值进富文本中，如果要获取改变后的值，需要用js代码获取

```javascript
const iframe = document.querySelector('.el-textarea iframe');
const html = iframe.contentWindow.document.getElementById('tinymce').innerHTML;
```

不知道是不是因为tinymce的内容在iframe中， 所以双向绑定失效，无法反向赋值，就用笨办法将内容提取出来。

在富文本工具中， 也可以看到编辑后的源代码

![](/api/file/getImage?fileId=6579cc024521a0000d000238)