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>

　展示：