zoukankan      html  css  js  c++  java
  • 其他08富文本编辑器

    01.安装tinymce(注意版本:5.0.16)

    npm install tinymce -S

    02.安装tinymce-vue(注意版本:3.0.1

    npm install @tinymce/tinymce-vue -S

    03.下载中文语言包

      i.tinymce提供了很多的语言包,这里我们下载中文语言包 地址:https://www.tiny.cloud/get-tiny/language-packages/

      ii.下载完后放到静态文件public目录下

      iii.在public目录下新建tinymce,将上面下载的语言包解压到该目录 

      iiii.在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面

    04.tinymce使用

    封装组件,在components里面新建一个组件,将下面内容粘贴进去

    <template>
        <div class="tinymce-box">
            <editor v-model="myValue"
              :init="init"
              :disabled="disabled"
              @onClick="onClick">
            </editor>
        </div>
    </template>
    
    <script>
    import tinymce from 'tinymce/tinymce' //tinymce默认hidden,不引入不显示
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    // 编辑器插件plugins
    // 更多插件参考:https://www.tiny.cloud/docs/plugins/
    import 'tinymce/plugins/image'// 插入上传图片插件
    import 'tinymce/plugins/media'// 插入视频插件
    import 'tinymce/plugins/table'// 插入表格插件
    import 'tinymce/plugins/lists'// 列表插件
    import 'tinymce/plugins/wordcount'// 字数统计插件
    import 'tinymce/icons/default/icons'

    export default { components:{ Editor }, name:'tinymce', props: { value: { type: String, default: '' }, disabled: { type: Boolean, default: false }, plugins: { type: [String, Array], default: 'lists image media table wordcount' }, toolbar: { type: [String, Array], default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat' } }, data(){ return{ init: { language_url: '/tinymce/langs/zh_CN.js', language: 'zh_CN', skin_url: '/tinymce/skins/ui/oxide', // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系 height: 300, plugins: this.plugins, toolbar: this.toolbar, branding: false, menubar: false, // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片, // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler images_upload_handler: (blobInfo, success, failure) => { const img = 'data:image/jpeg;base64,' + blobInfo.base64() success(img) } }, myValue: this.value } }, mounted () { tinymce.init({}) }, methods: { // 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events // 需要什么事件可以自己增加 onClick (e) { this.$emit('onClick', e, tinymce) }, // 可以添加一些自己的自定义事件,如清空内容 clear () { this.myValue = '' } }, watch: { value (newValue) { this.myValue = newValue }, myValue (newValue) { this.$emit('input', newValue) } } } </script> <style scoped> </style>

    使用组件,注意引入文件路径

    <template>
      <div class="home">
        <tinymce
            ref="editor"
            v-model="msg"
            :disabled="disabled"
            @onClick="onClick"
        />
        <button @click="clear">清空内容</button>
        <button @click="disabled = true">禁用</button>
      </div>
    </template>
    <script>
    import tinymce from '@/components/tinymce.vue'
    
    export default {
        name: 'home',
        components: {
            tinymce
        },
        data(){
            return{
                msg: 'Welcome to Use Tinymce Editor',
                        disabled: false
            }
        },
        methods: {
            // 鼠标单击的事件
            onClick (e, editor) {
                console.log('Element clicked')
                console.log(e)
                console.log(editor)
            },
            // 清空内容
            clear () {
                this.$refs.editor.clear()
            }
        }
    }
    </script>

     效果图:

     

  • 相关阅读:
    UVa 1451 Average (斜率优化)
    POJ 1160 Post Office (四边形不等式优化DP)
    HDU 3507 Print Article (斜率DP)
    LightOJ 1427 Substring Frequency (II) (AC自动机)
    UVa 10245 The Closest Pair Problem (分治)
    POJ 1741 Tree (树分治)
    HDU 3487 Play with Chain (Splay)
    POJ 2828 Buy Tickets (线段树)
    HDU 3723 Delta Wave (高精度+calelan数)
    UVa 1625 Color Length (DP)
  • 原文地址:https://www.cnblogs.com/hunter1/p/15735646.html
Copyright © 2011-2022 走看看