內建的文章編輯器 Editor

Editor (WYSIWYG)

有些後台需要讓使用者編輯文章，原本都會有點頭痛，又要去找插件來放了～～好在他也有內建的文章編輯器，會存成HTML的格式，也就是WYSIWYG。

WYSIWYG 是啥???

what you see is what you get

就是你看到什麼就是什麼

到時候文章直接用v-html就可以一模一樣的呈現出來啦~

引入元件

老地方～/quasar.conf.js

framework: {
  components: ['QEditor']
}

基本實作

恩...非常基本，就是長上面那樣～

<q-editor v-model="model" />

要很多功能就看下面吧~

主要設定版面的屬性有三個

• toolbar

  說明

  設定上方功能列，格式是一個Array包著很多Array，裡面放的參數會對應相對的功能，而不同的Array會拿來當作不同的小區塊

  範例

     <q-editor v-model="model" 
        :toolbar="[
          ['bold', 'italic', 'strike', 'underline'],
          ['hr', 'link'],
          ['fullscreen'],
          ['print']
        ]"
      />
  ``
  [https://ithelp.ithome.com.tw/upload/images/20181102/20111805BrhuRKXhnj.png](https://ithelp.ithome.com.tw/upload/images/20181102/20111805BrhuRKXhnj.png)
  
  

• Definitions

  說明

  對剛剛toolbar的功能做按鈕文字及功能的客製

  能用的屬性

  • label 要顯示的文字
  • icon要顯示的icon
  • tip 小提示
  • cmd 若不想用預設的功能名稱，可以用這個在綁回你要的功能

  /例如這個改粗體的功能
  old: {label: 'Bold'}
  /可以改成自己的名字，並綁回bold的功能
  oooooBIG: { cmd:'bold' }
  ``
  
   `hamdler` 自定義function 像是要保存等等的 裡面填你在methods的function名稱
  
  ``
  ave:{ 
  label:'保存', 
  handler: functionName
  
  ``
  
   `disable` 禁用
  
  ### 範例
  ``
  q-editor v-model="model" 
   :toolbar="[
     ['bold', 'italic', 'strike', 'underline'],
     ['hr', 'link'],
     ['fullscreen'],
     ['print']
   ]"
   :definitions="{
     bold: {label: '粗體', icon: null, tip: '這是粗體'}
   }"
  >
  ``
  [https://ithelp.ithome.com.tw/upload/images/20181102/20111805dqLND6llF5.png](https://ithelp.ithome.com.tw/upload/images/20181102/20111805dqLND6llF5.png)
  

• Font

  說明

  設定選中的字體，要配合toolbar來用

  範例

  q-editor v-model="model" 
   :toolbar="[
     ['arial', 'arial_black', 'comic_sans'],
   ]"
   :fonts="{
     arial: 'Arial',
     arial_black: 'Arial Black',
     comic_sans: 'Comic Sans MS'
   }"
  >	
  ``
  [https://ithelp.ithome.com.tw/upload/images/20181102/20111805lQWk9QHkQ5.png](https://ithelp.ithome.com.tw/upload/images/20181102/20111805lQWk9QHkQ5.png)
  

• 能用的事件

  • @input 輸入時觸發
  • @fullscreen(true/false) 切換全螢幕時觸發