ckeditor简单使用-白红宇

ckeditor简单使用

阅读量：5907 次

发布时间：2019-06-19

本文共 2946 字，大约阅读时间需要 9 分钟。

在eclipse中新建maven项目ckeditor-demo，添加maven依赖pom.xml


    
       
     
      4.0.0
       
     
      com.guiyi
       
     
      ckeditor
       
     
      war
       
     
      0.0.1-SNAPSHOT
       
     
      ckeditor Maven Webapp
       
     
      http://maven.apache.org
       
     
          
      
             
       
        junit
             
       
        junit
             
       
        3.8.1
             
       
        test
           
              
      		
       
        commons-io
       		
       
        commons-io
       		
       
        2.4
       	
          
      		
       
        commons-fileupload
       		
       
        commons-fileupload
       		
       
        1.3.1
       	
          
      	
      		
       
        javax.servlet
       		
       
        jstl
       		
       
        1.2
       	
      	
      		
       
        javax.servlet.jsp
       		
       
        jsp-api
       		
       
        2.2.1-b03
       		
       
        provided
       	
      	
      	
      		
       
        javax.servlet
       		
       
        javax.servlet-api
       		
       
        3.1.0
       		
       
        provided
       	
      	
      
       	     
       
        com.ckeditor
       	     
       
        ckeditor-java-core
       	     
       
        3.5.3
       	
            
       
     
          
      
       ckeditor

在webapp中复制ckeditor和ckfinder

在webapp中添加index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
     Insert title here ${ctx}
     
      
       
        	var editor = null;	var root = '<%=request.getContextPath()%>';	$(function() {		//参数‘content’是textarea元素的name属性值，而非id属性值		editor = CKEDITOR.replace('content', {			customConfig:root+'/ckeditor/myconfig.js',			on: {                instanceReady: function( ev ) {                    this.dataProcessor.writer.setRules( 'p', {                        indent: false,                        breakBeforeOpen: false,   //
        之前不加换行                        breakAfterOpen: false,    //
        之后不加换行                        breakBeforeClose: false,  //
之前不加换行                        breakAfterClose: false    //
        
之后不加换行7                    });                }            }		}); 				$('#form1 input[name=btn]').on('click',function() {			console.info(editor.getData());		});	});		function doSubmit() {		editor.updateElement(); //非常重要的一句代码        //前台验证工作        //提交到后台	}	
        
         <%=request.getContextPath()%>/display.jsp">  		
         
                        
          
           主题:                     
                                         
           
            内容:

显示结果的jsp页面display.jsp如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%	String topic = request.getParameter("topic");	String content = request.getParameter("content");		out.println(topic);		out.println(content);		%>

转载于:https://my.oschina.net/chaun/blog/408564

你可能感兴趣的文章

如何学习Linux命令-初级篇

查看>>

从Oracle Public Yum为Oracle Linux建立本地的Yum源

查看>>

静态路由和默认路由

查看>>

关于阿里开发者招聘节 |这5道笔试真题你会吗！？？？

查看>>

C#的异常处理机制

查看>>