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，對比下，畢竟只有真正嘗試下才知道好不好用~~~~

今天到此為止！！！