2016-10-20 3 views
0

私の学校の新聞の編集者が情報を入力する場所(つまり、img url、titles、captionなど)に行く方法を作成しています)、既にスタイルが設定されているHTMLコードを出力します。使用可能なHTMLを出力するJSフォームを作成する

そこで彼らは、タイトル領域にフォームに入力します。「タイトル」

と段落エリアで:「これはテストです」

、それでしょう出力このような何か:

<div class="div1"> 
    <span>Title</span> 
    <p>This is a test</p> 
</div> 

(それはあなたが入れた最初のものだと、後でよりを追加することができますので、以来DIV1)

私は「私はちょうどドン、私はそれが可能だ知っている、このような何かを見つけることに探していましたどこから始めるか、あるいは私がGoogleの検索をする場所を知っている。どんな助けでも大歓迎です。

ありがとうございます。

編集:外部企業との契約のため、Wordpressを設定できません。

+0

広すぎる...あなたはそれを達成するために手作りコード、テンプレート、React.JSあるいはCMSから何かを使用することができます。クライアント側またはサーバー側のHTML生成。非常に多くの不特定の変数... – Lucero

+0

おそらくワードプレスをセットアップしてください。 – Brian

+0

自分で好きになり、最初からエディタを作ろうとしないでください。 GoogleのWYSIWYGエディタの結果には、CKEditorとTinyMCEなどが含まれます。実際にJSを十分に書くと、最初からJSを作成して、価値がないことが分かります。 – zer00ne

答えて

0

これは、ソリューションを自分で実装するのか、すでにそこにあるのかを使用するのかによって異なります。 このタイプの機能は、WordpressやSquareSpaceなどのプラットフォームに、WYSIWYG(あなたが見ているものが表示されます)エディタを介してすぐに組み込み可能です。Stackoverflowの質問ボックスに似ています。

カスタムソリューションを実装する場合は、マークダウン言語を検討することをおすすめします。 たとえば、リマーカブルと呼ばれるマークダウンのJavaScriptライブラリの1つがあります。

https://github.com/jonschlinkert/remarkableあなたはマークダウンテキストを描画関数に渡され、それをHTMLに変換見ることができるように

このコードスニペットは、彼らのgithubののREADME

var Remarkable = require('remarkable'); 
var md = new Remarkable(); 

console.log(md.render('# Remarkable rulezz!')); 
// => <h1>Remarkable rulezz!</h1> 

から直接取得されます。

アレックス

関連する問題