tinymce + vue 富文本編輯

用texterea最多支持換行，如果文本信息想要更加豐富一些，比如增加格式樣式，比如增加圖片，textarea就愛莫能助了

在網上搜尋了一番，發現tinymce是比較方便好用的一款富文本編輯

http://www.tinymce.com/  官網

 

1. 富文本Rich Text Editor在增刪查改四個操作下，只有增和改是需要出現具體的工具欄的，在查看的情況下並不需要

增和改的頁面需要添加， 查v-html中可以顯示html格式的樣式

 

2.安裝

cnpm install @tinymce/tinymce-vue -S 

cnpm install tinymce

cnpm install @tinymce/tinymce-vue -S

 

3.之后將node_modules\tinymce下的skins文件夾和中文語言包解壓后的文件夾放到項目的static目錄下，可以創建一個新的目錄tinymce，在復制到該目錄下

 

4.之后下載中文語言包，也放到tinymce下，和skins目錄同級

 

5.然后就是

<template>
<div>
<div id="preview">
      <h3>內容概覽</h3>
      <p>內容描述： {{tinymceHtml}}</p>
      <br>
      <br>
    </div>

  <div class='tinymce'>
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
  </div>
</div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
  name: 'tinymce',
  data () {
    return {
      tinymceHtml:"請輸入文本",
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide-dark',
        height: 1300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  components: {Editor}
}
</script>

　展示：