测试2

wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

wangEditor基本配置

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>wangEditor基本操作</title>
  7 </head>
  8 <style type="text/css">
  9 .toolbar {
 10     border: 1px solid #ccc;
 11 }
 12 
 13 .text {
 14     border: 1px solid #ccc;
 15     height: 400px;
 16 }
 17 textarea{
 18     width: 100%;
 19     resize: none;
 20     padding: 0 10px;
 21     box-sizing: border-box;
 22 }
 23 </style>
 24 
 25 <body>
 26     
 27        <h2>富文本编辑器1</h2>
 28 
 29     <div id="editor"></div>
 30 
 31     <button onclick="editor1.txt.clear()">清空编辑器</button>
 32     
 33     <button onclick="alert(editor1.txt.html())">获取HTML</button>
 34     
 35     <button onclick="alert(editor1.txt.text())">获取文本</button>
 36 
 37     <button onclick="getJson()">获取json</button>
 38 
 39     <h2>富文本编辑器2</h2>
 40 
 41     <div id="div1" class="toolbar"></div>
 42     
 43     <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
 44     
 45     <div id="div2" class="text" style="min-height: 456px;">
 46     
 47         <!--可使用 min-height 实现编辑区域自动增加高度-->
 48     
 49         <p>请输入内容</p>
 50     
 51     </div>
 52     
 53     <textarea name="" id="text" rows="10"></textarea>
 54 
 55     <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
 56     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 57     <script type="text/javascript" src="script/wangEditor-3.1.1.js"></script>
 58     
 59     <script type="text/javascript">
 60 
 61         // 声明富文本编辑器
 62         var E = window.wangEditor;
 63         
 64         // 初始化富文本编辑器
 65         var editor1 = new E('#editor');
 66 
 67         // css的z-index
 68         editor1.customConfig.zIndex = 100;
 69 
 70         // 自定义菜单配置
 71         editor1.customConfig.menus = [
 72             'head',  // 标题
 73             'bold',  // 粗体
 74             'fontSize',  // 字号
 75             'fontName',  // 字体
 76             'italic',  // 斜体
 77             'underline',  // 下划线
 78             'strikeThrough',  // 删除线
 79             'foreColor',  // 文字颜色
 80             'backColor',  // 背景颜色
 81             'link',  // 插入链接
 82             'list',  // 列表
 83             'justify',  // 对齐方式
 84             'quote',  // 引用
 85             'emoticon',  // 表情
 86             'image',  // 插入图片
 87             'table',  // 表格
 88             'video',  // 插入视频
 89             'code',  // 插入代码
 90             'undo',  // 撤销
 91             'redo'  // 重复
 92         ]
 93 
 94         // 自定义字体
 95         editor1.customConfig.fontNames = [
 96             '宋体',
 97             '微软雅黑',
 98         ]
 99 
100         // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
101         editor1.customConfig.emotions = [
102             {
103                 // tab 的标题
104                 title: '默认',
105                 // type -> 'emoji' / 'image'
106                 type: 'image',
107                 // content -> 数组
108                 content: [
109                     {
110                         alt: '[坏笑]',
111                         src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
112                     },
113                     {
114                         alt: '[舔屏]',
115                         src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
116                     }
117                 ]
118             },
119             {
120                 // tab 的标题
121                 title: 'emoji',
122                 // type -> 'emoji' / 'image'
123                 type: 'emoji',
124                 // content -> 数组
125                 content: ['
    

  
内容来源于网络如有侵权请私信删除

  

  
               
        

 
  标签：
                        jQuery
                                jQuery插件
                                jQuery教程
              

        

         	
      
    
      
    
                

  


                
        	

    你还没有登录，请先登录或注册！
  


        
    
      
  • 还没有人评论，欢迎说说您的想法！
    • 
  


        
        


  

    
相关课程

  

  

    

      

                                              

            

  

    
    
               	
                     
          
        
           
       
      
       
    
  

  

    

      
        jQuery精讲入门
      
    

    

    	 
      3704
                 
      



  	0元 
  	      	  	     
                  限免
              
 	 	    

  


          

                                                

            

  

    
    
                
       
      
       
    
  

  

    

      
        PHP许愿墙项目实战
      
    

    

    	 
      4670
                 
      



  	9.8元