编辑器的工具栏(后来查证,好像2.版本的tinymce直接就有下滑进度条,根本不用悬浮。哎,版本越高还退化了。)
当输入内容很多时,调整底下内容的格式需要指标翻到最上面来选择比如字体和颜色,工具栏不会跟着内容往下走。现在需要将工具栏往下输入内容时,一直悬浮在页面,方便随时调整格式。
网上找到这个链接
https://gitee.com/isszz/tinymce.toolbarsticky ,这里的攻略是对的。但是他的代码默认是不开启的。而要实现这个功能,必须把这个开启。
cfyun_toolbar_sticky 不开启 插件开关怎么开启呢,就是r=t.getParam("
cfyun_toolbar_sticky",!0把网页里他挂的代码里的
!1改成!0,这样就开启了。
以下是tinymce的plugins的文件夹toolbarsticky/plugin.min.js的完整代码。可以用notepad打开一个别的插件一个的文件,然后粘贴进去就行。把这个文件夹放到tinymce的plugins里面,然后网站后台plugins里加入toolbarsticky就实现了这个功能。/**
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
* Licensed under the LGPL or a commercial license.
* For LGPL see License.txt in the project root for license information.
* For commercial licenses see
https://www.tiny.cloud/ *
* Version: 5.3.1 (2020-05-27)
*/
!function(){"use strict";let t=tinymce.util.Tools.resolve("tinymce.PluginManager"),e=("undefined"!=typeof window?window:Function("return this;")(),{}),o={},i=!0,r=!1,n=null,s=0,l=null;class c{constructor(t){if(!(r=t.getParam("
cfyun_toolbar_sticky",!0,"bool")))return;i=t.getParam("toolbar_sticky_type",!0,"bool"),n=t.getParam("toolbar_sticky_elem","","string"),l=t.getParam("toolbar_sticky_wrap","","string"),s=t.getParam("toolbar_sticky_elem_height",0,"number"),this.editor=t,o.wrap=window,o.editor=t.$(t.container),o.header=o.editor.find(".tox-editor-header"),o.container=o.editor.find(".tox-editor-container"),o.elemHeight=s,l&&"string"==typeof l&&"body"!=l&&(o.wrap=document.querySelector(l)||window);let e=this;return i?(t.on("focus",()=>{e.bind()}),t.on("blur",()=>{e.restore(),e.unBind()})):this.bind(),this}sticky(){return o.editor.hasClass("tox-fullscreen")?(this.restore(),!1):(this.position(),e.isSticky?(o.container.css("padding-top",o.header[0].clientHeight),o.editor.removeClass("tox-tinymce--toolbar-sticky-off").addClass("tox-tinymce--toolbar-sticky-on"),o.header.css({position:"fixed",width:e.width,left:e.left,top:o.elemHeight||0,borderTop:"1px solid #ccc"}),!1):void this.restore())}position(){let t=o.elemHeight;if(n){var i=document.querySelector(n);if(!i)return this.editor.notificationManager.open({text:"ToolbarSticky未获取到:预留位置DOM节点,请查看配置toolbar_sticky_elem。",type:"info"}),!1;t=i.offsetHeight,o.elemHeight=i.clientHeight}e.width=this.editor.container.clientWidth,e.left=o.editor.offset().left+1,e.isSticky=this.scrollTop()>=this.editor.$(o.container).offset().top-t}bind(){o.wrap.addEventListener("scroll",this.throttle(this.sticky.bind(this),60),!1),o.wrap.addEventListener("resize",this.throttle(this.sticky.bind(this),60),!1),this.sticky()}unBind(){o.wrap.removeEventListener("scroll",this.throttle(this.sticky.bind(this),60)),o.wrap.removeEventListener("resize",this.throttle(this.sticky.bind(this),60))}restore(){o.header.attr("style",""),o.container.css("padding-top",0),o.editor.removeClass("tox-tinymce--toolbar-sticky-on").addClass("tox-tinymce--toolbar-sticky-off")}destroy(){e=o={},this.unBind(),this.restore()}scrollTop(){return document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset}now(){return Date.now()||(new Date).getTime()}throttle(t,e){let o,i,r,n=this,s=null,l=0;const c=()=>{l=0,s=null,r=t.apply(o,i),s||(o=i=null)};return()=>{let a=n.now();l||(l=a);let d=e-(a-l);return o=this,i=arguments,d<=0||d>e?(s&&(clearTimeout(s),s=null),l=a,r=t.apply(o,i),s||(o=i=null)):s||(s=setTimeout(c,d)),r}}}t.add("toolbarsticky",function(t){t.on("init",function(e){new c(t)})})}();