vue富文本编辑器tinymce

      最近整合了一个富文本编辑器，因为有视频和图片的要求 ，也找了不少，刚开始是考虑jquery的kindeditor，后期因为项目要使用vue框架搭建，所以又找了一个适合vue的tinymce富文本 ，重点介绍一下tinymce的操作流程
      
      tinymce的英文官网写的贼垃圾 不建议观看 乱的一匹，先进行npm下载插件依赖

1. 对于vue.js3
   $ npm install --save “@tinymce/tinymce-vue@^4”

2. 对于vue.js2
   $ npm install --save “@tinymce/tinymce-vue@^3”

 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   </div>
 </template>

 <script>
 import Editor from '@tinymce/tinymce-vue'

 export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
 </script>

因为上面工具toolbar里面的值不是很全 我这边把全的贴出来

               'undo redo | styleselect | fontselect| bold italic  backcolor forecolor | \
               underline strikethrough  | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | link image| \
              advlist autolink lists charmap print preview|\
              searchreplace visualblocks code fullscreen|insertdatetime media table paste | wordcount help '

这个是效果图 唯一的缺点就是这里配置上传的视频和图片是直接输入连接的 ，
不过比较欣慰的就是因为苹果手机限制，视频在手机显示效果直接就是一个播放按钮，没有第一帧的画面，这里竟然做了处理，需要视频的小伙伴必看，在视频里面的高级设置里面，先配置一般的原始码，在配置高级里面的封面，下面是示意图