2016-10-18 8 views
0

こんにちは皆さんはdiv内のテキストを編集できるjsの関数を作成しようとしています。ここでの私の見解だ:divのテキストをユーザーが変更できるようにする

@endsection 
<div onload="InitEditable();" id="content-link2"></div> 
@show 

ここでのdivのid = "コンテンツリンク2" の内側にロードされた私のHTMLファイル::

<!DOCTYPE html> 

<html> 
<head> 
    <title>Template 1</title> 
    <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css"> 

</head> 
<body class="pink"> 
<div contenteditable="true" id="content" class="draggable ui-widget-content pink"><p>hello</p></div> 
<div id="comments"> 
<form name="forma"> 
<textarea name="commentUser" id="commentUser" cols="40" rows="5"> 
Comments here... 
</textarea><br> 
<input type="submit" value="Ready!" onClick="writeComment(e);" /> 
</div> 

</form> 
</body> 
</html> 

JSです::

var editorDoc; 
function InitEditable() { 
var editor = document.getElementsById('content-link2'); 
editorDoc = editor.contentWindow.document;   
      var editorBody = editorDoc.div; 

       // turn off spellcheck 
      if ('spellcheck' in editorBody) { // Firefox 
       editorBody.spellcheck = false; 
      } 

      if ('contentEditable' in editorBody) { 
        // allow contentEditable 
       editorBody.contentEditable = true; 
      } 
      else { // Firefox earlier than version 3 
       if ('designMode' in editorDoc) { 
         // turn on designMode 
        editorDoc.designMode = "on";     
       } 
      } 
     } 

私は、プロセスを説明します。顧客がdiv内にhtmlファイルをロードするイメージをクリックします。私は、ユーザーがHTMLファイルであるdiv要素の周りを移動することができ、今私はあなたがcontenteditableをしようとしないのはなぜ顧客がそのdiv要素

So I want to change text inside a red div

+0

**関連コード**の[最小限の完全で検証可能な](http://stackoverflow.com/help/mcve)の例を提供する必要があります。今はあまりにも多くのコードを含んでおり、「div内のテキストを編集する」部分に絞っていません。 –

+0

が完了しました。私はこれだけが必要だと思う、私は何を編集することができるべきかを示すhtmlを含んでいると思う。 –

+0

'document'の' div'のようなプロパティはないので、 'document.getElementsByTagName( 'div')[0 ] 'ページ内の最初のdivにアクセスしたい場合、またはjQueryを使用する場合' $( 'div')[0] ' – jcubic

答えて

0

内のテキストを変更できるようにしたいです。例えば

<div contenteditable="true">Type to edit...</div>

それが言うようMDN - Making Content Editable中:HTMLで

、任意の要素は編集することができます。いくつかのJavaScriptイベント ハンドラを使用すると、Webページを完全で高速な豊富な テキストエディタに変換できます。この記事では、この の機能に関するいくつかの情報を提供します。

+0

これは私です現時点では使用していますが、データベース内のdiv(htmlページ)の変更を保存する機能も実装する必要があります –

+0

Web標準を使用してget()を使用してPHPファイルに送信してみませんか?一度そこに、データベースにアクセスし、そこにテーブルを書き込むようにPHPに伝えますか? – super11

関連する問題