Question

我在内联模式下使用了tinymce 4.4.1。我希望floatingpanel位于this demo的右侧{/ 1}}。

但即使我将此演示下载到我的服务器，浮动面板也会显示在左侧。

我可以在哪里调整？

以下是我剪切在一起的代码段，以适应上述示例中的一页：

<!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>

Answer 1

您可以使用设置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>

将tinymce浮动面板对齐到右侧

1 个答案: