tinymces

能在vue中以插件的形式使用该组件, 由tinymce移植过来的. 为项目需要, 封装了常用的功能及优化了一些属性值.

截图

图片可调整, 包括旋转, 反转, 大小调整等. 且图片支持上传到七牛或其他存储服务, 请参考文中的示例代码

使用

下载安装

npm i tinymces -S

引用

<template>
    <div id="app">
        <Tinymces id="dd2" v-model="content" :user_config="userConfig"></Tinymces>
    </div>
</template>
 
import Tinymces from 'tinymces'
 
export default {
    data () {
        return {
            content: '',
            userConfig: {}
        }
    },
    components: {
        Tinymces
    }
}

props

属性	说明	类型	默认值
id	编辑器唯一id	String	-
value	编辑器编译后的值(html)	String	''
user_config	自定义配置参数, user_config会与默认的配置参数进行合并, 想要修改默认的配置参数, 可通过user_config覆盖默认的配置, 具体属性请参考以下默认配置参考示例	Object	-

默认配置参考:

let options = {
    selector: '#' + this.id,
    skin: false,
    height: 550,
    toolbar1: 'undo redo formatselect |  bold italic forecolor codesample blockquote | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link table image | fullscreen removeformat',
    toolbar2: '',
    plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking save table contextmenu directionality template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample',
    convert_urls: false,
    image_caption: true,
    image_description: false,
    image_title: true,
    images_upload_credentials: true,
    menubar: false,
    language: 'zh_CN',
    language_url: 'https://cdn.jsdelivr.net/npm/tinymces@latest/static/prism/zh_CN.js',
    codesample_languages: [
      {text: 'Java', value: 'java'},
      {text: 'HTML/XML', value: 'markup'},
      {text: 'JavaScript', value: 'javascript'},
      {text: 'CSS', value: 'css'},
      {text: 'PHP', value: 'php'},
      {text: 'Ruby', value: 'ruby'},
      {text: 'Python', value: 'python'},
      {text: 'C', value: 'c'},
      {text: 'C#', value: 'csharp'},
      {text: 'C++', value: 'cpp'}
    ],
    init_instance_callback: that.initEditor,
    content_css: [
      'https://cdn.jsdelivr.net/npm/tinymces@latest/static/prism/prism.css'
    ],
    paste_retain_style_properties: 'all',
    paste_word_valid_elements: '*[*]',
    paste_data_images: true,
    paste_convert_word_fake_lists: false,
    paste_webkit_styles: 'all',
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false
  }

event

名称	功能	参数
input	监听编辑器内容被改动的事件	value, 当前编辑器中内容的 html值
save	当用户使用快捷键触发保存时, 接收回调通知的事件	value, 当前编辑器中内容的 html值

快捷键

快键键兼容win / mac 系统, 区别在于, mac系统中, ctrl 用 command 键代替

组合按键	功能	备注
ctrl + s	触发用户自定义保存事件	回调用户自定义的save事件, 示例: <Tinymces id="dd2" @save="customerSave"></Tinymces>
ctrl + d	调到最后一行文本	无

深入功能使用

图片上传七牛

可以通过配置回调函数接收用户点击上传文件事件, 在该事件中, 执行上传与回调通知操作, 就可以实现上传功能

user_config: {
    images_upload_handler: function (blobInfo, success, failure) {
      let fileName = new Date().getTime()
      let observable = qiniu.upload(blobInfo.blob(), fileName, '<YOUR KEY>', {region: <YOUR qiniu region>})
      let observer = {
        next (res) {
          if (res.total.percent === 100) {
            // must callback by success function
            success('http://ztqiniu.szzt.com.cn/' + fileName)
          }
        },
        error (err) {
          failure(err)
        }
      }
      observable.subscribe(observer)
    }
}

自定义语言切换

官方参考文章: https://www.tiny.cloud/docs/configure/localization/#language

当前默认为中文, 需要切换成英文, 则需要在 user_config 中, 添加 language 和 language_url属性, 覆盖中文配置

求一杯咖啡

求施舍一杯2.88块的咖啡...