vue项目中如何引用tinymce

最近公司在做一个CMS系统的项目，其中富文本编辑框用的很多，目前流行的也很多，包括wangEditor、TinyMCE、百度ueditor、kindeditor、CKEditor等。经过自己的一番翻箱倒柜，最后目标定在TinyMCE和CKEditor（自我认为这两个高大上一点，还是国外的~~~），因为以前对TinyMCE有过了解，而访问CKEditor的官方文档老是被墙，所有就先选定了TinyMCE作为首选。

一、安装

yarn add @tinymce/tinymce-vue

二、引入

 <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>

注意：其中的no-api-key是需要自己申请，不然用不了其中的高级插件，不过不申请的话也能，但是会有警告提示，可以手动关闭（如果不想进入页面每次都提示，自己可以查看那个弹框的类名，自己样式中覆盖display::none，虽然没提示了，但是本人不建议这样）

三、属性

 

<editor
  api-key="your-api-key"
  cloud-channel="5"
  :disabled=false
  id="uuid"
  :init= "{  }"
  initial-value=""
  :inline=true
  model-events= ""
  plugins=""
  tag-name="div"
  toolbar=""
  value=""
/>

 

四、事件触发

<editor @onSelectionChange="handlerFunction" />

如：

• onActivate
• onAddUndo
• onBeforeAddUndo
• onBeforeExecCommand
• onBeforeGetContent
• onBeforeRenderUI
• onBeforeSetContent
• onBeforePaste
• onBlur
• onChange
• onClearUndos
• onClick
• onContextMenu
• onCopy
• onCut
• onDblclick
• onDeactivate
• onDirty
• onDrag
• onDragDrop
• onDragEnd
• onDragGesture
• onDragOver
• onDrop
• onExecCommand
• onFocus
• onFocusIn
• onFocusOut
• onGetContent
• onHide
• onInit
• onKeyDown
• onKeyPress
• onKeyUp
• onLoadContent
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onNodeChange
• onObjectResizeStart
• onObjectResized
• onObjectSelected
• onPaste
• onPostProcess
• onPostRender
• onPreProcess
• onProgressState
• onRedo
• onRemove
• onReset
• onSaveContent
• onSelectionChange
• onSetAttrib
• onSetContent
• onShow
• onSubmit
• onUndo
• onVisualAid

以上是所有的事件函数，具体的可以一一尝试

接下来，要搞一搞CKEditor，对比下，毕竟只有真正尝试下才知道好不好用~~~~

今天到此为止！！！