3

私は自分のサイトでepiceditorを使用しており、サーバーによってページに埋め込まれたマークダウンを設定しています。現在、epiceditorが表示されるとき、デフォルトの高さは非常に小さく、コンテンツ全体の表示を処理するためのスクロールバーがあります。divの高さは手動で設定できますが、今のところ、これが私ができる最高の方法です（800pxという適度な大きさに設定しました）。ただし、その高さは、スクロールバーなしでコンテンツ全体に収まるように常に十分な高さにしたいと思います。本質的にoverflow：visibleのようなもの。

これまでの関連部分は次のとおりです

<html>
    <head>
        <script src="/assets/javascripts/epiceditor/js/epiceditor.min.js"       type="text/javascript"></script>

        <script id="postMarkdown" type="text/markdown" data-postId="1">
            #Markdowns in here
            ...
        </script>
        <style>
            #epiceditor{
                height: 800px;
            }
        </style>
        <script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="epiceditor">
        </div>
    </body>
</html>

そしてここにedit.jsソース（coffescriptからコンパイルされたもの）があります

$ ->
    postMarkdown = $("#postMarkdown").first()

    options =
        basePath : '../../assets/javascripts/epiceditor'
    editor = new EpicEditor(options).load()
    postId = postMarkdown.data('postId')
    markdown = postMarkdown.html()
    editor.importFile('posts/'+postId,markdown);
    editor.reflow();

コンテンツが挿入された後、リフローによって高さが拡張されることを期待していましたが、そのような運はありませんでした。ただし、divのサイズを変更してreflowを呼び出すと、正しくサイズ変更されます。高さを決定し、コンテナーのサイズを変更してリフローするように指示できることを期待して、作成されるマークアップを調べました。ただし、複数のiframeが含まれているようで、一見したところ、それがすぐに変更されるとは思っていませんでした。しかし、私はどんな解決策も歓迎します。

また、コンテナのサイズを適切な高さにすると、epiceditorが適切なスペースを埋めることも理解しています。ただし、エディターが残りのサイトデザインで適切なスペースを占めるように、その高さをレンダリングに必要な量にする必要があります。したがって、EpicEditorで設定できるものがあれば、それがそのままオーバーフローしないようにするか、ロード後の高さを決定する方法が設定されます。助けてくれてありがとう。

4

1 に答える 1

4

私はEpicEditorを作った人です、ここにあなたのための解決策があります：

var editor = new EpicEditor({
  basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});

var updateEditorHeight = function () {
  editorHeight = $(editor.getElement('editor').body).height();
  // +20 for padding
  $('#epiceditor').height(editorHeight + 20);
  editor.reflow();
}

editor.load(function (){
  updateEditorHeight();
});

editor.on('update', function () {
  // You should probably put a check here so it doesn't
  // run for every update, but just on update, AND if the
  // element's height is different then before.
  updateEditorHeight();
});

また、CSSで、overflow: hiddenepiceditorのラッパーにを追加して、スクロールバーが大きくなっても表示されないようにしました。

デモ：http：//jsbin.com/eyidey/1/
デモコード：http：//jsbin.com/eyidey/1/edit

アップデート

EpicEditor 0.2.2以降、自動拡張が組み込まれていautogrowます。オプションをオンにするだけです。

于 2013-01-27T11:29:04.880 に答える