TAEditor — feature test page

A playground that exercises every feature in one place. Use this to verify behavior end-to-end before shipping.

1. Full editor — every button

Try each toolbar button, keyboard shortcut, and Tab behavior. The HTML output below updates live on every change.


  


  
  

    
2. Multiple independent forms on one page

    
Three forms, each with its own editor. Submitting one form posts only that form's content — no cross-talk.


    

      Post A:
      
      

    

    

    

      Post B:
      
      

    

    

    

      Post C:
      
      

    


    
    
(submit any form to see what would be POSTed)

  


  
  

    
3. All three selector patterns work

    
Verify TAEditor.create() accepts an ID, a class, or a tag selector — same one API.


    

      

        By ID — TAEditor.create('#byId')
        
      

      

        By class — TAEditor.create('.byClass')
        
        
      

    


    
    

      
      
    


    
    

  


  
  

    
4. Image upload — three modes side by side

    
Same image button, three different config strategies. Inspect each editor's output to see what gets inserted as <img src>.


    

      

        Mode 1: Base64 (no config)
        
Becomes a data: URI.

        
      

      

        Mode 2: uploadHandler
        
Async fn returns a URL. This demo uses picsum.photos with a random seed.

        
      

    

    
Mode 3 (uploadUrl) requires a real backend — see the README's "Server-side upload endpoint" recipe.

  


  
  

    
5. Math equations

    
Click fx, paste LaTeX, hit Insert. Click any rendered equation to re-open the editor.

    
    

  


  
  

    
6. Sanitizer (paste attack test)

    
Copy the payload below and paste it into the editor. No alert should fire; <script> and onerror should be stripped from the output.

    
<script>alert('XSS')</script>
<img src=x onerror="alert('XSS')">
<a href="javascript:alert('XSS')">Click me</a>

    
    

      
    

    

    

  


  
  

    
7. Save / load round-trip

    
Verify that setData(getData()) is lossless — content (including equations) survives a full serialize/deserialize cycle.

    
    

      
      
      
      
    

    
    
(no snapshot yet)

    
    
(load to see)

    

  


  
  

    
8. Destroy / recreate

    
destroy() should detach the editor and restore the original <textarea> with its current value preserved.