富文本编辑器 KindEditor

KindEditor 是一套开源的 HTML 可视化编辑器，可支持文字编辑、emoji 表情和图片上传等。主要用于让用户在网站上获得所见即所得编辑效果，兼容 IE、Firefox、Chrome、Safari、Opera 等主流浏览器。效果如图：

准备

1. 在 WEB-INF 下新建文件夹 write，将与文章写作方面的 JSP 放入其中，引入 writedream.jsp 和 writesuccess.jsp 文件。

2. 这里使用的是经过 ZUI 封装后的 KindEditor 富文本编辑器

使用方法主要是引入 ZUI 框架下的 kindeditor.min.js：

<script src="${ctx}/css/zui/lib/kindeditor/kindeditor.min.js"></script>

ZUI 框架文件之前已经给大家了，在 webapp/css下，如图：

也可以去官网下载：

事件源

1. 通过点击个人主页导航栏的写梦或者是右侧的写文章小图标，都可进入写文章页面（writedream.jsp）：

<li><a href="${ctx}/writedream">写梦</a></li>

因为 writedream.jsp 在 WEB-INF 目录下，受保护，不能直接访问，所以需要经过 Controller 层处理后跳转。

2. 在 Controller 包下新建 WriteController 并继承 BaseController：

    @Controllerpublic class WriteController extends BaseController {private final static Logger log = Logger.getLogger(WriteController.class);@RequestMapping("/writedream")public String writedream(Model model) {User user = (User) getSession().getAttribute("user");model.addAttribute("user", user);return "writedream";}}

获取 Session 中的 user 信息，放入 model 中，返回 writedream.jsp 页面。

3. 点击写梦进入 writedream.jsp 页面，效果如下：

梦分类下拉框

代码如下所示：

     <div style="margin-top: 20px;margin-left: 20px;position: absolute;"><div class="dropdown dropdown-hover"><button class="btn" type="button" data-toggle="dropdown" id="dream-diff" style="background-color:#EBEBEB"><span id="fen" >梦分类</span> <span class="caret"></span></button><input id="hidden_cat" hidden="hidden" name="category"/><ul class="dropdown-menu" id="dreamland-category"><li><a>惊悚梦</a></li><li><a>爱情梦</a></li><li><a>武侠梦</a></li><li><a>美食梦</a></li><li><a>工作梦</a></li><li><a>动物梦</a></li><li><a>其他梦</a></li></ul></div></div>

下拉框使用的是 ZUI 的 JS 插件，只要使用相应的 class 属性就能实现相应的效果。

通过点击 li 标签获取该 li 标签内的值，将其赋值给 id 为 fen 的 span 标签和 id 为 hidden_cat 的隐藏 input 标签，input 标签可通过 name 属性传给后台，li 标签的点击事件如下：

     //li标签的点击事件$("#dreamland-category li").click(function(){//jquery的click事件var val = $(this).text();$("#fen").html(val);$("#hidden_cat").val(val);});

通过 $("#dreamland-category li") 获取 id 为 dreamland-category 的 ul 标签的所有 li 对象，click 为单击事件，

$(this) 获取该 li 对象，通过 .text() 方法获取 li 标签内的文本，将其赋值给变量 val。

然后将id为fen的对象的文本设置为该li标签内的文本，主要是选择分类内容

将 val 赋值给 id 为 hidden_cat 的对象的 value 属性，主要是为了通过 name 属性传值给后台。

富文本编辑器的图片上传

1. 创建可视化编辑器的方法，如下所示：