Ckeditor在线文本编辑器

最新推荐文章于 2023-07-18 11:06:17 发布

70903

最新推荐文章于 2023-07-18 11:06:17 发布

阅读量338

点赞数

示例代码：

 
        <%@ page language="java" contentType="text/html; charset=UTF-8" 
       
        pageEncoding="UTF-8"%> 
       
        <% 
       
        String path = request.getContextPath(); 
       
        String basePath = request.getScheme() + "://" 
       
        + request.getServerName() + ":" + request.getServerPort() 
       
        + path + "/"; 
       
        %>     
       
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
       
        < 
        html 
        > 
       
        < 
        head 
        > 
       
        < 
        base  
        href="<%=basePath%>"> 
       
        < 
        title 
        >Insert title here</ 
        title 
        > 
       
        < 
        script  
        type 
        = 
        "text/javascript"  
        src=\'#\'" /ckeditor/ckeditor.js"></ 
        script 
        > 
       
        < 
        script  
        type 
        = 
        "text/javascript" 
        > 
       
        function test(){ 
       
        //获取文本数据 
       
        var data = CKEDITOR.instances.context.getData(); 
       
        data = data.replace(/\s/g,''); 
       
        data = data.replace(/<\/?[^>]*>/g,''); //去除HTML tag 
       
        data = data.replace(/[ | ]*\n/g,'\n'); //去除行尾空白 
       
        data = data.replace(/&nbsp;/ig,''); 
       
        alert(data); 
       
        document.getElementById("info").innerHTML= data; 
       
        CKEDITOR.instances.content.setData('') 
       
        } 
       
        </ 
        script 
        > 
       
        </ 
        head 
        > 
       
        < 
        body 
        > 
       
        < 
        form  
        action 
        = 
        ""  
        method 
        = 
        "post" 
        > 
       
        < 
        textarea  
        class 
        = 
        "ckeditor"  
        name 
        = 
        "context"  
        id 
        = 
        "context" 
        ></ 
        textarea 
        > 
       
        < 
        input    
        type 
        = 
        "button"  
        value 
        = 
        "提交"  
        onclick 
        = 
        "test()" 
        /> 
       
        </ 
        form 
        > 
       
        < 
        div  
        id 
        = 
        "info" 
        ></ 
        div 
        > 
       
        ${param.context } 
       
        < 
        script  
        type 
        = 
        "text/javascript" 
        > 
       
        init(); 
       
        function init(){ 
       
        //键盘事件绑定 
       
        var editor = CKEDITOR.replace('context'); 
       
        CKEDITOR.instances["context"].on("instanceReady", function () { 
       
        this.document.on("keyup", function(evt){ 
       
        //获取值 
       
        var data = editor.getData(); 
       
        document.getElementById("info").innerHTML =data; 
       
        //清空 
       
        editor.setData(''); 
       
        //销毁 
       
        editor.destroy();  
       
        //删除 
       
        //CKEDITOR.remove(editor); 
       
        //重新绑定事件 
       
        init(); 
       
        }); 
       
        }); 
       
        } 
       
        </ 
        script 
        > 
       
        </ 
        body 
        > 
       
        </ 
        html 
        >