![logo](https://image.upwqy.com/asset/images/logo.gif)
支持版本:5+
我这里使用的是Vue Element Admin框架构建的后台,但是框架本身使用的tinymce版本是4.9.3
,所以这里不能直接使用数学公式插件,需要下载5+版本的tinymce
下载新版tinymce
这里我使用的是5.10.0
,已经更新到了6.6.1
,根据需要下载对应版本
社区版及开发版官方最新打包地址:https://www.tiny.cloud/get-tiny/self-hosted/
社区版:http://download.tiny.cloud/tinymce/community/tinymce_5.10.0.zip
开发版:http://download.tiny.cloud/tinymce/community/tinymce_5.10.0_dev.zip
更多信息可以到 http://tinymce.ax-z.cn/download-all.php 去查看
配置
a.把下载的插件放入到 plugins 目录下
b.找到框架封装的组件 Tinymce
1.更改 tinymceCDN 地址,我把新版的tinymce放到了public/static
目录,所以地址如下。
const tinymceCDN = '/static/tinymce_5.10.0/tinymce.min.js'
index.vue
文件中被注释的 z-index: 2005;
打开。.editor-custom-btn-container {
position: absolute;
right: 4px;
top: 4px;
z-index: 2005;
}
/static/tinymce_5.10.0/skins/ui/oxide
下的 skin.min.css
文件中的 类 tox-tinymce-aux
中的 z-index 值过小导致的。所以就需要调整该值。kityFormula.html
文件中调整,但是不生效 15000
或者更大,这样就可以了。const toolbar = [
' undo redo searchreplace formatselect styleselect ' +
' | toc bold italic underline strikethrough forecolor backcolor fontsizeselect fontselect ' +
' | bullist numlist alignleft aligncenter alignright outdent indent alignjustify ltr rtl ' +
' | removeformat subscript superscript code codesample hr kityformula-editor' +
' | link image charmap anchor blockquote pagebreak insertdatetime media table emoticons' +
' preview fullscreen'
]
export default toolbar
const plugins = [
'advlist', 'anchor', 'autolink', 'autosave', 'code', 'codesample', 'colorpicker',
'colorpicker', 'contextmenu', 'directionality', 'emoticons', 'fullscreen', 'hr', 'image', 'imagetools',
'insertdatetime', 'link', 'lists', 'media', 'nonbreaking', 'noneditable', 'pagebreak',
'preview', 'print', 'save', 'searchreplace', 'spellchecker', 'tabfocus', 'table', 'template', 'textcolor',
'textpattern', 'visualblocks', 'visualchars', 'wordcount', 'toc', 'autolink', 'kityformula-editor'
]
export default plugins