厦门市同安区建设局官方网站,seo推广营销公司,2018年主流网站开发语言,wordpress主题安装后空白一、安装和引入
TinyMCE 是主流富文本编辑器#xff0c;功能非常全#xff0c;你需要的大多数功能它都支持#xff0c;类似在线版的 Word。但它的优势也恰恰是它的劣势#xff0c;如此之多的功能都放上来导致整个编辑器非常重#xff0c;如果只是需要简单功能#xff0c…一、安装和引入
TinyMCE 是主流富文本编辑器功能非常全你需要的大多数功能它都支持类似在线版的 Word。但它的优势也恰恰是它的劣势如此之多的功能都放上来导致整个编辑器非常重如果只是需要简单功能上这么复杂的编辑器大材小用。
TinyMCE 对 Vue.js 的集成和安装非常友好支持 Vue3 和 TypeScript文档写的也非常好。
TinyMCE-Vue文档 TinyMCE 6 原生文档
1. 安装
npm install --save tinymce/tinymce-vue^52. 引入
script setup
import {ref} from vue
import Editor from tinymce/tinymce-vueconst settingref({xxx
})
const contentref()
/scripttemplate
Editorapi-keyxxx:initsettingv-modelcontent
/
/template其中api-key需要到https://www.tiny.cloud/my-account/integrate注册并获取否则编辑器是只读状态。
3. 三种模式
TinyMCE有三种模式经典模式classic、内联模式inline、简洁模式distraction-free。
经典模式是默认模式其在页面内嵌入iframe编辑器里的内容和样式处于沙箱中不会收到页面其它内容的影响。
内联模式需要初始化时配置 inline: true内联区域未激活时编辑器处于隐藏状态当内联区域被激活时编辑器工具栏才会显示。这种特性可用于所见即所得的页面编辑且编辑器内容可受到页面其它区域的样式和脚本的影响。注意内联模式在移动设备下无效。
简洁模式是基于内联模式通过插件quickbars增强了交互性要启用简洁模式可在初始化时配置plugins:[quickbars], toolbar: false, menubar: false, inline: true
4. 手机端应用
为了使手机端编辑器正确表现需要在页面head段添加元信息meta nameviewport contentwidthdevice-width, initial-scale1。
注意有些功能在手机端并不支持比如inline、toolbar_sticky、table_grid、resize、object_resizing等。
二、初始化参数
1. 基本参数
// 尺寸
max_height:800,
min_height:400,
width: 100%menubar: true, // 设置富文本编辑器菜单, 默认true
branding: false, // 关闭底部官网提示 默认true
statusbar: true, // 显示底部状态栏 默认true
readonly: false, // 设置只读属性 默认 false
resize: true, // 调节编辑器大小 默认 true
placeholder: 请输入内容, // 占位符theme:silver,
skin:oxide,
content_style: body, p{font-size: medium;}, // 为内容区编辑自定义css样式
language_url: /tinymce/langs/zh_CN.js, // 中文化 默认为英文
language: zh_CN, // 设置富文本编辑器语言关于语言和皮肤 在项目public目录下新建tinymce目录在该目录下分别新建langs和skins目录用于存放语言包和皮肤包。 语言包下载地址为https://www.tiny.cloud/get-tiny/language-packages/。文件下载后放入/public/tinymce/langs目录下并配置 language_url:/tinymce/langs/zh_CN.js, language:zh_CN 皮肤默认为oxide我们可以通过官网提供的皮肤定制功能自定义皮肤https://skin.tiny.cloud/t5/。将自定义的皮肤文件(CUSTOM)下载后解压到/public/tinymce/skins目录下并配置 skin:CUSTOM, skin_url:/tinymce/skins/CUSTOM/skins/ui。 2. toolbar配置
(1) toolbar基本配置
toolbar:undo redo styles bold italic | link image,
toolbar_mode: warp, //超出宽度的展示方式
toolbar_sticky: true //超出高度的跟随方式toolbar可使用字符串或数组形式。使用字符串形式时通过 | 分组当超出页面宽度后分组内容会折叠折叠模式可通过toolbar_mode参数进行配置。也可设置为false关闭toolbar。
toolbar_mode有四种模式floating、sliding、scrolling和wrap。floating将以悬浮模式弹出折叠内容sliding将把折叠内容展出到工具栏下方scrolling将使工具栏左右可滚动wrap与sliding布局相同但默认展开。
toolbar_sticky设置窗口向下滚动时工具栏是否跟随滚动。
(2) 常用toolbar按钮
名字描述aligncenterCenter aligns the current block or image.alignjustifyFull aligns the current block or image.alignleftLeft aligns the current block or image.alignnoneRemoves the alignment of the current block or image.alignrightRight aligns the current block or image.blockquoteApplies block quote format to the current block level element.backcolorApplies background color to selection.blocksDropdown list with block formats to apply to selection.boldApplies the bold format to the current selection.copyCopies the current selection into clipboard.cutCuts the current selection into clipboard.fontfamilyDropdown list with font families to apply to selection.fontsizeDropdown list with font sizes to apply to selection.The fontsize and fontsizeinput toolbar buttons should not be placed in a toolbar group together or otherwise presented together.fontsizeinputText entry input field to change font size of selection or current insertion point. Also provides increase and decrease font size buttons on either side of said input field.This toolbar button is commonly used in conjunction with the a hrefhttps://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#font_size_input_default_unit classxref pagefont_size_input_default/a configuration option.The fontsize and fontsizeinput toolbar buttons should not be placed in a toolbar group together or otherwise presented together.forecolorApplies foreground/text color to selection.h1Changes current line to the “Heading 1” style.h2Changes current line to the “Heading 2” style.h3Changes current line to the “Heading 3” style.h4Changes current line to the “Heading 4” style.h5Changes current line to the “Heading 5” style.h6Changes current line to the “Heading 6” style.hrInserts a horizontal rule into the editor.indentIndents the current list item or block element.italicApplies the italic format to the current selection.languageDropdown list with languages to apply to the selection. This button requires thecontent_langs option.lineheightDropdown list with line heights to apply to selection.newdocumentCreates a new document.outdentOutdents the current list item or block element.pastePastes the current clipboard into the editor.pastetextToggles plain text pasting mode on/off. When in plain text mode, all rich content is converted into plain text.printPrints the current editor contents.redoTo redo the last undone operation.removeRemoves (deletes) the selected content or the content before the cursor position.removeformatRemoves the formatting from the current selection.selectallSelects all content in the editor.strikethroughApplies strike though format to the current selection.stylesDropdown list with styles to apply to selection.subscriptApplies subscript format to the current selection.superscriptApplies superscript format to the current selection.underlineApplies the underline format to the current selection.undoTo undo the last operation.visualaidToggles the visual aids for invisible elements.
3. plugin配置
(1) advlist
高级列表依赖于lists插件。
plugins:lists advlist
toolbar:bullist numlistbullist提供不同样式是列表圆形、方形等numlist提供数字开头列表可以为数字、字母、罗马字母等
(2) anchor
锚点可配合link插件在插入url时选择设定的锚点实现页内跳转。
plugins:anchor,
toolbar:anchor(3) autolink
自动将url地址转化为link。
plugins:autolink(4) autoresize
随着用户输入内容的增多自动调整编辑器高度。若设定了max_height当编辑器高度达到设定值时将停止自动调整。
plugins:autoresize(5) autosave
根据设定时间间隔自动保存内容以及在离开页面时询问是否保存内容。
plugins:autosave,
toolbar: restoredraft,
autosave_interval: 20s, //自动保存的时间间隔(6) code
插入和编辑文档的html源码。
plugins:code,
toolbar:code(7) codesample
插入代码块可渲染html、js、c、JAVA、PHP、Python等多种类型代码。
plugins:codesample,
toolbar:codesample(8) emoticons
插入表情。
plugins:emoticons,
toolbar:emoticons(9) fullscreen
全屏。
plugins:fullscreen,
toolbar:fullscreen(10) image
插入图片。
上传本地图片有两种配置方法一种是使用image插件提供的image_uploadtab需要同时配置image_upload_url另一种是配置file_picker_callback针对link、media和image三种类型的文件可统一使用file_picker_callback进行处理。
示例中是使用image_uploadtab配置本地上传图片。本文第三节将介绍如何配置file_picker_callback分别上传文件、多媒体和图片该方式是本人推荐的文件上传方式。
plugins:image,
toolbar:image,
image_uploadtab:true, //允许从本地上传图片需要同时配置images_upload_url
images_upload_url:/api/information/upload_img, //配置后台接受和存储图片的url
automatic_uploads:true, //开启自动上传可以不用配置image_upload_handler上传图片将包含在报文files段名字为file。
// images_upload_handler:handleUploadImg, //手工上传函数见下。
image_prepend_url:/minio/information/, //图片上传后的url前缀
paste_data_images: true, //可以直接拖动图片或粘贴图片到编辑区。
images_file_types:jpeg,jpg,png //默认值为jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp//手工配置images_upload_handler:handleUploadImg则使用该回调函数上传图片。回调函数返回一个Promise对象上传成功则返回Promise.resolve(图片url)。
//若返回的图片名可配合image_prepend_url配置项设定图片的url前缀。
async function handleUploadImg(blobInfo, progress){let formDatanew FormData()formData.append(file,blobInfo.blob(), img.png)// 上传头像var retawait axios.post(/api/information/upload_img,formData,{headers:{Content-Type:multipart/form-data}})return ret.data.location
}(11) link
插入超链接。若配置file_picker_callback则可以上传本地文件具体方式见第三节。
plugins:link,
toolbar:link(12) lists
插入多种类型的列表。
plugins:lists,
toolbar:numlist bullist //数字、字母、希腊字母开头的列表和圆圈、圆点、方块开头的列表(13) media
插入多媒体文件。若配置file_picker_callback则可以上传本地文件具体方式见第三节。
plugins:media,
toolbar:media(14) preview
预览。
plugins:preview,
toolbar:preview(15) save
保存文件。
plugins:save,
toolbar:save,
save_onsavecallback:(){//执行axios上传保存文件。...
}(16) searchreplace
查找和替换。
plugins:searchreplace,
toolbar:searchreplace(17) table
表格。
plugins:table,
toolbar:table(18) wordcount
在状态栏显示单词数。
plugins:wordcount,
toolbar:wordcount4. menu配置
若使用toolbox可关闭menu。
menubar:false也可通过类似配置toolbox的方式配置menu
menubar:file edit insert view format table tools help三、上传文件
通过配置file_picker_callback可以在link、image、media插件显示上传本地文件按钮。
file_picker_callback:handleUploadFile,
file_picker_types:file image media, //默认三种类型分别对应link、image和media组件的上传回调函数有三个参数(callback, value, meta)。
callback是一个函数用于返回上传文件的url。
value没有用。
meta提供组件类别信息通过meta.filetype可以判断回调来自于link、image还是media组件。
function handleUploadFile(callback, value, meta){var inputdocument.createElement(input)input.setAttribute(type,file)var accept_filetypesswitch(meta.filetype){ //判断回调来自于哪个组件并为不同组件设置文件后缀过滤。case file:accept_filetypes.doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf,.txt breakcase image:accept_filetypes.webp,.png,.jpg,.jpeg,.gif,.svgbreakcase media:accept_filetypes.weba,.wav,.mp3,.webm,.mpg,.mpeg,.avi,.wmvbreak}input.setAttribute(accept,accept_filetypes) //设置文件选择框的文件过滤选项。input.click() //打开文件选择框input.onchangeasync (){ //选中文件点击确认后执行上传操作var fileinput.files[0]let formDatanew FormData()formData.append(content_type,file.type)formData.append(file, file, file.name)var retawait axios.post(/api/information/upload,formData,{headers:{Content-Type:multipart/form-data}})callback(/minio/information/ret.data.name)}
}
