富文本编辑器 tinymce 的安装与使用

百度的富文本编辑器大家都熟悉，那么下面给大家介绍一款富文本编辑器tinymce ，个人感觉比百度的界面好看，调用方便，就不知道各位大神怎么看咯！

tinymce中文文档

以下是vue中使用示例，献上最终效果图

安装：

npm install tinymce
npm install @tinymce/tinymce-vue

语言设置：

1. 在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/，

在目录public建立一个文件夹tinymce，放语言文件语言文件zh_CN.js和皮肤skin, 然后在node_modules里找到tinymce的skin包，复制到public/tinymce里

以下是封装的富文本组件

使用：
<tinymce ref="tinymce1" :id="'tinymce1'"></tinymce>

获取编辑器内容：this.$refs.tinymce1.tinymceHtml

　　

示例组件

<template>
    <div class="tinymce">
        <Editor :id="id" v-model="tinymceHtml" :init="init"></Editor>
    </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
//--------------------插入引入--------------------
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/imagetools'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu'  //右键菜单插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/colorpicker' //选择颜色插件
import 'tinymce/plugins/textcolor'  //文本颜色插件
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/toc'
import 'tinymce/themes/silver/theme'
export default {
	components:{
        Editor,
    },
    props:['id'],
    data(){
        return{
            init:{
                selector: this.id,//选择HTML元素
                language_url:'/tinymce/zh_CN.js',  //导入语言文件
                language: "zh_CN",//语言设置
                //disabled:true, //禁用
                skin_url: '/tinymce/skins/ui/oxide',//主题样式
                height:300, //高度
                theme: 'silver',
                menubar: false,// 隐藏最上方menu菜单
                toolbar: true,//false禁用工具栏（隐藏工具栏）
                browser_spellcheck: true, // 拼写检查
                branding: false, // 去水印
                image_advtab: true,
                statusbar: false, // 隐藏编辑器底部的状态栏
                elementpath: false,  //禁用下角的当前标签路径
                paste_data_images: true, // 允许粘贴图像
                automatic_uploads: true,
                images_upload_handler: (blobInfo, success, failure) => {
                	//直接转为base64格式显示
                	const img = this.compress('data:image/jpeg;base64,' + blobInfo.base64(),600,1);
                	//const img = 'data:image/jpeg;base64,' + blobInfo.base64();
          			success(img);
          			//以下部分是上传
			        /*var xhr, formData;
			        xhr = new XMLHttpRequest();
			        xhr.withCredentials = false;
			        xhr.open('POST', 'https://uploadfile.cptuatweb.net/fileEntry/oss/uploadFile');//第一个参数是请求方式，第二个参数是请求地址，我这里配置的是struts的action，如果是其他（PHP等）的可这样配置：xxx.php

			        xhr.onload = function () {
			            var json;
			            if (xhr.status !== 200) {
			                failure('HTTP Error: ' + xhr.status);
			                return;
			            }
			            json = JSON.parse(xhr.responseText);
			            if (!json || typeof json.location !== 'string') {
			            failure('Invalid JSON: ' + xhr.responseText);
			                return;
			            }
			            success(json.location);
			        };

			        formData = new FormData();
			        formData.append('file', blobInfo.blob(), blobInfo.filename());
			        xhr.send(formData);*/
			    },
                plugins:
                'lists image imagetools media table wordcount code fullscreen help  toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor' ,
                toolbar:[
                    'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat ',
                    'code  bullist numlist | lists image imagetools media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap  pastetext print preview hr',
                ]
            },
            tinymceHtml:"", 
        }
    },
    mounted(){
        tinymce.init({})
    },
    methods:{
　　　　　//base64压缩　
    	compress(base64String, w, quality) {  //第一个参数base64  第二个长度  第三个参数品质
	        var getMimeType = function (urlData) {
	            var arr = urlData.split(',');
	            var mime = arr[0].match(/:(.*?);/)[1];
	            // return mime.replace("image/", "");
	            return mime;
	        };
	        var newImage = new Image();
	        var imgWidth, imgHeight;

	        var promise = new Promise(resolve => newImage.onload = resolve);
	        newImage.src = base64String;
	        return promise.then(() => {
	            imgWidth = newImage.width;
	            imgHeight = newImage.height;
	            var canvas = document.createElement("canvas");
	            var ctx = canvas.getContext("2d");
	            if (Math.max(imgWidth, imgHeight) > w) {
	                if (imgWidth > imgHeight) {
	                    canvas.width = w;
	                    canvas.height = w * imgHeight / imgWidth;
	                } else {
	                    canvas.height = w;
	                    canvas.width = w * imgWidth / imgHeight;
	                }
	            } else {
	                canvas.width = imgWidth;
	                canvas.height = imgHeight;
	            }
	            ctx.clearRect(0, 0, canvas.width, canvas.height);
	            ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
	            var base64 = canvas.toDataURL(getMimeType(base64String), quality);
	            return base64;
	        });
	    }
    }
}
</script>
<style lang="scss" scoped>

</style>

　　

######