TinyMCE 编辑器固定大小且没有滚动条？

发布于 2024-12-07 02:46:03 字数 810 浏览 1 评论 0原文

目前我有这个：

    tinyMCE.init({
// General options
mode : "exact",
elements : "fkField, lkField, ukcField, khField",
theme : "advanced",
plugins : "table",
width : "300",
height: "185",
// Theme options
theme_advanced_buttons1 : "fontsizeselect, bold,italic,underline,bullist, cleanup, |,justifyleft,justifycenter,justifyright",
theme_advanced_buttons2 : "tablecontrols", 
theme_advanced_buttons3 : "", 
theme_advanced_buttons4 : "", 

theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false
    });

这给了我一个尺寸为 300x185 的编辑器。

现在在这个编辑器中，我想这样做你只能写，直到编辑器满为止。（没有滚动条）

所以您无法输入更多文本，并且滚动条不应出现（禁用滚动）

现在您可以在编辑器内部的底部创建新行，它将添加滚动条 <- 我不希望发生

这种情况我该怎么办？这不可能吗？我已经研究了一段时间了，但也许只是我搜索错误..

谢谢

原文

At the moment I have this:

    tinyMCE.init({
// General options
mode : "exact",
elements : "fkField, lkField, ukcField, khField",
theme : "advanced",
plugins : "table",
width : "300",
height: "185",
// Theme options
theme_advanced_buttons1 : "fontsizeselect, bold,italic,underline,bullist, cleanup, |,justifyleft,justifycenter,justifyright",
theme_advanced_buttons2 : "tablecontrols", 
theme_advanced_buttons3 : "", 
theme_advanced_buttons4 : "", 

theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false
    });

This gives me a editor with the size of 300x185.

Now in this editor, I would like to do so you can only write until the editor is full. (without the scroller)

So you are unable to enter more text, and the scroller should not appear (disable scrolling)

Right now you can at the bottom of inside the editor just make new line and it will add the scroller <- which i do not want to happen

How can i do this? Is this unpossible? I have made research for some time now, but maybe it's just me searching wrong..

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

獨角戲 2024-12-14 02:46:03

在ccs文件中添加以下代码

.mceContentBody{
         overflow-y:hidden!important;
      }

，并在tinymce的content_css属性中添加css文件的路径

content_css : /path/to/css/file.ss

add in a ccs file the following code

.mceContentBody{
         overflow-y:hidden!important;
      }

and add the path of css file in content_css attribut of tinymce

content_css : /path/to/css/file.ss

回复收藏 0 原文

热风软妹 2024-12-14 02:46:03

您将需要编写一个自己的插件。检查每次击键的编辑器高度（您可以使用内置的tinymce事件onKeyUp）。如果高度发生变化，请删除最后插入的代码。

编辑：如何获取当前编辑器 iframe 高度

    var currentfr=document.getElementById(editor.id + '_ifr');
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
        currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
    }
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
            currentfr.height = currentfr.Document.body.scrollHeight;
    }

You will need to write an own plugin. Check the editor height on each Keystroke (you may use the built in tinymce event onKeyUp). If the heigth changes remove the last inserted code.

EDIT: Howto get the current editor iframe heigth

    var currentfr=document.getElementById(editor.id + '_ifr');
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
        currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
    }
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
            currentfr.height = currentfr.Document.body.scrollHeight;
    }

回复收藏 0 原文

初见你 2024-12-14 02:46:03

我通过将其添加到我的额外的tinyMCE CSS文件中来使其工作：

IFRAME {overflow:hidden;}

以前，滚动条仅在Firefox中关闭。这也修复了 Chrome 的问题。但是，它确实在底部滚动条的一侧添加了一个灰色条，因此我需要放大文本编辑器的高度。

I got it to work by adding this to my extra tinyMCE CSS file:

IFRAME {overflow:hidden;}

Previously, the scrollbars were only off in Firefox. This fixes it for Chrome as well. However, it does add a gray bar the side of a scrollbar at the bottom, so I need to enlarge the height of my text editor.

回复收藏 0 原文

妄断弥空 2024-12-14 02:46:03

对我来说，它只需向常规样式表添加规则即可工作，不需要将 css 文件添加到 content_css 属性（示例位于 scss 中）

.my-tinymce-container {
  width: 200px;
  .mce-edit-area {
    height: 200px;
    overflow-y: hidden;
  }
}

for me it worked by just adding rules to a regular stylesheet, it wasn't needed to add a css file to content_css attribute (example is in scss)

.my-tinymce-container {
  width: 200px;
  .mce-edit-area {
    height: 200px;
    overflow-y: hidden;
  }
}

回复收藏 0 原文

向地狱狂奔 2024-12-14 02:46:03

更简单和容易的解决方案是：

tinymce.init({
    selector: '#container',
    },
    init_instance_callback: function (ed) {
        tinymce.activeEditor.getBody().style.overflow = 'hidden'
    },
});

解释：
在 Init 中回调获取 TinyMCE 的主体并根据需要更改样式。

在本例中要删除滚动条overflow = 'hidden'。

A lot simpler and easy solution would be:

tinymce.init({
    selector: '#container',
    },
    init_instance_callback: function (ed) {
        tinymce.activeEditor.getBody().style.overflow = 'hidden'
    },
});

Explanation:
In Init callback get the body for TinyMCE and change style as required.

In this case to remove scrollbar overflow = 'hidden'.

回复收藏 0 原文

~没有更多了~