23

私は自分のアプリケーションに必要なこの機能にどのようにアプローチすべきかを考えているところです。基本的に、ユーザーがカスタム ページを作成できるようにして、それらのページを保存して後で見られるようにしたいと考えています。でも、統一感のある構造にしたい。また、痛みがなく、非常にシンプルであることも望んでいます。TinyMCE のようなものを使用できることはわかっていますが、書式設定が面倒な場合があります。

ここに私が欲しいものの小さなスケッチがあります：

スケッチ

http://www.diagram.ly/のようなものですが、テキスト コンテンツ用です。理想的には、ユーザーがページの編集を完了したら、各コンテンツ タイプを表すタグを付けて XML でコンテンツを保存し、レンダリング後にそれに応じてスタイルを適用するだけです。

それは複雑すぎますか、それとももっと単純なものが既に存在しますか? 可能であれば HTML5 を使用することをお勧めします... しかし、私はどんな提案や他の代替案も受け入れます!

ありがとう！

4

4 に答える 4

9

あなたはcleditorを見たことがありますか？jquery UIのドラッグ可能およびドロップ可能と組み合わせて、必要なことを実行できるようにする必要があります。

カスタムの軽量コンテンツ エディターで使用しました。非常にうまく機能します。そのプロジェクトを再訪するか、同様のことを行う場合は、事前に構成されたドラッグ可能なコンテンツ セクションを作成して、Web 初心者が自分のページをさらにカスタマイズできるようにします。

于 2012-05-25T15:19:46.940 に答える
5

バウンティを開いた後、少し周りを見回しました。おそらく、atom テキスト エディターを使用してマークダウンを作成し、マークダウン プレビューを使用することは、それを行う方法でしょうか? 次に、pandocなどのツールを使用して、マークダウンを xml に変換できます。

ドラッグ アンド ドロップではないことはわかっていますが、M$ ワードよりは優れています。

于 2015-07-29T20:25:23.127 に答える
5

medium-editorは、 Mediumで見つかった本当に優れたエディターのよく管理されたクローンのようです。そのアーキテクチャーの原則は here で説明されています。

ここでの解決策は、ドラッグ アンド ドロップのアイデアをなくすことです。代わりに、ユーザーがテキストの一部を選択すると、ツールバーがポップアップ表示され、必要な書式設定を行うことができます。このツールバーは、エンド ユーザーのニーズに合わせてカスタマイズできます。

最終的に、適切でクリーンな整形式の (X)HTML 文字列が得られます。スタイリングを行うには、単純に<link rel="stylesheet" href="/some/file.css" />.

http://jsfiddle.net/sean9999/ut7mk5x5/6/

;(function(w,d,undeinfed){
    "use strict";
    d.addEventListener('DOMContentLoaded',function(){
        var e = d.querySelector('.editable'); // editable div
        var o = d.querySelector('#o'); // debug output
        var f = d.querySelector('#f'); // form
        var editor = new MediumEditor(e);
        var saveDocument = function(htmlfragments){
            var article = '<article>' + htmlfragments + '</article>';
            //    issue an AJAX call with "article" as the payload
            alert( article.replace(/\s{2,}/g,'') );
        };
        f.addEventListener('submit',function(ev){
            ev.preventDefault();
            saveDocument(e.innerHTML);
        });
        editor.subscribe('editableInput', function (event, editable) {
            o.textContent = e.innerHTML;
        });
        o.textContent = e.innerHTML;
    });
})(window,document);
h1 {
    color: gray;
    font-size: small;
}
article {
    border: 3px dotted rgba(255,0,0,.2);
    background-color: rgba(0,0,0,.0333);
    padding: 1em;
}
button {
    font-size: bigger;
    padding: .5em;
    margin: .5em;
}
.editable {
    outline: none;
}
output {
    border: 3px dotted rgba(0,0,255,0.25);
    margin-top: 1em;
    min-height: 5em;
    display: block;
    padding: 1em;
    font-family: Verdana;
    font-size: 10px;
}
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/medium-editor.css" rel="stylesheet"/>
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/themes/default.css" rel="stylesheet"/>
<link href="http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>

<section>
    <article>
        <div class="editable">
            <h2>Edit me, I'm a heading.</h2>
            <p>Edit me too, Chambray letterpress Godard meh, Echo Park slow-carb post-ironic whatever farm-to-table. Sriracha disrupt retro 90's, quinoa deep v Vice migas freegan pickled tattooed. Fashion axe meggings small batch, scenester Carles banh mi Shoreditch salvia.</p>
        </div>        
    </article>
</section>

<form name="f" id="f" action="#">
    <button type="submit">save the document</button>
</form>

<output for="f" id="o"></output>

于 2015-08-04T01:20:24.573 に答える