Write text at left align after adding Image with a caption in editors - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

  1. HOME
  2. Javascript
  3. CodeMirror
  4. Configuration

Description

Write text at left align after adding Image with a caption in editors

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <style>

#froala-editor-p// ww w . java 2s.c  o  m
{
   border:1px solid #0000ff;
   width:1000px;
}

      </style> 
   </head> 
   <body translate="no">   
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"> 
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css"> 
      <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css"> 
      <link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_style.min.css" rel="stylesheet" type="text/css">  
      <div id="froala-editor-p"> 
         <p>this is a test. this is a test. this is a test. this is a test. 
         this is a test. this is a test. this is a test. this is a test. 
         this is a test. this is a test. this is a test. this is a test. 
         this is a test. this is a test. this is a test. this is a test. 
         this is a test. this is a test. this is a test. this is a test. 
         this is a test. </p> 
      </div> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/js/froala_editor.pkgd.min.js"></script>   
      <script>
  $(function() {
    $('div#froala-editor-p').froalaEditor();
    $('div#froala-editor-p').on('froalaEditor.image.inserted', function (e, editor, $img, response) {
      $img.after("<p>Type here</p>"); // insert a new para or div here
     });
  })

    
      </script>  
   </body>
</html>

Related Tutorials