将定时浮动面板向右对齐

Allign the tinymce floating panel to the right

本文关键字：右对齐 定时      更新时间：2023-09-26

我在内联模式下使用tinymce 4.4.1。我想把floatingpanel放在右边，就像这个演示一样。

但是即使我把这个演示下载到我的服务器上，floatingpanel也会出现在左边。

我可以在哪里调整?

下面是我从上面的例子中截取的一页代码片段:

<!DOCTYPE html>
<html class="content">
  <head>
    <meta charset="UTF-8">
    <title>Inline Mode</title>
    <link rel='stylesheet prefetch' href='http://www.tinymce.com/css/common.min.css'>
    <link rel='stylesheet prefetch' href='http://www.tinymce.com/css/docs.min.css'>
    <style>
      body {
        background: transparent;  
      }
      .content {
        overflow: visible;
        position: relative;
        width: auto;
        margin-left: 0;
        min-height: auto;
        padding: inherit;
      }    
    </style>
    
  </head>
  <body>
    <h2 class="editable">Editable header</h2>
    <div><p>Just more text</p></div>
    <script src='http://cdn.tinymce.com/4/tinymce.min.js'></script>
    <script type="text/javascript">
      tinymce.init({
        selector: 'h2.editable',
        inline: true,
        toolbar: 'undo redo',
        menubar: false
      });
    </script>
    
  </body>
</html>

您可以使用设置fixed_toolbar_container来指定要放置工具栏的元素的CSS选择器。然后你可以把容器放置在你想要的位置。

这不是演示中的方式，但它应该做你想要的。

下面是一个最小的例子，它将工具栏右对齐置于编辑器的正上方: 
<style>
    .toolbar-wrapper { position: relative; }
    .toolbar { position: absolute; right: 0; bottom: 0; }
</style>
<div class="toolbar-wrapper">
    <div class="toolbar"></div>
</div>
<div class="editable">testing 1 2 3</div>
<script type="text/javascript">
    tinymce.init({
        selector: ".editable",
        inline: true,
        fixed_toolbar_container: ".toolbar"
    });
</script>
相关文章：