zoukankan      html  css  js  c++  java
  • 15、Vue CLI 3+tinymce 5富文本编辑器整合

    富文本编辑器里大佬们都说tinymce NB!

    插件安装

    inymce官方提供了一个vue的组件tinymce-vue
    如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者购买的直接下载tinymce

    安装tinymce

    npm install tinymce -S

    安装tinymce-vue

    npm install @tinymce/tinymce-vue -S

    package.json

    "@tinymce/tinymce-vue": "^2.1.0",
    "tinymce": "^5.0.11",

    下载中文语言包

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

    image

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

    1、在public目录下新建tinymce,将上面下载的语言包解压到该目录
    2、在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面

    image

    tinymce使用

    封装成组件
    <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'// 字数统计插件
    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>
    
    

    image

    更详细看官方api

  • 相关阅读:
    批处理学习总结之常用命令1
    Delphi常用数据类型
    Delphi预编译指令总结
    Delphi同步互斥总结
    MyEclipse 环境配置总结
    倒排索引
    laravel 学习相关笔记
    elasticsearch倒排索引原理
    原生sql和 TP sql怎么关联?
    elastic
  • 原文地址:https://www.cnblogs.com/zhongchao666/p/11142537.html
Copyright © 2011-2022 走看看