ha-tinymce v1.1.0

富文本编辑器

演示案例：

1.创建一个vue.js项目并启动。

npm install -g @vue/cli @vue/cli-service-global' 
npm run dev

2.在入口文件 main.js中引入组件。

import csdcUI from 'csdc-tinymce/packages/index.js'
import 'csdc-tinymce/packages/style/index.scss'
Vue.use(csdcUI)

3.在template中添加DOM结构。

  <cs-tinymce
      ref="editor"
      v-model="msg"
      :disabled="disabled"
      height= '400'
      @onClick="onClick"
    />
    <div class="margin">
      <el-button type="primary" @click="clear">清空内容</el-button>
      <el-button type="primary" @click="disabled = !disabled">禁用</el-button>
    </div>

4.在script中定义数据与编写逻辑。

export default {
  name: 'home',
  data () {
    return {
      msg: `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><ul>
        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
      </ul>`,
      disabled: false
    }
  },
  methods: {
    // 鼠标单击的事件
    onClick (e, editor) {
      console.log('Element clicked')
      console.log(e)
      console.log(editor)
    },
    // 清空内容
    clear () {
      this.$refs.editor.clear()
    }
  }
}

5.在style中编写CSS。

.container {
    width: 100%;
    height: 100%;
  }