toolbar
字段增加
fontsizeselect
和
fontselect
。
toolbar.js:
const toolbar = [
'styleselect fontselect fontsizeselect formatselect searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript',
'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime table emoticons forecolor backcolor code codesample fullscreen'
export default toolbar
然后,添加fontsize_formats
和font_formats
属性:
fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt",
font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
比较完整的信息:
initTinymce () {
const _this = this
window.tinymce.init({
selector: `#${this.tinymceId}`,
language: this.languageTypeList['zh'],
branding: false,
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
menubar: this.menubar,
plugins: plugins,
end_container_on_empty_block: true,
powerpaste_word_import: 'merge',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
plugin_preview_width: 375,
plugin_preview_height: 668,
nonbreaking_force_tab: true,
fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt",
font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
style_formats: [
title: "Line Height",
items: [
{ title: "1", block: "p", styles: { "line-height": "1.0" } },
{ title: "1.5", block: "p", styles: { "line-height": "1.5" } },
{ title: "1.75", block: "p", styles: { "line-height": "1.75" } },
{ title: "2", block: "p", styles: { "line-height": "2" } },
{ title: "3", block: "p", styles: { "line-height": "3" } },
{ title: "4", block: "p", styles: { "line-height": "4" } },
{ title: "5", block: "p", styles: { "line-height": "5" } }
style_formats_merge: false,
style_formats_autohide: true,
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
_this.hasInit = true
editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true
this.$emit('input', editor.getContent())
setup (editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
convert_urls: false,
images_dataimg_filter (img) {
console.log('images_dataimg_filter', img)
images_upload_handler (blobInfo, success, failure, progress) {
console.log('images_upload_handler', blobInfo)
progress(0)
let files = uploadObject(blobInfo.blob(), (url) => {
success(url)
progress(100)
页面效果: