making Text fett mit document.execCommand() macht Seite

aktualisieren Was ichmaking Text fett mit document.execCommand() macht Seite

ich zu tun versuche ich versuche, einige Text fett zu machen, wenn ich die fett-Button klicken. Dies löst eine Funktion aus, die die execCommand-Funktion aufruft ... leider, wenn ich auf die Schaltfläche klicke, wird die ganze Seite aktualisiert und ich verliere meinen gesamten Text im iframe.

Ich kann den Text für einen Bruchteil einer Sekunde fett und dann die Seite neu geladen sehen.

My-Code

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
    </head> 
    <body onLoad="enableEditMode();"> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3"> 
        <h2>My Text Editor</h2> 

        <form class="" action="index.html" method="post"> 

         <div class="form-group"> 
          <label for="title">Title</label> 
          <input class="form-control" type="title" name="title" value=""> 
         </div> 

         <div class="form-group"> 

          <div class="" id="toolbar"> 
           <button onClick="execCmd('bold')"><i class="fa fa-bold"></i></button> 
          </div> 
          <iframe class="form-control" src="" width="" height="" name="richTextField" style="width:100%;height:100%"></iframe> 

         </div> 

         <button class="btn btn-default btn-block" type="submit" name="button">Go!</button> 
        </form> 
       </div> 
      </div> 
     </div> 

     <script> 
      /** 
      * 
      */ 
      function enableEditMode(){ 
       richTextField.document.designMode = 'On'; 
      } 

      /** 
      * 
      */ 
      function execCmd(command){ 
       richTextField.document.execCommand(command, false, null); 
      } 
     </script> 

    </body> 
</html>

Meine Frage

Wie mache ich meinen Text hier fett und meinen Text bewahren?

Quelle

2017-02-01 Jethro Hazelhurst

Fanden Sie meine Antwort: müssen Sie nur einen Typ zu den Tasten hinzufügen, um zu verhindern, dass sie das Formular automatisch abschicken. bitte nicht in der Funktion

<button onClick="execCmd('bold')" type="button"><i class="fa fa-bold"></i></button>

Quelle

2017-02-01 10:31:54

Ich denke, die Verwendung nicht stimmt Sie zunächst eine Variable

var rtField = document.getElemetByID('richTextField')

setzen konnten! Dann fügen Sie der Schaltfläche, die den Text ändert, einen Eventlistener hinzu:

var btn = document.getElementByID('button') 
btn.addEventListener('click', function (event) { 
    rtField.style.fontWeight = 'bold'; 
}

sollte funktionieren.

Quelle

2017-02-01 10:34:58 user3732793

Gute Tipps, aber ich habe die Antwort auf meine Frage unten gefunden ... aber guter Rat, danke! –

making Text fett mit document.execCommand() macht Seite

Antwort

Verwandte Themen