Vue中使用TinyMce的一些问题记录
前言：TinyMCE是一个开源的(LGPL授权协议)富文本编辑器，有关详细介绍下面有相关中文、英文官网说明：英文官网：https://www.tiny.cloud/docs/中文官网：http://tinymce.ax-z.cn/本文的所使用的环境如下:1、"@tinymce/tinymce-vue":"^3.2.1"2、"tinymce":"^5.4.1"3、"vue":"^2.6.11"正文：步骤一：在Vue中引入TinyMcenpminstall@tinymce/tinymce-vue-S步骤一：引入TinyMce到你的子组件importEditorfrom"@tinymce/tinymce-vue"步骤三：注册tinymce-vue到当前子组件中//注册tinymce组件components:{"editor":Editor}步骤四：渲染到templete中去<template><div><editorid="tinymce"v-model="content":init="init"></editor></div></template>editor提供三个必要的参数：id:编辑器初始化时的渲染容器content:编辑器所导出来的编辑内容（富文本格式）init:编辑器初始化配置参数以下提供初始化配置参数（仅供参考），可根据自己的需求进行删减配置：init:{//选择器selector:"#tinymce",theme:"silver",//设置主题suffix:".min",branding:false,//隐藏右下角paste_data_images:true,//允许粘贴图像contextmenu:"boldcopy",//上下文菜单width:"100%",//编辑器宽度height:710,//编辑器高度auto_focus:true,//自动获取光标toolbar_mode:"wrap",//工具栏布局language:"zh_CN",//中文语言language_url:"/tinymce/langs/zh_CN.js",//语言包skin_url:"/tinymce/skins/ui/oxide",//主题色plugins:"linktemplatelistspreviewadvlistinsertdatetimeemoticonscodesamplecharmapautolinkautosaveanchorfullscreenimagecodehelptablewordcount",//插件列表//工具栏列表toolbar1:"codesamplecodeundoredocut|alignleftaligncenteralignrightalignjustifyoutdentindent|insertdatetimecopypasteimagepreview|forecolorbackcolorbolditalicunderlinestrikethroughlinkanchorrestoredraft|blockquotesubscriptsuperscriptremoveformatemoticonstablefullscreen",toolbar2:`charmaphelpbullistnumlist|styleselectformatselectfontselectfontsizeselect`,codesample_global_prismjs:true,//全局使用代码高亮jscontent_css:"/css/prism.css",//代码高亮csscodesample_languages:[{text:"HTML/XML",value:"markup"},{text:"JavaScript",value:"javascript"},{text:"CSS",value:"css"},{text:"Sql",value:"sql"},{text:"Nginx",value:"nginx"},{text:"PHP",value:"php"},{text:"Ruby",value:"ruby"},{text:"Python",value:"python"},{text:"Java",value:"java"},{text:"C",value:"c"},{text:"C#",value:"csharp"},{text:"C++",value:"cpp"},{text:"Dart",value:"dart,"}],//自定义特殊符号charmap_append:[[0x2615,"morningcoffee"],[0x2600,"sun"],[0x2601,"cloud"]],menubar:"fileeditinsertviewformattabletoolshelp",//菜单栏fontsize_formats:"12px14px16px18px24px36px48px56px72px",//字体预设大小images_upload_handler:(blobInfo,success,failure)=>{letformData=newFormData();constimgFile=blobInfo.blob();formData.append("file",imgFile);upLoadFile("/upload",formData).then(res=>{if(res.success){letimgSrc=res.data.url;success(imgSrc);return;}failure:(res)=>{console.log(res.message)}}).catch(err=>{console.log(err);});}}以上配置包含了图片上传到后台服务的示例，配置效果图如下：（有人说那个看板娘是咋回事?，编辑器还自带看板娘？NO!NO!NO!那是我全局配置的看板娘，作为你一个宅男程序猿，这种二次元的东西怎么少得了呢，手动滑稽~）配置到这儿你以为差不多了？toyoungtosimple?，配置到这儿还没有汉化，官方提供的是英文版的，需要我们自行汉化，tinymce-vue需要自费购买的(土豪请绕过)，在这儿我们需要去下载tinymce安装包npminstalltinymce-S下载完成之后，我们在node_modules包管理文件中找到tinymce文件夹，把tinymce拷贝放到你项目当中的静态资源文件当中去(我这儿用的是Vue-cli4,静态资源文件是放在根目录下的public文件夹当中的，如下图)然后参考我上面的配置文件引入语言包就行了，汉化包下载地址
2020-12-15 Vue中使用TinyMce的一些问题记录
2020-12-07 JS获取当前用户浏览器信息和操作系统信息
请问下博主， 博文里面的代码块用的是哪个组件呢？