Tinymce中使用 kityformula-editor 数学公式 弹窗层级问题


 

下载插件:kityformula-editor.zip

支持版本: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'
注意,如果不需要数学公式,使用默认的Tinymce组件,这里的地方也需要更换一下,默认的cdn地址加载过于慢,导致富文本组件需要好久才加载出来。

  2.在toolbar.js 文件中增加参数 kityformula-editor
  3.在plugins.js 文件中增加参数 kityformula-editor

 
 
问题:
 
1、右上角的上传按钮不展示
 
解决方案:将 index.vue 文件中被注释的 z-index: 2005;  打开。
.editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 2005;
}
 
2、在正常页面中公式弹窗能正常弹出,但是在 element-ui 中的el-dialog 或者 el-drawer 会有层级问题,无法正常展示出来。
 
解决方案:
   审查元素可以看到是 /static/tinymce_5.10.0/skins/ui/oxide 下的 skin.min.css 文件中的 类 tox-tinymce-aux 中的 z-index 值过小导致的。所以就需要调整该值。

尝试直接在插件中的 kityFormula.html 文件中调整,但是不生效 cry,最后直接在 skin.min.css 中把值调整为15000或者更大,这样就可以了。






另外框架自带 toolbar.js plugins.js 我也进行了调整,可以参考一下。
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


 
 
 
发布时间 : 2023-03-01,阅读量:1721 , 分类: Vue
本文链接:https://upwqy.com/details/293.html
Vuex 的使用方式。 m3u8视频片段分割时长设置几秒合适?