`

Customize CKeditor toolbar and make it work with jQuery

webweb-editorweb-ui 
阅读更多

CKeditor 是一个非常好用的web编辑器，javaEye 上也又很多介绍，有兴趣的同学可以继续围观： http://ckeditor.com/

 

这里主要讲如何定制 ckeditor 的toolbar，以及让 ckeditor 和 jQuery 协同工作。

 

1. 在确保 jQuery 能正常工作后，引入 ckeditor， 在 <head> 区添加。

 

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
 

2. At this point, any textarea, p or div element can be transformed into a rich text editor by simply using the ckeditor() method:



 $( 'textarea.editor' ).ckeditor();



 


3. 定制 toolbar。


 


 


<script>
	$(document).ready(function(){
				
		//customize ckeditor toolbar.
		var config = {
				toolbar:
				[
					['Source','Preview','-','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','TextColor','BGColor'],
					['UIColor','-','Image']
				]
			};
					

		//fire ckeditor	
		$("#text").ckeditor(config);

	});
</script>


 


定制后的 toolbar 如下图：


 




References:


http://ckeditor.com/blog/CKEditor_for_jQuery


CKEditor Toolbar: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar




 


 


  
  

    
      
        
    
          
    • 
          
          
  • 大小: 6.8 KB
    • 
        

      
    
    
      
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      在没有x的情况下配置网络
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics