diff --git a/novel-admin/src/main/java/com/java2nb/books/controller/BookController.java b/novel-admin/src/main/java/com/java2nb/books/controller/BookController.java index ef7e275..4b68fcf 100644 --- a/novel-admin/src/main/java/com/java2nb/books/controller/BookController.java +++ b/novel-admin/src/main/java/com/java2nb/books/controller/BookController.java @@ -3,6 +3,9 @@ package com.java2nb.books.controller; import java.util.List; import java.util.Map; +import com.java2nb.books.domain.BookContentDO; +import com.java2nb.books.domain.BookIndexDO; +import com.java2nb.books.vo.BookIndexVO; import org.apache.shiro.authz.annotation.RequiresPermissions; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; @@ -22,9 +25,9 @@ import com.java2nb.common.utils.PageBean; import com.java2nb.common.utils.Query; import com.java2nb.common.utils.R; +import javax.jws.WebParam; + /** - * - * * @author xiongxy * @email 1179705413@qq.com * @date 2019-11-13 09:27:04 @@ -64,7 +67,7 @@ public class BookController { @ApiOperation(value = "修改页面", notes = "修改页面") @GetMapping("/edit/{id}") String edit(@PathVariable("id") Long id, Model model) { - BookDO book = bookService.get(id); + BookDO book = bookService.get(id); model.addAttribute("book", book); return "books/book/edit"; } @@ -72,7 +75,7 @@ public class BookController { @ApiOperation(value = "查看页面", notes = "查看页面") @GetMapping("/detail/{id}") String detail(@PathVariable("id") Long id, Model model) { - BookDO book = bookService.get(id); + BookDO book = bookService.get(id); model.addAttribute("book", book); return "books/book/detail"; } @@ -83,7 +86,7 @@ public class BookController { @ApiOperation(value = "新增", notes = "新增") @ResponseBody @PostMapping("/save") - public R save( BookDO book) { + public R save(BookDO book) { if (bookService.save(book) > 0) { return R.ok(); } @@ -96,8 +99,8 @@ public class BookController { @ApiOperation(value = "修改", notes = "修改") @ResponseBody @RequestMapping("/update") - public R update( BookDO book) { - bookService.update(book); + public R update(BookDO book) { + bookService.update(book); return R.ok(); } @@ -107,7 +110,7 @@ public class BookController { @ApiOperation(value = "删除", notes = "删除") @PostMapping("/remove") @ResponseBody - public R remove( Long id) { + public R remove(Long id) { if (bookService.remove(id) > 0) { return R.ok(); } @@ -121,8 +124,69 @@ public class BookController { @PostMapping("/batchRemove") @ResponseBody public R remove(@RequestParam("ids[]") Long[] ids) { - bookService.batchRemove(ids); + bookService.batchRemove(ids); return R.ok(); } + + @ApiOperation(value = "新增章节页面", notes = "新增章节页面") + @GetMapping("/index/add") + String indexAdd(Long bookId, Model model) { + model.addAttribute("bookId",bookId); + return "books/bookIndex/add"; + } + + /** + * 保存章节 + */ + @ApiOperation(value = "新增章节", notes = "新增章节") + @ResponseBody + @PostMapping("/index/save") + public R indexSave(BookIndexDO bookIndex, BookContentDO bookContent) { + if (bookService.saveIndexAndContent(bookIndex,bookContent) > 0) { + return R.ok(); + } + return R.error(); + } + + @GetMapping("/index") + String BookIndex() { + return "books/bookIndex/bookIndex"; + } + + @ApiOperation(value = "获取章节列表", notes = "获取章节列表") + @ResponseBody + @GetMapping("/index/list") + public R indexList(@RequestParam Map params) { + //查询列表数据 + Query query = new Query(params); + List bookIndexList = bookService.indexVOList(query); + int total = bookService.indexVOCount(query); + PageBean pageBean = new PageBean(bookIndexList, total); + return R.ok().put("data", pageBean); + } + + /** + * 删除 + */ + @ApiOperation(value = "删除", notes = "删除") + @PostMapping("/index/remove") + @ResponseBody + public R indexRemove( Long id) { + if (bookService.indexRemove(id) > 0) { + return R.ok(); + } + return R.error(); + } + + /** + * 删除 + */ + @ApiOperation(value = "批量删除", notes = "批量删除") + @PostMapping("/index/batchRemove") + @ResponseBody + public R indexRemove(@RequestParam("ids[]") Long[] ids) { + bookService.batchIndexRemove(ids); + return R.ok(); + } } diff --git a/novel-admin/src/main/java/com/java2nb/books/dao/BookDao.java b/novel-admin/src/main/java/com/java2nb/books/dao/BookDao.java index 01327cf..2a1fca6 100644 --- a/novel-admin/src/main/java/com/java2nb/books/dao/BookDao.java +++ b/novel-admin/src/main/java/com/java2nb/books/dao/BookDao.java @@ -2,10 +2,12 @@ package com.java2nb.books.dao; import com.java2nb.books.domain.BookDO; +import java.util.Date; import java.util.List; import java.util.Map; import org.apache.ibatis.annotations.Mapper; +import org.apache.ibatis.annotations.Param; /** * @@ -29,4 +31,6 @@ public interface BookDao { int remove(Long id); int batchRemove(Long[] ids); + + void uptUpdateTime( @Param("id") Long bookId, @Param("updateTime") Date date); } diff --git a/novel-admin/src/main/java/com/java2nb/books/dao/BookIndexDao.java b/novel-admin/src/main/java/com/java2nb/books/dao/BookIndexDao.java index 366e220..2f6d3a3 100644 --- a/novel-admin/src/main/java/com/java2nb/books/dao/BookIndexDao.java +++ b/novel-admin/src/main/java/com/java2nb/books/dao/BookIndexDao.java @@ -5,7 +5,10 @@ import com.java2nb.books.domain.BookIndexDO; import java.util.List; import java.util.Map; +import com.java2nb.books.vo.BookIndexVO; +import com.java2nb.common.utils.Query; import org.apache.ibatis.annotations.Mapper; +import org.apache.ibatis.annotations.Param; /** * @@ -31,4 +34,10 @@ public interface BookIndexDao { int batchRemove(Long[] ids); void insertBatch(List newBookIndexList); + + Integer queryMaxIndexNum(@Param("bookId") Long bookId); + + List listVO(Query query); + + int countVO(Query query); } diff --git a/novel-admin/src/main/java/com/java2nb/books/service/BookService.java b/novel-admin/src/main/java/com/java2nb/books/service/BookService.java index 9cc347c..fd4b10c 100644 --- a/novel-admin/src/main/java/com/java2nb/books/service/BookService.java +++ b/novel-admin/src/main/java/com/java2nb/books/service/BookService.java @@ -1,6 +1,10 @@ package com.java2nb.books.service; +import com.java2nb.books.domain.BookContentDO; import com.java2nb.books.domain.BookDO; +import com.java2nb.books.domain.BookIndexDO; +import com.java2nb.books.vo.BookIndexVO; +import com.java2nb.common.utils.Query; import java.util.List; import java.util.Map; @@ -27,4 +31,18 @@ public interface BookService { int remove(Long id); int batchRemove(Long[] ids); + + /** + * 保存章节 + */ + int saveIndexAndContent(BookIndexDO bookIndex, BookContentDO bookContent); + + + List indexVOList(Query query); + + int indexVOCount(Query query); + + int indexRemove(Long id); + + int batchIndexRemove(Long[] ids); } diff --git a/novel-admin/src/main/java/com/java2nb/books/service/impl/BookServiceImpl.java b/novel-admin/src/main/java/com/java2nb/books/service/impl/BookServiceImpl.java index 9e555e4..a6500da 100644 --- a/novel-admin/src/main/java/com/java2nb/books/service/impl/BookServiceImpl.java +++ b/novel-admin/src/main/java/com/java2nb/books/service/impl/BookServiceImpl.java @@ -1,21 +1,38 @@ package com.java2nb.books.service.impl; +import com.java2nb.books.dao.BookContentDao; +import com.java2nb.books.dao.BookIndexDao; +import com.java2nb.books.domain.BookContentDO; +import com.java2nb.books.domain.BookIndexDO; +import com.java2nb.books.util.StringUtil; +import com.java2nb.books.vo.BookIndexVO; +import com.java2nb.common.utils.Query; +import org.apache.commons.lang3.StringUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; +import java.util.Date; +import java.util.HashMap; import java.util.List; import java.util.Map; import com.java2nb.books.dao.BookDao; import com.java2nb.books.domain.BookDO; import com.java2nb.books.service.BookService; - +import org.springframework.transaction.annotation.Transactional; @Service public class BookServiceImpl implements BookService { @Autowired private BookDao bookDao; + + @Autowired + private BookIndexDao bookIndexDao; + + @Autowired + private BookContentDao bookContentDao; + @Override public BookDO get(Long id){ @@ -24,6 +41,11 @@ public class BookServiceImpl implements BookService { @Override public List list(Map map){ + String sort = (String) map.get("sort"); + if(StringUtils.isNotBlank(sort)){ + map.put("sort",StringUtil.humpToLine(sort)); + + } return bookDao.list(map); } @@ -34,11 +56,16 @@ public class BookServiceImpl implements BookService { @Override public int save(BookDO book){ + book.setVisitCount(0l); + if(book.getUpdateTime() == null){ + book.setUpdateTime(new Date()); + } return bookDao.save(book); } @Override public int update(BookDO book){ + return bookDao.update(book); } @@ -51,5 +78,43 @@ public class BookServiceImpl implements BookService { public int batchRemove(Long[] ids){ return bookDao.batchRemove(ids); } - + + @Override + @Transactional + public int saveIndexAndContent(BookIndexDO bookIndex, BookContentDO bookContent) { + Integer maxBookNum = bookIndexDao.queryMaxIndexNum(bookIndex.getBookId()); + int nextIndexNum = 0; + if(maxBookNum != null){ + nextIndexNum = maxBookNum + 1; + } + bookIndex.setIndexNum(nextIndexNum); + bookContent.setBookId(bookIndex.getBookId()); + bookContent.setIndexNum(nextIndexNum); + bookDao.uptUpdateTime(bookIndex.getBookId(),new Date()); + + bookIndexDao.save(bookIndex); + bookContentDao.save(bookContent); + return 1; + } + + @Override + public List indexVOList(Query query) { + return bookIndexDao.listVO(query); + } + + @Override + public int indexVOCount(Query query) { + return bookIndexDao.countVO(query); + } + + @Override + public int indexRemove(Long id) { + return bookIndexDao.remove(id); + } + + @Override + public int batchIndexRemove(Long[] ids) { + return bookIndexDao.batchRemove(ids); + } + } diff --git a/novel-admin/src/main/java/com/java2nb/books/util/StringUtil.java b/novel-admin/src/main/java/com/java2nb/books/util/StringUtil.java new file mode 100644 index 0000000..2cb906e --- /dev/null +++ b/novel-admin/src/main/java/com/java2nb/books/util/StringUtil.java @@ -0,0 +1,38 @@ +package com.java2nb.books.util; + +import java.util.regex.Matcher; +import java.util.regex.Pattern; + +public class StringUtil { + private static Pattern linePattern = Pattern.compile("_(\\w)"); + + /** + * 下划线转驼峰 + */ + public static String lineToHump(String str) { + str = str.toLowerCase(); + Matcher matcher = linePattern.matcher(str); + StringBuffer sb = new StringBuffer(); + while (matcher.find()) { + matcher.appendReplacement(sb, matcher.group(1).toUpperCase()); + } + matcher.appendTail(sb); + return sb.toString(); + } + + private static Pattern humpPattern = Pattern.compile("[A-Z]"); + + /** + * 驼峰转下划线 + */ + public static String humpToLine(String str) { + Matcher matcher = humpPattern.matcher(str); + StringBuffer sb = new StringBuffer(); + while (matcher.find()) { + matcher.appendReplacement(sb, "_" + matcher.group(0).toLowerCase()); + } + matcher.appendTail(sb); + return sb.toString(); + } + +} diff --git a/novel-admin/src/main/java/com/java2nb/books/vo/BookIndexVO.java b/novel-admin/src/main/java/com/java2nb/books/vo/BookIndexVO.java new file mode 100644 index 0000000..6927028 --- /dev/null +++ b/novel-admin/src/main/java/com/java2nb/books/vo/BookIndexVO.java @@ -0,0 +1,12 @@ +package com.java2nb.books.vo; + +import com.java2nb.books.domain.BookIndexDO; +import lombok.Data; + +@Data +public class BookIndexVO extends BookIndexDO { + + private String bookName; + + +} diff --git a/novel-admin/src/main/resources/application.yml b/novel-admin/src/main/resources/application.yml index 284cabb..8f957be 100644 --- a/novel-admin/src/main/resources/application.yml +++ b/novel-admin/src/main/resources/application.yml @@ -35,9 +35,9 @@ spring: datasource: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.mysql.jdbc.Driver - url: jdbc:mysql://127.0.0.1:3306/books?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai - username: root - password: test123456 + url: jdbc:mysql://47.106.243.172:3306/books_inner?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai + username: books_inner + password: books_inner!8888 #password: initialSize: 1 minIdle: 3 diff --git a/novel-admin/src/main/resources/mybatis/books/BookIndexMapper.xml b/novel-admin/src/main/resources/mybatis/books/BookIndexMapper.xml index 2943320..dc7f968 100644 --- a/novel-admin/src/main/resources/mybatis/books/BookIndexMapper.xml +++ b/novel-admin/src/main/resources/mybatis/books/BookIndexMapper.xml @@ -9,7 +9,7 @@ - + - + + + + + insert into book_index ( @@ -54,9 +91,9 @@ #{indexName} ) - + - update book_index + update book_index `book_id` = #{bookId}, `index_num` = #{indexNum}, @@ -64,13 +101,13 @@ where id = #{id} - + delete from book_index where id = #{value} - + - delete from book_index where id in + delete from book_index where id in #{id} @@ -89,4 +126,8 @@ + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/mybatis/books/BookMapper.xml b/novel-admin/src/main/resources/mybatis/books/BookMapper.xml index 9f3ab83..f0b2878 100644 --- a/novel-admin/src/main/resources/mybatis/books/BookMapper.xml +++ b/novel-admin/src/main/resources/mybatis/books/BookMapper.xml @@ -3,58 +3,68 @@ - select `id`,`catId`,`pic_url`,`book_name`,`author`,`book_desc`,`score`,`book_status`,`visit_count`,`update_time`,`soft_cat`,`soft_tag` from book where id = #{value} - + select + `id`,`catId`,`pic_url`,`book_name`,`author`,`book_desc`,`score`,`book_status`,`visit_count`,`update_time`,`soft_cat`,`soft_tag` + from book + + and id = #{id} + + + and catId = #{catid} + + + and catId 8 + + + + and pic_url = #{picUrl} + and book_name = #{bookName} + and author = #{author} + and book_desc = #{bookDesc} + and score = #{score} + and book_status = #{bookStatus} + and visit_count = #{visitCount} + and update_time = #{updateTime} + and soft_cat = #{softCat} + and soft_tag = #{softTag} + order by ${sort} ${order} - + order by id desc - + - - limit #{offset}, #{limit} - - - - - - + + limit #{offset}, #{limit} + + + + + + insert into book ( `id`, @@ -86,34 +96,38 @@ #{softTag} ) - - - update book - - `catId` = #{catid}, - `pic_url` = #{picUrl}, - `book_name` = #{bookName}, - `author` = #{author}, - `book_desc` = #{bookDesc}, - `score` = #{score}, - `book_status` = #{bookStatus}, - `visit_count` = #{visitCount}, - `update_time` = #{updateTime}, - `soft_cat` = #{softCat}, - `soft_tag` = #{softTag} - - where id = #{id} - - - + + + update book + + `catId` = #{catid}, + `pic_url` = #{picUrl}, + `book_name` = #{bookName}, + `author` = #{author}, + `book_desc` = #{bookDesc}, + `score` = #{score}, + `book_status` = #{bookStatus}, + `visit_count` = #{visitCount}, + `update_time` = #{updateTime}, + `soft_cat` = #{softCat}, + `soft_tag` = #{softTag} + + where id = #{id} + + + delete from book where id = #{value} - - - delete from book where id in - - #{id} - - + + + delete from book where id in + + #{id} + + + + + update book set update_time = #{updateTime} where id = #{id} + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/js/appjs/books/book/add.js b/novel-admin/src/main/resources/static/js/appjs/books/book/add.js index e3ed59d..d2fe549 100644 --- a/novel-admin/src/main/resources/static/js/appjs/books/book/add.js +++ b/novel-admin/src/main/resources/static/js/appjs/books/book/add.js @@ -1,49 +1,89 @@ -$().ready(function() { - validateRule(); +$().ready(function () { + validateRule(); }); $.validator.setDefaults({ - submitHandler : function() { - save(); - } + submitHandler: function () { + save(); + } }); + function save() { - $.ajax({ - cache : true, - type : "POST", - url : "/books/book/save", - data : $('#signupForm').serialize(),// 你的formid - async : false, - error : function(request) { - parent.layer.alert("Connection error"); - }, - success : function(data) { - if (data.code == 0) { - parent.layer.msg("操作成功"); - parent.reLoad(); - var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引 - parent.layer.close(index); + $.ajax({ + cache: true, + type: "POST", + url: "/books/book/save", + data: $('#signupForm').serialize(),// 你的formid + async: false, + error: function (request) { + parent.layer.alert("Connection error"); + }, + success: function (data) { + if (data.code == 0) { + parent.layer.msg("操作成功"); + parent.reLoad(); + var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引 + parent.layer.close(index); - } else { - parent.layer.alert(data.msg) - } + } else { + parent.layer.alert(data.msg) + } - } - }); + } + }); } + function validateRule() { - var icon = " "; - $("#signupForm").validate({ - rules : { - name : { - required : true - } - }, - messages : { - name : { - required : icon + "请输入姓名" - } - } - }) + var icon = " "; + $("#signupForm").validate({ + ignore: "", + rules: { + catid: { + required: true + }, + picUrl: { + required: true + }, + bookName: { + required: true + }, + author: { + required: true + }, + bookDesc: { + required: true + }, + score: { + required: true + }, + bookStatus: { + required: true + } + + }, + messages: { + catid: { + required: icon + "请选择分类" + }, + picUrl: { + required: icon + "请选择封面" + }, + bookName: { + required: icon + "请填写书名" + }, + author: { + required: icon + "请填写作者" + }, + bookDesc: { + required: icon + "请填写简介" + }, + score: { + required: icon + "请填写评分" + }, + bookStatus: { + required: icon + "请填写更新状态" + } + } + }) } \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/js/appjs/books/book/book.js b/novel-admin/src/main/resources/static/js/appjs/books/book/book.js index c4fd97f..99411a1 100644 --- a/novel-admin/src/main/resources/static/js/appjs/books/book/book.js +++ b/novel-admin/src/main/resources/static/js/appjs/books/book/book.js @@ -1,214 +1,240 @@ - var prefix = "/books/book" -$(function() { - load(); +$(function () { + load(); }); function load() { - $('#exampleTable') - .bootstrapTable( - { - method : 'get', // 服务器数据的请求方式 get or post - url : prefix + "/list", // 服务器数据的加载地址 - // showRefresh : true, - // showToggle : true, - // showColumns : true, - iconSize : 'outline', - toolbar : '#exampleToolbar', - striped : true, // 设置为true会有隔行变色效果 - dataType : "json", // 服务器返回的数据类型 - pagination : true, // 设置为true会在底部显示分页条 - // queryParamsType : "limit", - // //设置为limit则会发送符合RESTFull格式的参数 - singleSelect : false, // 设置为true将禁止多选 - // contentType : "application/x-www-form-urlencoded", - // //发送到服务器的数据编码类型 - pageSize : 10, // 如果设置了分页，每页数据条数 - pageNumber : 1, // 如果设置了分布，首页页码 - //search : true, // 是否显示搜索框 - showColumns : false, // 是否显示内容下拉框（选择显示的列） - sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server" - queryParams : function(params) { - //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对 - var queryParams = getFormJson("searchForm"); - queryParams.limit = params.limit; - queryParams.offset = params.offset; - return queryParams; - }, - // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 - // queryParamsType = 'limit' ,返回参数必须包含 - // limit, offset, search, sort, order 否则, 需要包含: - // pageSize, pageNumber, searchText, sortName, - // sortOrder. - // 返回false将会终止请求 - responseHandler: function (rs) { + $('#exampleTable') + .bootstrapTable( + { + method: 'get', // 服务器数据的请求方式 get or post + url: prefix + "/list", // 服务器数据的加载地址 + // showRefresh : true, + // showToggle : true, + // showColumns : true, + iconSize: 'outline', + toolbar: '#exampleToolbar', + striped: true, // 设置为true会有隔行变色效果 + dataType: "json", // 服务器返回的数据类型 + pagination: true, // 设置为true会在底部显示分页条 + // queryParamsType : "limit", + // //设置为limit则会发送符合RESTFull格式的参数 + singleSelect: false, // 设置为true将禁止多选 + // contentType : "application/x-www-form-urlencoded", + // //发送到服务器的数据编码类型 + pageSize: 10, // 如果设置了分页，每页数据条数 + pageNumber: 1, // 如果设置了分布，首页页码 + //search : true, // 是否显示搜索框 + showColumns: false, // 是否显示内容下拉框（选择显示的列） + sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server" + queryParams: function (params) { + //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对 + var queryParams = getFormJson("searchForm"); + queryParams.limit = params.limit; + queryParams.offset = params.offset; + queryParams.sort = params.sort; + queryParams.order = params.order; + return queryParams; + }, + // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 + // queryParamsType = 'limit' ,返回参数必须包含 + // limit, offset, search, sort, order 否则, 需要包含: + // pageSize, pageNumber, searchText, sortName, + // sortOrder. + // 返回false将会终止请求 + responseHandler: function (rs) { - if (rs.code == 0) { - return rs.data; - } else { - parent.layer.alert(rs.msg) - return {total: 0, rows: []}; - } - }, - columns : [ - { - checkbox : true - }, - { - field : 'id', - title : '' - }, - { - field : 'catid', - title : '' - }, - { - field : 'picUrl', - title : '' - }, - { - field : 'bookName', - title : '' - }, - { - field : 'author', - title : '' - }, - { - field : 'bookDesc', - title : '' - }, - { - field : 'score', - title : '' - }, - { - field : 'bookStatus', - title : '' - }, - { - field : 'visitCount', - title : '' - }, - { - field : 'updateTime', - title : '' - }, - { - field : 'softCat', - title : '' - }, - { - field : 'softTag', - title : '' - }, - { - title : '操作', - field : 'id', - align : 'center', - formatter : function(value, row, index) { - var d = ' '; - var e = ' '; - var r = ' '; - return d + e + r ; - } - } ] - }); + if (rs.code == 0) { + return rs.data; + } else { + parent.layer.alert(rs.msg) + return {total: 0, rows: []}; + } + }, + columns: [ + { + checkbox: true + }, + { + title: '序号', + formatter: function () { + return arguments[2] + 1; + } + }, + { + field: 'catid', + title: '分类', + formatter: function (value, row, index) { + return formatDict("novel_category",value); + } + }, + { + field: 'picUrl', + title: '封面', + formatter: function (value, row, index) { + return ""; + } + }, + { + field: 'bookName', + title: '书名' + }, + { + field: 'author', + title: '作者' + }, + { + field: 'bookDesc', + width: '300px', + title: '简介' + }, + { + field: 'score', + title: '评分' + , sortable: true + }, + { + field: 'bookStatus', + title: '更新状态' + , sortable: true + }, + { + field: 'visitCount', + title: '访问次数' + , sortable: true + }, + { + field: 'updateTime', + title: '更新时间' + , sortable: true + }, + { + title: '操作', + field: 'id', + align: 'center', + formatter: function (value, row, index) { + var d = '详情
'; + /*var e = '编辑
';*/ + var r = '删除
'; + var p = '章节发布 '; + return d + r + p; + } + }] + }); } + function reLoad() { - $('#exampleTable').bootstrapTable('refresh'); + $('#exampleTable').bootstrapTable('refresh'); } + function add() { - layer.open({ - type : 2, - title : '增加', - maxmin : true, - shadeClose : false, // 点击遮罩关闭层 - area : [ '800px', '520px' ], - content : prefix + '/add' // iframe的url - }); + layer.open({ + type: 2, + title: '增加', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/add' // iframe的url + }); } + +function addIndex(bookId) { + layer.open({ + type: 2, + title: '发布章节', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/index/add?bookId='+bookId // iframe的url + }); +} + function detail(id) { - layer.open({ - type : 2, - title : '详情', - maxmin : true, - shadeClose : false, // 点击遮罩关闭层 - area : [ '800px', '520px' ], - content : prefix + '/detail/' + id // iframe的url - }); + layer.open({ + type: 2, + title: '详情', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/detail/' + id // iframe的url + }); } + function edit(id) { - layer.open({ - type : 2, - title : '编辑', - maxmin : true, - shadeClose : false, // 点击遮罩关闭层 - area : [ '800px', '520px' ], - content : prefix + '/edit/' + id // iframe的url - }); + layer.open({ + type: 2, + title: '编辑', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/edit/' + id // iframe的url + }); } + function remove(id) { - layer.confirm('确定要删除选中的记录？', { - btn : [ '确定', '取消' ] - }, function() { - $.ajax({ - url : prefix+"/remove", - type : "post", - data : { - 'id' : id - }, - success : function(r) { - if (r.code==0) { - layer.msg(r.msg); - reLoad(); - }else{ - layer.msg(r.msg); - } - } - }); - }) + layer.confirm('确定要删除选中的记录？', { + btn: ['确定', '取消'] + }, function () { + $.ajax({ + url: prefix + "/remove", + type: "post", + data: { + 'id': id + }, + success: function (r) { + if (r.code == 0) { + layer.msg(r.msg); + reLoad(); + } else { + layer.msg(r.msg); + } + } + }); + }) } function resetPwd(id) { } -function batchRemove() { - var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组 - if (rows.length == 0) { - layer.msg("请选择要删除的数据"); - return; - } - layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", { - btn : [ '确定', '取消' ] - // 按钮 - }, function() { - var ids = new Array(); - // 遍历所有选择的行数据，取每条数据对应的ID - $.each(rows, function(i, row) { - ids[i] = row['id']; - }); - $.ajax({ - type : 'POST', - data : { - "ids" : ids - }, - url : prefix + '/batchRemove', - success : function(r) { - if (r.code == 0) { - layer.msg(r.msg); - reLoad(); - } else { - layer.msg(r.msg); - } - } - }); - }, function() { - }); +function batchRemove() { + var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组 + if (rows.length == 0) { + layer.msg("请选择要删除的数据"); + return; + } + layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", { + btn: ['确定', '取消'] + // 按钮 + }, function () { + var ids = new Array(); + // 遍历所有选择的行数据，取每条数据对应的ID + $.each(rows, function (i, row) { + ids[i] = row['id']; + }); + $.ajax({ + type: 'POST', + data: { + "ids": ids + }, + url: prefix + '/batchRemove', + success: function (r) { + if (r.code == 0) { + layer.msg(r.msg); + reLoad(); + } else { + layer.msg(r.msg); + } + } + }); + }, function () { + + }); } \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/add.js b/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/add.js index aa72954..4b5ce72 100644 --- a/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/add.js +++ b/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/add.js @@ -1,3 +1,36 @@ +var E = window.wangEditor; +var editor2 = new E('#contentEditor'); +// 自定义菜单配置 +editor2.customConfig.menus = [ + 'head', // 标题 + 'bold', // 粗体 + 'fontSize', // 字号 + 'fontName', // 字体 + 'italic', // 斜体 + 'underline', // 下划线 + 'strikeThrough', // 删除线 + 'foreColor', // 文字颜色 + //'backColor', // 背景颜色 + //'link', // 插入链接 + 'list', // 列表 + 'justify', // 对齐方式 + 'quote', // 引用 + 'emoticon', // 表情 + 'image', // 插入图片 + //'table', // 表格 + //'video', // 插入视频 + //'code', // 插入代码 + 'undo', // 撤销 + 'redo' // 重复 +]; +editor2.customConfig.onchange = function (html) { + // html 即变化之后的内容 + $("#content").val(html); +} +editor2.create(); + + + $().ready(function() { validateRule(); }); @@ -11,7 +44,7 @@ function save() { $.ajax({ cache : true, type : "POST", - url : "/books/bookIndex/save", + url : "/books/book/index/save", data : $('#signupForm').serialize(),// 你的formid async : false, error : function(request) { @@ -33,16 +66,25 @@ function save() { } function validateRule() { + + var icon = " "; $("#signupForm").validate({ + ignore: "", rules : { - name : { + indexName : { + required : true + }, + content : { required : true } }, messages : { - name : { - required : icon + "请输入姓名" + indexName : { + required : icon + "请输入章节名" + }, + content : { + required : icon + "请输入章节内容" } } }) diff --git a/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/bookIndex.js b/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/bookIndex.js index 9b9eba2..6a9ed53 100644 --- a/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/bookIndex.js +++ b/novel-admin/src/main/resources/static/js/appjs/books/bookIndex/bookIndex.js @@ -1,182 +1,185 @@ - -var prefix = "/books/bookIndex" -$(function() { - load(); +var prefix = "/books/book/index" +$(function () { + load(); }); function load() { - $('#exampleTable') - .bootstrapTable( - { - method : 'get', // 服务器数据的请求方式 get or post - url : prefix + "/list", // 服务器数据的加载地址 - // showRefresh : true, - // showToggle : true, - // showColumns : true, - iconSize : 'outline', - toolbar : '#exampleToolbar', - striped : true, // 设置为true会有隔行变色效果 - dataType : "json", // 服务器返回的数据类型 - pagination : true, // 设置为true会在底部显示分页条 - // queryParamsType : "limit", - // //设置为limit则会发送符合RESTFull格式的参数 - singleSelect : false, // 设置为true将禁止多选 - // contentType : "application/x-www-form-urlencoded", - // //发送到服务器的数据编码类型 - pageSize : 10, // 如果设置了分页，每页数据条数 - pageNumber : 1, // 如果设置了分布，首页页码 - //search : true, // 是否显示搜索框 - showColumns : false, // 是否显示内容下拉框（选择显示的列） - sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server" - queryParams : function(params) { - //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对 - var queryParams = getFormJson("searchForm"); - queryParams.limit = params.limit; - queryParams.offset = params.offset; - return queryParams; - }, - // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 - // queryParamsType = 'limit' ,返回参数必须包含 - // limit, offset, search, sort, order 否则, 需要包含: - // pageSize, pageNumber, searchText, sortName, - // sortOrder. - // 返回false将会终止请求 - responseHandler: function (rs) { + $('#exampleTable') + .bootstrapTable( + { + method: 'get', // 服务器数据的请求方式 get or post + url: prefix + "/list", // 服务器数据的加载地址 + // showRefresh : true, + // showToggle : true, + // showColumns : true, + iconSize: 'outline', + toolbar: '#exampleToolbar', + striped: true, // 设置为true会有隔行变色效果 + dataType: "json", // 服务器返回的数据类型 + pagination: true, // 设置为true会在底部显示分页条 + // queryParamsType : "limit", + // //设置为limit则会发送符合RESTFull格式的参数 + singleSelect: false, // 设置为true将禁止多选 + // contentType : "application/x-www-form-urlencoded", + // //发送到服务器的数据编码类型 + pageSize: 10, // 如果设置了分页，每页数据条数 + pageNumber: 1, // 如果设置了分布，首页页码 + //search : true, // 是否显示搜索框 + showColumns: false, // 是否显示内容下拉框（选择显示的列） + sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server" + queryParams: function (params) { + //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对 + var queryParams = getFormJson("searchForm"); + queryParams.limit = params.limit; + queryParams.offset = params.offset; + return queryParams; + }, + // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 + // queryParamsType = 'limit' ,返回参数必须包含 + // limit, offset, search, sort, order 否则, 需要包含: + // pageSize, pageNumber, searchText, sortName, + // sortOrder. + // 返回false将会终止请求 + responseHandler: function (rs) { - if (rs.code == 0) { - return rs.data; - } else { - parent.layer.alert(rs.msg) - return {total: 0, rows: []}; - } - }, - columns : [ - { - checkbox : true - }, - { - field : 'id', - title : '' - }, - { - field : 'bookId', - title : '' - }, - { - field : 'indexNum', - title : '' - }, - { - field : 'indexName', - title : '' - }, - { - title : '操作', - field : 'id', - align : 'center', - formatter : function(value, row, index) { - var d = ' '; - var e = ' '; - var r = ' '; - return d + e + r ; - } - } ] - }); + if (rs.code == 0) { + return rs.data; + } else { + parent.layer.alert(rs.msg) + return {total: 0, rows: []}; + } + }, + columns: [ + { + checkbox: true + }, + { + title: '序号', + formatter: function () { + return arguments[2] + 1; + } + }, + { + field: 'bookName', + title: '书名' + }, + { + field: 'indexName', + title: '章节名' + }, + { + title: '操作', + field: 'id', + align: 'center', + formatter: function (value, row, index) { + /*var d = ' '; + var e = ' ';*/ + var r = ' '; + return r; + } + }] + }); } + function reLoad() { - $('#exampleTable').bootstrapTable('refresh'); + $('#exampleTable').bootstrapTable('refresh'); } + function add() { - layer.open({ - type : 2, - title : '增加', - maxmin : true, - shadeClose : false, // 点击遮罩关闭层 - area : [ '800px', '520px' ], - content : prefix + '/add' // iframe的url - }); + layer.open({ + type: 2, + title: '增加', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/add' // iframe的url + }); } + function detail(id) { - layer.open({ - type : 2, - title : '详情', - maxmin : true, - shadeClose : false, // 点击遮罩关闭层 - area : [ '800px', '520px' ], - content : prefix + '/detail/' + id // iframe的url - }); + layer.open({ + type: 2, + title: '详情', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/detail/' + id // iframe的url + }); } + function edit(id) { - layer.open({ - type : 2, - title : '编辑', - maxmin : true, - shadeClose : false, // 点击遮罩关闭层 - area : [ '800px', '520px' ], - content : prefix + '/edit/' + id // iframe的url - }); + layer.open({ + type: 2, + title: '编辑', + maxmin: true, + shadeClose: false, // 点击遮罩关闭层 + area: ['800px', '520px'], + content: prefix + '/edit/' + id // iframe的url + }); } + function remove(id) { - layer.confirm('确定要删除选中的记录？', { - btn : [ '确定', '取消' ] - }, function() { - $.ajax({ - url : prefix+"/remove", - type : "post", - data : { - 'id' : id - }, - success : function(r) { - if (r.code==0) { - layer.msg(r.msg); - reLoad(); - }else{ - layer.msg(r.msg); - } - } - }); - }) + layer.confirm('确定要删除选中的记录？', { + btn: ['确定', '取消'] + }, function () { + $.ajax({ + url: prefix + "/remove", + type: "post", + data: { + 'id': id + }, + success: function (r) { + if (r.code == 0) { + layer.msg(r.msg); + reLoad(); + } else { + layer.msg(r.msg); + } + } + }); + }) } function resetPwd(id) { } -function batchRemove() { - var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组 - if (rows.length == 0) { - layer.msg("请选择要删除的数据"); - return; - } - layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", { - btn : [ '确定', '取消' ] - // 按钮 - }, function() { - var ids = new Array(); - // 遍历所有选择的行数据，取每条数据对应的ID - $.each(rows, function(i, row) { - ids[i] = row['id']; - }); - $.ajax({ - type : 'POST', - data : { - "ids" : ids - }, - url : prefix + '/batchRemove', - success : function(r) { - if (r.code == 0) { - layer.msg(r.msg); - reLoad(); - } else { - layer.msg(r.msg); - } - } - }); - }, function() { - }); +function batchRemove() { + var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组 + if (rows.length == 0) { + layer.msg("请选择要删除的数据"); + return; + } + layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", { + btn: ['确定', '取消'] + // 按钮 + }, function () { + var ids = new Array(); + // 遍历所有选择的行数据，取每条数据对应的ID + $.each(rows, function (i, row) { + ids[i] = row['id']; + }); + $.ajax({ + type: 'POST', + data: { + "ids": ids + }, + url: prefix + '/batchRemove', + success: function (r) { + if (r.code == 0) { + layer.msg(r.msg); + reLoad(); + } else { + layer.msg(r.msg); + } + } + }); + }, function () { + + }); } \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/js/dict-util.js b/novel-admin/src/main/resources/static/js/dict-util.js new file mode 100644 index 0000000..c7d7940 --- /dev/null +++ b/novel-admin/src/main/resources/static/js/dict-util.js @@ -0,0 +1,52 @@ +var dictList = parent.dictList; +$(function () { + + $(".chosen-select").each(function (index, domEle) { + + var dictType = $(domEle).attr("dict-type"); + var dictValue = $(domEle).attr("dict-value"); + var changeFunc = $(domEle).attr("dict-change-func"); + if (dictType) { + var html = ""; + // 加载数据 + for (var i = 0; i < dictList.length; i++) { + if (dictList[i].type == dictType) { + html += '' + + } + } + $(domEle).append(html); + $(domEle).chosen({ + maxHeight: 200 + }); + $(domEle).val(dictValue); + $(domEle).trigger("chosen:updated"); + // 点击事件 + $(domEle).on('change', function (e, params) { + eval(changeFunc+'()'); + }); + } + + + }); + + +}); + + +function formatDict(dictType, value) { + var name = ""; + // 加载数据 + for (var i = 0; i < dictList.length; i++) { + + if (dictList[i].type == dictType && dictList[i].value == value) { + name = dictList[i].name; + } + } + + return name; + + +} + + diff --git a/novel-admin/src/main/resources/static/wangEditor/.eslintignore b/novel-admin/src/main/resources/static/wangEditor/.eslintignore new file mode 100644 index 0000000..c02d109 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/.eslintignore @@ -0,0 +1,2 @@ +src/js/util/ierange.js +src/js/util/poly-fill.js \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/.eslintrc.json b/novel-admin/src/main/resources/static/wangEditor/.eslintrc.json new file mode 100644 index 0000000..0148b38 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/.eslintrc.json @@ -0,0 +1,38 @@ +{ + "env": { + "browser": true, + "commonjs": true, + "es6": true + }, + "globals": { + "ENV": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "no-console":0, + "indent": [ + "error", + 4 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single", + { + "allowTemplateLiterals": true + } + ], + "semi": [ + "error", + "never" + ], + "no-unused-vars": 0, + "no-debugger": 0 + } +} \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/.gitattributes b/novel-admin/src/main/resources/static/wangEditor/.gitattributes new file mode 100644 index 0000000..412eeda --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/.gitattributes @@ -0,0 +1,22 @@ +# Auto detect text files and perform LF normalization +* text=auto + +# Custom for Visual Studio +*.cs diff=csharp +*.sln merge=union +*.csproj merge=union +*.vbproj merge=union +*.fsproj merge=union +*.dbproj merge=union + +# Standard to msysgit +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain diff --git a/novel-admin/src/main/resources/static/wangEditor/.gitignore b/novel-admin/src/main/resources/static/wangEditor/.gitignore new file mode 100644 index 0000000..481571c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/.gitignore @@ -0,0 +1,51 @@ + +#忽略 +**/node_modules/* +node_modules/* +npm-debug.log +example/upload-files + +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# ========================= +# Operating System Files +# ========================= + +# OSX +# ========================= + +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear on external disk +.Spotlight-V100 +.Trashes + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk diff --git a/novel-admin/src/main/resources/static/wangEditor/.npmignore b/novel-admin/src/main/resources/static/wangEditor/.npmignore new file mode 100644 index 0000000..333dd25 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/.npmignore @@ -0,0 +1,5 @@ +node_modules/* +npm-debug.log +docs/* +src/* +example/* \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/ISSUE.md b/novel-admin/src/main/resources/static/wangEditor/ISSUE.md new file mode 100644 index 0000000..796cbee --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/ISSUE.md @@ -0,0 +1,157 @@ +# 问题记录 + +## 版本修复 + +### v3.0.1 + +- [done] 如何设置自动增加高度（补充文档） +- [done] src/js/editor/Bar 改为 Progress，仅供上传图片使用 +- [done] Panel 在右上角增加一个“关闭”按钮 +- [done] 显示页面 table、quote、code 等样式，说明一下 +- [done] 增加自定义上传回调函数，用以自定义返回图片的格式 +- [done] 上传附带的参数，也加入到 form-data 中一份 +- [done] 编辑器默认情况下，菜单栏不能点击，必须focus了编辑器求之后才能点击 +- [done] 点击菜单弹出panel之后，再点击编辑器区域其他地方，panel不消失 +- [done] 自定义filename，v2版本就有 +- [done] ff 中的 bug +- [done] ff 中粘贴图片和文字出现问题 https://github.com/wangfupeng1988/wangEditor/issues/609 +- [done] 火狐浏览器下，创建表格，编辑表格内容时，会出现两个控制点（有人提供了解决方案） +- [done] 配置最多上传的文件个数 +- [done] 连续给两段内容 添加有/无序列表时，样式会出问题，且其他内容找不到了，并且编辑器不处于编辑状态。 +- [done] onchange +- [done] IE11下面一直报错。并且表格无法正常使用 + +### v3.0.2 + +- [done] 用 onchange 完善 vue react 的 demo +- [done] 插入图片之后，光标移动到图片的前面，然后回车，图片消失，并且不能撤销 +- [done] 修复上传图片 customInsert 无效的bug +- [done] 编辑区域 z-index 可配置 +- [done] 上传图片不应该把状态码限制在 200，而是 2xx +- [done] editor.txt.html() 之后，没有定位光标位置 + +### v3.0.3 + +- [done] 粘贴图片在低版本的谷歌浏览器中无法使用，提示验证图片未通过，undefined不是图片。 +- [done] 动态赋值内容，会自动换行，因为给自动加了`


` +- [done] 不选中任何内容，点击“加粗”报错：Failed to execute 'setEnd' on 'Range' +- [done] toolbar 小图标的 z-index 可配置 + +### v3.0.4 + +- [done] 允许使用者通过`replace`实现多语言 +- [done] `_alert()`，可自定义配置提示框 +- [done] 支持用户自定义上传图片的事件，如用户要上传到七牛云、阿里云 + +### v3.0.5 + +- [done] 图片上传中，insertLinkImg 方法中，去掉 img.onload 之后再插入的逻辑吧，这样会打乱多个图片的顺序 +- [done] `` 标签重叠问题，两行文字都是`h2`，然后将第一行选中设置为`h1`，结果是 `

测试1

测试2` +- [done] 补充 ng 集成的示例 https://github.com/wangfupeng1988/wangEditor/issues/859 +- [done] 菜单不能折叠的说明，加入到文档中 +- [done] 上传图片 before 函数中，增加一个判断，可以让用户终止图片的上传 + +### v3.0.6 + +- [done] src/fonts 中的字体文件名改一下，用 icomoon 容易发生冲突 +- [done] 将禁用编辑器的操作完善到文档中 https://www.kancloud.cn/wangfupeng/wangeditor3/368562 +- [done] 开放表格中的粘贴功能（之前因不明问题而封闭） +- [done] 代码块中，光标定位到最后位置时，连续两次回车要跳出代码块 + +### v3.0.7 + +- [done] 紧急修复上一个版本导致的菜单图标不显示的 bug + +### v3.0.8 + +- [done] 修复 backColor 和 foreColor 代码文件名混淆的问题 +- [done] 修改 IE 中 “引用” 的功能 +- [done] 增加粘贴过滤样式的可配置 +- [done] 修复 IE 粘贴文字的问题 + +### v3.0.9 + +- [done] config 中，上传图片的 token 注视掉 +- [done] 将一些常见 API 开放，写到文档中 https://www.kancloud.cn/wangfupeng/wangeditor3/404586 +- [done] IE 火狐 插入多行代码有问题 +- [done] 粘贴时，在`

`中，不能只粘贴纯文本，还得要图片 +- [done] 粘贴内容中，过滤掉``注释 +- [done] **支持上传七牛云存储** + +### v3.0.10 + +- [done] 支持插入网络图片的回调函数 +- [done] 插入链接时候的格式校验 +- [done] 支持拖拽上传 + +### v3.0.11 + +- [done] 如何用 textarea 创建编辑器，完善到文档中，许多人提问 +- [done] 修复`editor.customConfig.customUploadImg`不触发的 bug +- [done] 修复有序列表和无序列表切换时 onchange 不触发的 bug + +### v3.0.12 + +- [done] 增加 onfocus 和 onblur （感谢 [hold-baby](https://github.com/hold-baby) 提交的 [PR](https://github.com/wangfupeng1988/wangEditor/pull/1076)） +- [done] 上传的自定义参数`editor.customConfig.uploadImgParams`是否拼接到 url 中，支持可配置 +- [done] onchange 触发的延迟时间，支持可配置 + +### v3.0.13 + +- [done] 修复图片 选中/取消选中 时，触发 onchange 的问题 +- [done] 修复只通过 length 判断 onchange 是否触发的问题 +- [done] 增加插入网络图片的校验函数 +- [done] 增加自定义处理粘贴文本的事件 +- [done] 修复选中一个图片时点击删除键会误删除其他内容的 bug +- [done] 修复 window chrome 中“复制图片”然后粘贴图片，会粘贴为两张的 bug +- [done] 修复无法撤销“引用”的问题 + +### v3.0.14 + +- [done] 可以配置前景色、背景色 +- [done] 回车时无法从`

....

`中跳出 +- [done] 增加获取 JSON 格式内容的 API + +### v3.0.15 + +- [done] 表情兼容图片和 emoji ，都可自定义配置 + +### v3.0.16 + +- [done] 修复粘贴图片的 bug +- [done] 修复`pasteTextHandle`执行两次的问题 +- [done] 修复插入链接时，文字和链接为空时，`linkCheck`不执行的 bug +- [done] 粘贴 html 时，过滤掉其中的`data-xxx`属性 +- [done] 修复中文输入法输入过程中出发 onchange 的问题，感谢 [github.com/CongAn](https://github.com/CongAn) PR +- [done] `editor.txt.html`和`editor.txt.text`中，替换`​`字符为空字符串 +- [done] 精确图片大小计算，将`maxSize / 1000 / 1000`改为`maxSize / 1024 / 1024` +- [done] 修复 droplist 类型菜单（颜色、背景色等）点击不准确的问题 + +### v3.0.17 + +- [done] 合并 pr [菜单和编辑区域分离 onfocus onblur 失效bug](https://github.com/wangfupeng1988/wangEditor/pull/1174) ，感谢 [hold-baby](https://github.com/hold-baby) 提供 pr +- [done] 使用`document.execCommand("styleWithCSS", null, true)`，这样设置字体颜色就会用 css 而不是用`` + + +### 近期计划解决 + +- 撤销的兼容性问题（会误伤其他编辑器或者 input textarea 等），考虑用 onchange 记录 undo 和 redo 的内容（但是得考虑直接修改 dom 的情况，如 quote code img list table 菜单） + - 列表撤销会删除一行？https://github.com/wangfupeng1988/wangEditor/issues/1131 + - 页面中有 input 等输入标签时，undo redo 会误伤 https://github.com/wangfupeng1988/wangEditor/issues/1024 + - 两个编辑器 undo 的问题 https://github.com/wangfupeng1988/wangEditor/issues/1010 + - list undo redo 有问题。选中几行，先设置有序列表，再设置无序列表，然后撤销，就能复现问题 +- 粘贴文字的样式问题（可暂时配置 `pasteTextHandle` 自行处理） + - 先输入文字，再粘贴 excel 表格，样式丢失 https://github.com/wangfupeng1988/wangEditor/issues/1000 + - IE 11 直接输入文字会空一行在第二行出现内容 https://github.com/wangfupeng1988/wangEditor/issues/919 + - windows 下 word excel 的粘贴，存在垃圾数据 + +## 待排期 + +- 调研 safari、IE 和ff中粘贴图片 https://github.com/wangfupeng1988/wangEditor/issues/831 +- 图片调整大小，表格调整的方式，是否用 toolbar 的方式？ +- 删除掉`./release`之后，执行`npm run release`会报错，原因是`fonts`文件没拷贝全，就要去替换`css`中的字体文件为`base64`格式，导致找不到文件。 +- 先点击'B'再输入内容这种形式，前期先支持 webkit 和 IE，火狐的支持后面再加上 +- 图片压缩 canvas https://github.com/think2011/localResizeIMG +- github 徽章 https://github.com/EyreFree/GitHubBadgeIntroduction +- 将代码在进行拆分，做到“每个程序只做一件事”，不要出现过长的代码文件。例如 `src/js/command/index.js` 和 `src/js/selection/index.js` + diff --git a/novel-admin/src/main/resources/static/wangEditor/LICENSE b/novel-admin/src/main/resources/static/wangEditor/LICENSE new file mode 100644 index 0000000..5239660 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2017 王福朋 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/novel-admin/src/main/resources/static/wangEditor/README.md b/novel-admin/src/main/resources/static/wangEditor/README.md new file mode 100644 index 0000000..0ab9445 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/README.md @@ -0,0 +1,70 @@ + +# wangEditor + +## 介绍 + +**wangEditor** —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 + +- 官网：[www.wangEditor.com](http://www.wangeditor.com/) +- 文档：[www.kancloud.cn/wangfupeng/wangeditor3/332599](http://www.kancloud.cn/wangfupeng/wangeditor3/332599) +- 源码：[github.com/wangfupeng1988/wangEditor](https://github.com/wangfupeng1988/wangEditor) （欢迎 star） + +![图片](http://images2015.cnblogs.com/blog/138012/201705/138012-20170530202905633-1840158981.png) + +*查看 v2 版本的代码和文档点击[这里](https://github.com/wangfupeng1988/wangEditor/tree/v2)* + + +## 下载 + +- 直接下载：[https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releases) +- 使用`npm`下载：`npm install wangeditor` （注意 `wangeditor` 全部是**小写字母**） +- 使用`bower`下载：`bower install wangEditor` （前提保证电脑已安装了`bower`） +- 使用CDN：[//unpkg.com/wangeditor/release/wangEditor.min.js](https://unpkg.com/wangeditor/release/wangEditor.min.js) + + +## 使用 + +```javascript +var E = window.wangEditor +var editor = new E('#div1') +editor.create() +``` + + +## 运行 demo + +- 下载源码 `git clone git@github.com:wangfupeng1988/wangEditor.git` +- 安装或者升级最新版本 node（最低`v6.x.x`） +- 进入目录，安装依赖包 `cd wangEditor && npm i` +- 安装包完成之后，windows 用户运行`npm run win-example`，Mac 用户运行`npm run example` +- 打开浏览器访问[localhost:3000/index.html](http://localhost:3000/index.html) +- 用于 React、vue 或者 angular 可查阅[文档](http://www.kancloud.cn/wangfupeng/wangeditor3/332599)中[其他](https://www.kancloud.cn/wangfupeng/wangeditor3/335783)章节中的相关介绍 + +## 交流 + +### QQ 群 + +以下 QQ 群欢迎加入交流问题（可能有些群已经满员） + +- 164999061 +- 281268320 + +### 提问 + +注意，作者只受理以下几种提问方式，其他方式直接忽略 + +- 直接在 [github issues](https://github.com/wangfupeng1988/wangEditor/issues) 提交问题 +- 去[知乎](https://www.zhihu.com/)提问，并邀请[作者](https://www.zhihu.com/people/wang-fu-peng-54/activities)来回答 +- 去[segmentfault](https://segmentfault.com)提问，并邀请[作者](https://segmentfault.com/u/wangfupeng1988)来回答 + +每次升级版本修复的问题记录在[这里](./ISSUE.md) + +## 关于作者 + +- 关注作者的博客 - 《[深入理解javascript原型和闭包系列](http://www.cnblogs.com/wangfupeng1988/p/4001284.html)》《[深入理解javascript异步系列](https://github.com/wangfupeng1988/js-async-tutorial)》《[CSS知多少](http://www.cnblogs.com/wangfupeng1988/p/4325007.html)》 +- 学习作者的教程 - 《[前端JS基础面试题](http://coding.imooc.com/class/115.html)》《[React.js模拟大众点评webapp](http://coding.imooc.com/class/99.html)》《[zepto设计与源码分析](http://www.imooc.com/learn/745)》《[用grunt搭建自动化的web前端开发环境](http://study.163.com/course/courseMain.htm?courseId=1103003)》《[json2.js源码解读](http://study.163.com/course/courseMain.htm?courseId=691008)》 + +如果你感觉有收获，欢迎给我打赏 ———— 以激励我更多输出优质开源内容 + +![图片](https://camo.githubusercontent.com/e1558b631931e0a1606c769a61f48770cc0ccb56/687474703a2f2f696d61676573323031352e636e626c6f67732e636f6d2f626c6f672f3133383031322f3230313730322f3133383031322d32303137303232383131323233373739382d313530373139363634332e706e67) + diff --git a/novel-admin/src/main/resources/static/wangEditor/bower.json b/novel-admin/src/main/resources/static/wangEditor/bower.json new file mode 100644 index 0000000..0c4ed0d --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/bower.json @@ -0,0 +1,20 @@ +{ + "name": "wangEditor", + "description": "wangEditor - 基于javascript和css开发的 web 富文本编辑器， 轻量、简洁、易用、开源免费", + "main": "release/wangEditor.js", + "authors": [ + "wangfupeng " + ], + "license": "MIT", + "keywords": [ + "wangEditor", + "web 富文本编辑器" + ], + "homepage": "https://github.com/wangfupeng1988/wangEditor", + "moduleType": [ + "amd", + "cmd", + "node" + ], + "private": true +} diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/dev/README.md b/novel-admin/src/main/resources/static/wangEditor/docs/dev/README.md new file mode 100644 index 0000000..473dbcb --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/dev/README.md @@ -0,0 +1,25 @@ +面向开发者的文档 + + +框架介绍 + +- 下载和运行 +- 目录结构介绍 +- `example`目录 +- `src`目录（`js`目录，`less`目录） +- `package.json` +- `gulpfile.js` + +如何提交 PR + + + +上线 + +- 修改`package.json`版本 +- 提交到github，并创建tag +- 提交到 npm +- 更新 .md 文档 +- 文档同步到 kancloud +- …… + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/01-demo.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/01-demo.md new file mode 100644 index 0000000..b71612f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/01-demo.md @@ -0,0 +1,41 @@ +# 简单的 demo + +## 下载 + +- 点击 [https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releases) 下载最新版。进入`release`文件夹下找到`wangEditor.js`或者`wangEditor.min.js`即可 +- 使用CDN：[//unpkg.com/wangeditor/release/wangEditor.min.js](https://unpkg.com/wangeditor/release/wangEditor.min.js) +- 使用`bower`下载：`bower install wangEditor` （前提保证电脑已安装了`bower`） + +*PS：支持`npm`安装，请参见后面的章节* + +## 制作 demo + +编辑器效果如下。 + +![图片](https://camo.githubusercontent.com/f3d072718d8fcbbacf8cc80465a34cceffcf5b4a/687474703a2f2f696d61676573323031352e636e626c6f67732e636f6d2f626c6f672f3133383031322f3230313730352f3133383031322d32303137303533303230323930353633332d313834303135383938312e706e67) + +代码示例如下。**注意，以下代码中无需引用任何 CSS 文件！！！** + +```html + + + + + wangEditor demo + + +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + + +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/02-use-module.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/02-use-module.md new file mode 100644 index 0000000..0356a68 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/02-use-module.md @@ -0,0 +1,49 @@ +# 使用模块定义 + +wangEditor 除了直接使用` + + +``` + +## CommonJS + +可以使用`npm install wangeditor`安装（注意，这里`wangeditor`全是**小写字母**） + +```javascript +// 引用 +var E = require('wangeditor') // 使用 npm 安装 +var E = require('/wangEditor.min.js') // 使用下载的源码 + +// 创建编辑器 +var editor = new E('#editor') +editor.create() +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/03-sperate.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/03-sperate.md new file mode 100644 index 0000000..0fcd276 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/03-sperate.md @@ -0,0 +1,48 @@ +# 菜单和编辑区域分离 + +如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。 + +这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单`fixed`、编辑器区域高度自动增加等 + +## 代码示例 + +```html + + + + + wangEditor 菜单和编辑器区域分离 + + + +
+
+
中间隔离带
+
+

请输入内容

+
+ + + + + +``` + +## 显示效果 + +从上面代码可以看出，菜单和编辑区域其实就是两个单独的`
`，位置、尺寸都可以随便定义。 + +![](http://images2015.cnblogs.com/blog/138012/201705/138012-20170531224756289-7442240.png) + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/04-multi.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/04-multi.md new file mode 100644 index 0000000..aee3540 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/01-getstart/04-multi.md @@ -0,0 +1,50 @@ +# 同一个页面创建多个编辑器 + +wangEditor 支持一个页面创建多个编辑器 + +## 代码示例 + +```html + + + + + wangEditor 一个页面多个编辑器 + + + +
+
+
中间隔离带
+
+

第一个 demo（菜单和编辑器区域分开）

+
+ +
+

第二个 demo（常规）

+
+ + + + + + +``` + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/01-set-content.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/01-set-content.md new file mode 100644 index 0000000..7631f6f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/01-set-content.md @@ -0,0 +1,46 @@ +# 设置内容 + +以下方式中，如果条件允许，尽量使用第一种方式，效率最高。 + +## html 初始化内容 + +直接将内容写到要创建编辑器的`
`标签中 + +```html +
+

初始化的内容

+

初始化的内容

+
+ + + +``` + +## js 设置内容 + +创建编辑器之后，使用`editor.txt.html(...)`设置编辑器内容 + +```html +
+
+ + + +``` + +## 追加内容 + +创建编辑器之后，可使用`editor.txt.append('

追加的内容

')`继续追加内容。 + +## 清空内容 + +可使用`editor.txt.clear()`清空编辑器内容 diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/02-get-content.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/02-get-content.md new file mode 100644 index 0000000..e21c277 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/02-get-content.md @@ -0,0 +1,80 @@ +# 读取内容 + +可以`html`和`text`的方式读取编辑器的内容。 + +```html +
+

欢迎使用 wangEditor 编辑器

+
+ + + + + +``` + +需要注意的是：**从编辑器中获取的 html 代码是不包含任何样式的纯 html**，如果显示的时候需要对其中的`` `` `
`等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考 + +```css +/* table 样式 */ +table { + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; +} +table td, +table th { + border-bottom: 1px solid #ccc; + border-right: 1px solid #ccc; + padding: 3px 5px; +} +table th { + border-bottom: 2px solid #ccc; + text-align: center; +} + +/* blockquote 样式 */ +blockquote { + display: block; + border-left: 8px solid #d0e5f2; + padding: 5px 10px; + margin: 10px 0; + line-height: 1.4; + font-size: 100%; + background-color: #f1f1f1; +} + +/* code 样式 */ +code { + display: inline-block; + *display: inline; + *zoom: 1; + background-color: #f1f1f1; + border-radius: 3px; + padding: 3px 5px; + margin: 0 3px; +} +pre code { + display: block; +} + +/* ul ol 样式 */ +ul, ol { + margin: 10px 0 10px 20px; +} +``` + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/03-use-textarea.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/03-use-textarea.md new file mode 100644 index 0000000..1707e13 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/03-use-textarea.md @@ -0,0 +1,25 @@ +# 使用 textarea + +wangEditor 从`v3`版本开始不支持 textarea ，但是可以通过`onchange`来实现 textarea 中提交富文本内容。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/04-get-json.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/04-get-json.md new file mode 100644 index 0000000..d623ac4 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/02-content/04-get-json.md @@ -0,0 +1,82 @@ +# 获取 JSON 格式的内容 + +可以通过`editor.txt.getJSON`获取 JSON 格式的编辑器的内容，`v3.0.14`开始支持，示例如下 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+ +
+ + + + +``` + + +----- + +如果编辑器区域的 html 内容是如下： + +```html +

欢迎使用 wangEditor 富文本编辑器

+ +``` + +那么获取的 JSON 格式就如下： + +```json +[ + { + "tag": "p", + "attrs": [], + "children": [ + "欢迎使用 ", + { + "tag": "b", + "attrs": [], + "children": [ + "wangEditor" + ] + }, + " 富文本编辑器" + ] + }, + { + "tag": "img", + "attrs": [ + { + "name": "src", + "value": "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" + }, + { + "name": "style", + "value": "max-width:100%;" + } + ], + "children": [] + }, + { + "tag": "p", + "attrs": [], + "children": [ + { + "tag": "br", + "attrs": [], + "children": [] + } + ] + } +] +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/01-menu.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/01-menu.md new file mode 100644 index 0000000..bce6ba7 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/01-menu.md @@ -0,0 +1,52 @@ +# 自定义菜单 + +编辑器创建之前，可使用`editor.customConfig.menus`定义显示哪些菜单和菜单的顺序。**注意：v3 版本的菜单不支持换行折叠了（因为换行之后菜单栏是在太难看），如果菜单栏宽度不够，建议精简菜单项。** + +## 代码示例 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + +## 默认菜单 + +编辑默认的菜单配置如下 + +```javascript +[ + 'head', // 标题 + 'bold', // 粗体 + 'italic', // 斜体 + 'underline', // 下划线 + 'strikeThrough', // 删除线 + 'foreColor', // 文字颜色 + 'backColor', // 背景颜色 + 'link', // 插入链接 + 'list', // 列表 + 'justify', // 对齐方式 + 'quote', // 引用 + 'emoticon', // 表情 + 'image', // 插入图片 + 'table', // 表格 + 'video', // 插入视频 + 'code', // 插入代码 + 'undo', // 撤销 + 'redo' // 重复 +] +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/02-debug.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/02-debug.md new file mode 100644 index 0000000..e94d7a4 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/02-debug.md @@ -0,0 +1,21 @@ +# 定义 debug 模式 + +可通过`editor.customConfig.debug = true`配置`debug`模式，`debug`模式下，有 JS 错误会以`throw Error`方式提示出来。默认值为`false`，即不会抛出异常。 + +但是，在实际开发中不建议直接定义为`true`或者`false`，可通过 url 参数进行干预，示例如下： + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/03-onchange.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/03-onchange.md new file mode 100644 index 0000000..296091c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/03-onchange.md @@ -0,0 +1,40 @@ +# 配置 onchange 函数 + +配置`onchange`函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发`onchange`函数执行。 + +但是，**用户自己使用 JS 修改了`div1`的`innerHTML`，不会自动触发`onchange`函数**，此时你可以通过执行`editor.change()`来手动触发`onchange`函数的执行。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ +

手动触发 onchange 函数执行

+ + + + +``` + +----- + +另外，如果需要修改 onchange 触发的延迟时间（onchange 会在用户无任何操作的 xxx 毫秒之后被触发），可通过如下配置 + +```js +// 自定义 onchange 触发的延迟时间，默认为 200 ms +editor.customConfig.onchangeTimeout = 1000 // 单位 ms +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/04-z-index.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/04-z-index.md new file mode 100644 index 0000000..129bf1c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/04-z-index.md @@ -0,0 +1,19 @@ +# 配置编辑区域的 z-index + +编辑区域的`z-index`默认为`10000`，可自定义修改，代码配置如下。需改之后，编辑区域和菜单的`z-index`会同时生效。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/05-lang.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/05-lang.md new file mode 100644 index 0000000..01900fe --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/05-lang.md @@ -0,0 +1,30 @@ +# 多语言 + +可以通过`lang`配置项配置多语言，其实就是通过该配置项中的配置，将编辑器显示的文字，替换成你需要的文字。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + +**注意，以上代码中的`链接文字`要写在`链接`前面，`上传图片`要写在`上传`前面，因为前者包含后者。如果不这样做，可能会出现替换不全的问题，切记切记！** diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/06-paste.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/06-paste.md new file mode 100644 index 0000000..a7126c8 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/06-paste.md @@ -0,0 +1,33 @@ +# 粘贴文本 + +**注意，以下配置暂时对 IE 无效。IE 暂时使用系统自带的粘贴功能，没有样式过滤！** + +## 关闭粘贴样式的过滤 + +当从其他网页复制文本内容粘贴到编辑器中，编辑器会默认过滤掉复制文本中自带的样式，目的是让粘贴后的文本变得更加简洁和轻量。用户可通过`editor.customConfig.pasteFilterStyle = false`手动关闭掉粘贴样式的过滤。 + +## 自定义处理粘贴的文本内容 + +使用者可通过`editor.customConfig.pasteTextHandle`对粘贴的文本内容进行自定义的过滤、处理等操作，然后返回处理之后的文本内容。编辑器最终会粘贴用户处理之后并且返回的的内容。 + +## 示例代码 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/07-linkImgCallback.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/07-linkImgCallback.md new file mode 100644 index 0000000..52169e8 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/07-linkImgCallback.md @@ -0,0 +1,12 @@ +# 插入网络图片的回调 + +插入网络图片时，可通过如下配置获取到图片的信息。`v3.0.10`开始支持。 + +```js +var E = window.wangEditor +var editor = new E('#div1') +editor.customConfig.linkImgCallback = function (url) { + console.log(url) // url 即插入图片的地址 +} +editor.create() +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/08-linkCheck.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/08-linkCheck.md new file mode 100644 index 0000000..b581438 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/08-linkCheck.md @@ -0,0 +1,16 @@ +# 插入链接的校验 + +插入链接时，可通过如下配置对文字和链接进行校验。`v3.0.10`开始支持。 + +```js +var E = window.wangEditor +var editor = new E('#div1') +editor.customConfig.linkCheck = function (text, link) { + console.log(text) // 插入的文字 + console.log(link) // 插入的链接 + + return true // 返回 true 表示校验成功 + // return '验证失败' // 返回字符串，即校验失败的提示信息 +} +editor.create() +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/09-onfocus.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/09-onfocus.md new file mode 100644 index 0000000..7caba6b --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/09-onfocus.md @@ -0,0 +1,19 @@ +# 配置 onfocus 函数 + +配置`onfocus`函数之后，用户点击富文本区域会触发`onfocus`函数执行。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/10-onblur.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/10-onblur.md new file mode 100644 index 0000000..f7544bc --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/10-onblur.md @@ -0,0 +1,20 @@ +# 配置 onblur 函数 + +配置`onblur`函数之后，如果当前有手动获取焦点的富文本并且鼠标点击富文本以外的区域，则会触发`onblur`函数执行。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/11-linkImgCheck.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/11-linkImgCheck.md new file mode 100644 index 0000000..efb3320 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/11-linkImgCheck.md @@ -0,0 +1,15 @@ +# 插入网络图片的校验 + +插入网络图片时，可对图片地址做自定义校验。`v3.0.13`开始支持。 + +```js +var E = window.wangEditor +var editor = new E('#div1') +editor.customConfig.linkImgCheck = function (src) { + console.log(src) // 图片的链接 + + return true // 返回 true 表示校验成功 + // return '验证失败' // 返回字符串，即校验失败的提示信息 +} +editor.create() +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/12-colors.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/12-colors.md new file mode 100644 index 0000000..e86e57d --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/12-colors.md @@ -0,0 +1,29 @@ +# 配置字体颜色、背景色 + +编辑器的字体颜色和背景色，可以通过`editor.customConfig.colors`自定义配置 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/13-emot.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/13-emot.md new file mode 100644 index 0000000..5363834 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/03-config/13-emot.md @@ -0,0 +1,48 @@ +# 配置表情 + +`v3.0.15`开始支持配置表情，支持图片格式和 emoji ，可通过`editor.customConfig.emotions`配置。**注意看代码示例中的注释：** + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + +温馨提示：需要表情图片可以去 https://api.weibo.com/2/emotions.json?source=1362404091 和 http://yuncode.net/code/c_524ba520e58ce30 逛一逛，或者自己搜索。 diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/01-show-tab.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/01-show-tab.md new file mode 100644 index 0000000..8261950 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/01-show-tab.md @@ -0,0 +1,52 @@ +# 隐藏/显示 tab + +## 显示“上传图片”tab + +默认情况下，编辑器不会显示“上传图片”的tab，因为你还没有配置上传图片的信息。 + +![](http://images2015.cnblogs.com/blog/138012/201706/138012-20170601204308039-691571074.png) + +参考一下示例显示“上传图片”tab + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + +显示效果 + +![](http://images2015.cnblogs.com/blog/138012/201706/138012-20170601204504524-830243744.png) + +## 隐藏“网络图片”tab + +默认情况下，“网络图片”tab是一直存在的。如果不需要，可以参考一下示例来隐藏它。 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/02-base64.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/02-base64.md new file mode 100644 index 0000000..3a2d71a --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/02-base64.md @@ -0,0 +1,23 @@ +# 使用 base64 保存图片 + +如果需要使用 base64 编码直接将图片插入到内容中，可参考一下示例配置 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + +示例效果如下 + +![](http://images2015.cnblogs.com/blog/138012/201706/138012-20170601204759258-1412289899.png) + + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/03-upload-config.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/03-upload-config.md new file mode 100644 index 0000000..6720ce6 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/03-upload-config.md @@ -0,0 +1,188 @@ +# 上传图片 & 配置 + +将图片上传到服务器上的配置方式 + +## 上传图片 + +参考如下代码 + +```html +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + +``` + +其中`/upload`是上传图片的服务器端接口，接口返回的**数据格式**如下（**实际返回数据时，不要加任何注释！！！**） + +```json +{ + // errno 即错误代码，0 表示没有错误。 + // 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 + "errno": 0, + + // data 是一个数组，返回若干图片的线上地址 + "data": [ + "图片1地址", + "图片2地址", + "……" + ] +} +``` + +## 限制图片大小 + +默认限制图片大小是 5M + +```javascript +// 将图片大小限制为 3M +editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 +``` + +## 限制一次最多能传几张图片 + +默认为 10000 张（即不限制），需要限制可自己配置 + +```javascript +// 限制一次最多上传 5 张图片 +editor.customConfig.uploadImgMaxLength = 5 +``` + +## 自定义上传参数 + +上传图片时可自定义传递一些参数，例如传递验证的`token`等。参数会被添加到`formdata`中。 + +```javascript +editor.customConfig.uploadImgParams = { + token: 'abcdef12345' // 属性值会自动进行 encode ，此处无需 encode +} +``` + +如果**还需要**将参数拼接到 url 中，可再加上如下配置 + +``` +editor.customConfig.uploadImgParamsWithUrl = true +``` + +## 自定义 fileName + +上传图片时，可自定义`filename`，即在使用`formdata.append(name, file)`添加图片文件时，自定义第一个参数。 + +```javascript +editor.customConfig.uploadFileName = 'yourFileName' +``` + +## 自定义 header + +上传图片时刻自定义设置 header + +```javascript +editor.customConfig.uploadImgHeaders = { + 'Accept': 'text/x-json' +} +``` + +## withCredentials（跨域传递 cookie） + +跨域上传中如果需要传递 cookie 需设置 withCredentials + +```javascript +editor.customConfig.withCredentials = true +``` + +## 自定义 timeout 时间 + +默认的 timeout 时间是 10 秒钟 + +```javascript +// 将 timeout 时间改为 3s +editor.customConfig.uploadImgTimeout = 3000 +``` + +## 监听函数 + +可使用监听函数在上传图片的不同阶段做相应处理 + +```javascript +editor.customConfig.uploadImgHooks = { + before: function (xhr, editor, files) { + // 图片上传之前触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件 + + // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 + // return { + // prevent: true, + // msg: '放弃上传' + // } + }, + success: function (xhr, editor, result) { + // 图片上传并返回结果，图片插入成功之后触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 + }, + fail: function (xhr, editor, result) { + // 图片上传并返回结果，但图片插入错误时触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果 + }, + error: function (xhr, editor) { + // 图片上传出错时触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 + }, + timeout: function (xhr, editor) { + // 图片上传超时时触发 + // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象 + }, + + // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置 + // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错） + customInsert: function (insertImg, result, editor) { + // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！） + // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果 + + // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片： + var url = result.url + insertImg(url) + + // result 必须是一个 JSON 格式字符串！！！否则报错 + } +} +``` + +## 自定义提示方法 + +上传图片的错误提示默认使用`alert`弹出，你也可以自定义用户体验更好的提示方式 + +```javascript +editor.customConfig.customAlert = function (info) { + // info 是需要提示的内容 + alert('自定义提示：' + info) +} +``` + +## 自定义上传图片事件 + +如果想完全自己控制图片上传的过程，可以使用如下代码 + +```javascript +editor.customConfig.customUploadImg = function (files, insert) { + // files 是 input 中选中的文件列表 + // insert 是获取图片 url 后，插入到编辑器的方法 + + // 上传代码返回结果之后，将图片插入到编辑器中 + insert(imgUrl) +} +``` diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/04-qiniu.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/04-qiniu.md new file mode 100644 index 0000000..e5c2ca4 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/04-uploadimg/04-qiniu.md @@ -0,0 +1,115 @@ +# 上传到七牛云存储 + +完整的 demo 请参见 https://github.com/wangfupeng1988/js-sdk ，可下载下来本地运行 demo + +> 注意：配置了上传七牛云存储之后，**无法再使用插入网络图片** + +核心代码如下： + +```js +var E = window.wangEditor +var editor = new E('#div1') +// 允许上传到七牛云存储 +editor.customConfig.qiniu = true +editor.create() + +// 初始化七牛上传 +uploadInit() + +// 初始化七牛上传的方法 +function uploadInit() { + // 获取相关 DOM 节点的 ID + var btnId = editor.imgMenuId; + var containerId = editor.toolbarElemId; + var textElemId = editor.textElemId; + + // 创建上传对象 + var uploader = Qiniu.uploader({ + runtimes: 'html5,flash,html4', //上传模式,依次退化 + browse_button: btnId, //上传选择的点选按钮，**必需** + uptoken_url: '/uptoken', + //Ajax请求upToken的Url，**强烈建议设置**（服务端提供） + // uptoken : '', + //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成 + // unique_names: true, + // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名） + // save_key: true, + // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理 + domain: 'http://7xrjl5.com1.z0.glb.clouddn.com/', + //bucket 域名，下载资源时用到，**必需** + container: containerId, //上传区域DOM ID，默认是browser_button的父元素， + max_file_size: '100mb', //最大文件体积限制 + flash_swf_url: '../js/plupload/Moxie.swf', //引入flash,相对路径 + filters: { + mime_types: [ + //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格） + { title: "图片文件", extensions: "jpg,gif,png,bmp" } + ] + }, + max_retries: 3, //上传失败最大重试次数 + dragdrop: true, //开启可拖曳上传 + drop_element: textElemId, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 + chunk_size: '4mb', //分块上传时，每片的体积 + auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传 + init: { + 'FilesAdded': function(up, files) { + plupload.each(files, function(file) { + // 文件添加进队列后,处理相关的事情 + printLog('on FilesAdded'); + }); + }, + 'BeforeUpload': function(up, file) { + // 每个文件上传前,处理相关的事情 + printLog('on BeforeUpload'); + }, + 'UploadProgress': function(up, file) { + // 显示进度 + printLog('进度 ' + file.percent) + }, + 'FileUploaded': function(up, file, info) { + // 每个文件上传成功后,处理相关的事情 + // 其中 info 是文件上传成功后，服务端返回的json，形式如 + // { + // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", + // "key": "gogopher.jpg" + // } + printLog(info); + // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html + + var domain = up.getOption('domain'); + var res = $.parseJSON(info); + var sourceLink = domain + res.key; //获取上传成功后的文件的Url + + printLog(sourceLink); + + // 插入图片到editor + editor.cmd.do('insertHtml', '') + }, + 'Error': function(up, err, errTip) { + //上传出错时,处理相关的事情 + printLog('on Error'); + }, + 'UploadComplete': function() { + //队列文件处理完毕后,处理相关的事情 + printLog('on UploadComplete'); + } + // Key 函数如果有需要自行配置，无特殊需要请注释 + //, + // 'Key': function(up, file) { + // // 若想在前端对每个文件的key进行个性化处理，可以配置该函数 + // // 该配置必须要在 unique_names: false , save_key: false 时才生效 + // var key = ""; + // // do something with key here + // return key + // } + } + // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取 + // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs + }); +} + +// 封装 console.log 函数 +function printLog(title, info) { + window.console && console.log(title, info); +} +``` \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/01-全屏-预览-查看源码.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/01-全屏-预览-查看源码.md new file mode 100644 index 0000000..27588c8 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/01-全屏-预览-查看源码.md @@ -0,0 +1,10 @@ +# 全屏 & 预览 & 查看源码 + +## 全屏 + +虽然 wangEditor 没有内置全屏功能，但是你可以通过简单的代码来搞定，作者已经做了一个demo来示范。通过运行 demo（文档一开始就介绍了）即可看到该示例页面，直接查看页面源代码即可。 + +## 预览 & 查看源码 + +如果需要预览和查看源码的功能，也需要跟全屏功能一样，自己定义按钮。点击按钮时通过`editor.txt.html()`获取编辑器内容，然后自定义实现预览和查看源码功能。 + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/02-上传附件.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/02-上传附件.md new file mode 100644 index 0000000..1f3cc88 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/02-上传附件.md @@ -0,0 +1,24 @@ +# 关于上传附件 + +**有用户问到编辑器能否有上传附件的功能？我的建议是不要把附件做到内容中。** + +原因很简单，如果将附件上传之后再插入到富文本内容中，其实就是一个链接的形式。如下图： + +![](http://box.kancloud.cn/2016-02-19_56c718ec6f9bf.png) + +而用户在用编辑器编辑文本时，操作是非常随意多样的，他把这个链接删了，你服务器要想实时删除上传的附件文件，是难监控到的。 + +还有，用户如果要上传很多个附件，也是很难管理的，还是因为富文本的内容变化多样，用户可以随便在什么地方插入附件，而且形式和链接一样。 + +------- + +反过来，我们想一下平时用附件和编辑器最多的产品是什么——是邮箱。邮箱如何处理附件的，大家应该很清楚。它把文本内容和附件分开，这样附件就可以很轻松、明了的进行管理，绝对不会和编辑内容的链接产生混淆。 + +![](http://box.kancloud.cn/2016-02-19_56c718ec83f7e.png) + +你能看到的所有的邮箱产品，几乎都是这样设计的。 + +------- + +因此，在你提问编辑器能否上传附件这个问题的时候，可以想一下能否参照邮箱的实现来设计？ + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/03-markdown.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/03-markdown.md new file mode 100644 index 0000000..c723347 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/03-markdown.md @@ -0,0 +1,12 @@ +# 关于 markdown + +**好多使用者问到，wangEditor编辑器能否集成markdown？——答案是：富文本编辑器无法和markdown集成到一起。** + +----- + + +你可以参考 [简书](http://www.jianshu.com/) 的实现方式，简书中编辑器也无法实现富文本和`markdown`的自由切换。要么使用富文本编写文章，要么使用`markdown`编写文章，不能公用。 + +本质上，富文本编辑器和`markdown`编辑器是两回事儿。 + + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/04-xss.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/04-xss.md new file mode 100644 index 0000000..286337f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/04-xss.md @@ -0,0 +1,23 @@ +# 预防 XSS 攻击 + +> 术业有专攻 + +要想在前端预防 xss 攻击，还得依赖于其他工具，例如[xss.js](http://jsxss.com/zh/index.html)（如果打不开页面，就从百度搜一下） + +代码示例如下 + +```html + + + +``` + diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/05-react.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/05-react.md new file mode 100644 index 0000000..8dcc2d4 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/05-react.md @@ -0,0 +1,7 @@ +# 用于 React + +如果需要将 wangEditor 用于 React 中，可参见如下示例 + +- 下载源码 `git clone git@github.com:wangfupeng1988/wangEditor.git` +- 进入 React 示例目录 `cd wangEditor/example/demo/in-react/`，查看`src/App.js`即可 +- 也可以运行`npm install && npm start`查看在 React 中的效果（`http://localhost:3000/`） diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/06-vue.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/06-vue.md new file mode 100644 index 0000000..47e167a --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/06-vue.md @@ -0,0 +1,7 @@ +# 用于 Vue + +如果需要将 wangEditor 用于 Vue 中，可参见如下示例 + +- 下载源码 `git clone git@github.com:wangfupeng1988/wangEditor.git` +- 进入 vue 示例目录 `cd wangEditor/example/demo/in-vue/`，查看`src/components/Editor.vue`即可 +- 也可以运行`npm install && npm run dev`查看在 vue 中的效果（`http://localhost:8080/`） diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/07-ng.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/07-ng.md new file mode 100644 index 0000000..1d59afc --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/07-ng.md @@ -0,0 +1,3 @@ +# 用于 Angular + +感谢 [@fengnovo](https://github.com/fengnovo) 提供了一个 angular2 的兼容示例，可供参考 https://github.com/fengnovo/wangEditor/tree/master/example/demo/in-ng2 diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/08-api.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/08-api.md new file mode 100644 index 0000000..e8b4f6d --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/05-other/08-api.md @@ -0,0 +1,27 @@ +# 常用 API + +## 属性 + +- 获取编辑器的唯一标识 `editor.id` +- 获取编辑区域 DOM 节点 `editor.$textElem[0]` +- 获取菜单栏 DOM 节点 `editor.$toolbarElem[0]` +- 获取编辑器配置信息 `editor.config` +- 获取编辑区域 DOM 节点 ID `editor.textElemId` +- 获取菜单栏 DOM 节点 ID `editor.toolbarElemId` +- 获取菜单栏中“图片”菜单的 DOM 节点 ID `editor.imgMenuId` + +## 方法 + +### 选取操作 + +- 获取选中的文字 `editor.selection.getSelectionText()` +- 获取选取所在的 DOM 节点 `editor.selection.getSelectionContainerElem()[0]` + - 开始节点 `editor.selection.getSelectionStartElem()[0]` + - 结束节点 `editor.selection.getSelectionEndElem()[0]` +- 折叠选取 `editor.selection.collapseRange()` +- 更多可参见[源码中](https://github.com/wangfupeng1988/wangEditor/blob/master/src/js/selection/index.js)定义的方法 + +### 编辑内容操作 + +- 插入 HTML `editor.cmd.do('insertHTML', '

...

')` +- 可通过`editor.cmd.do(name, value)`来执行`document.execCommand(name, false, value)`的操作 \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/docs/usage/README.md b/novel-admin/src/main/resources/static/wangEditor/docs/usage/README.md new file mode 100644 index 0000000..4c801e6 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/docs/usage/README.md @@ -0,0 +1,3 @@ +同步[../../README.md](../../README.md)的内容 + +将所有文档跟新到 www.kancloud.cn/wangfupeng/wangeditor3/332599 中 diff --git a/novel-admin/src/main/resources/static/wangEditor/example/README.md b/novel-admin/src/main/resources/static/wangEditor/example/README.md new file mode 100644 index 0000000..6e17ca0 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/README.md @@ -0,0 +1 @@ +wangEditor demo diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/package.json b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/package.json new file mode 100644 index 0000000..054d5cd --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/package.json @@ -0,0 +1,19 @@ +{ + "name": "wangeditor-in-react", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^15.5.4", + "react-dom": "^15.5.4", + "wangeditor": ">=3.0.0" + }, + "devDependencies": { + "react-scripts": "1.0.7" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/favicon.ico b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/favicon.ico new file mode 100644 index 0000000..5c125de Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/favicon.ico differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/index.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/index.html new file mode 100644 index 0000000..7bee027 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + React App + + + +
+ + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/manifest.json b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/manifest.json new file mode 100644 index 0000000..be607e4 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.css b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.css new file mode 100644 index 0000000..15adfdc --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.css @@ -0,0 +1,24 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.js new file mode 100644 index 0000000..95b21fb --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.js @@ -0,0 +1,48 @@ +import React, { Component } from 'react'; +import logo from './logo.svg'; +import './App.css'; +import E from 'wangeditor' + +class App extends Component { + constructor(props, context) { + super(props, context); + this.state = { + editorContent: '' + } + } + render() { + return ( +
+
+ logo +

Welcome to React

+
+

+ To get started, edit src/App.js and save to reload. +

+ + {/* 将生成编辑器 */} +
+
+ + +
+ ); + } + componentDidMount() { + const elem = this.refs.editorElem + const editor = new E(elem) + // 使用 onchange 函数监听内容的变化，并实时更新到 state 中 + editor.customConfig.onchange = html => { + this.setState({ + editorContent: html + }) + } + editor.create() + } + clickHandle() { + alert(this.state.editorContent) + } +} + +export default App; diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.test.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.test.js new file mode 100644 index 0000000..b84af98 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/App.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); +}); diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/index.css b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/index.css new file mode 100644 index 0000000..b4cc725 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/index.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/index.js new file mode 100644 index 0000000..53c7688 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; +import './index.css'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/logo.svg b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/registerServiceWorker.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/registerServiceWorker.js new file mode 100644 index 0000000..9966897 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-react/src/registerServiceWorker.js @@ -0,0 +1,51 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); + }); + } +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.babelrc b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.babelrc new file mode 100644 index 0000000..13f0e47 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + ["env", { "modules": false }], + "stage-2" + ], + "plugins": ["transform-runtime"], + "comments": false, + "env": { + "test": { + "presets": ["env", "stage-2"], + "plugins": [ "istanbul" ] + } + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.editorconfig b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.editorconfig new file mode 100644 index 0000000..9d08a1a --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.postcssrc.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.postcssrc.js new file mode 100644 index 0000000..ea9a5ab --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/.postcssrc.js @@ -0,0 +1,8 @@ +// https://github.com/michael-ciniawsky/postcss-load-config + +module.exports = { + "plugins": { + // to edit target browsers: use "browserlist" field in package.json + "autoprefixer": {} + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/build.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/build.js new file mode 100644 index 0000000..6b8add1 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/build.js @@ -0,0 +1,35 @@ +require('./check-versions')() + +process.env.NODE_ENV = 'production' + +var ora = require('ora') +var rm = require('rimraf') +var path = require('path') +var chalk = require('chalk') +var webpack = require('webpack') +var config = require('../config') +var webpackConfig = require('./webpack.prod.conf') + +var spinner = ora('building for production...') +spinner.start() + +rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { + if (err) throw err + webpack(webpackConfig, function (err, stats) { + spinner.stop() + if (err) throw err + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false + }) + '\n\n') + + console.log(chalk.cyan(' Build complete.\n')) + console.log(chalk.yellow( + ' Tip: built files are meant to be served over an HTTP server.\n' + + ' Opening index.html over file:// won\'t work.\n' + )) + }) +}) diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/check-versions.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/check-versions.js new file mode 100644 index 0000000..100f3a0 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/check-versions.js @@ -0,0 +1,48 @@ +var chalk = require('chalk') +var semver = require('semver') +var packageConfig = require('../package.json') +var shell = require('shelljs') +function exec (cmd) { + return require('child_process').execSync(cmd).toString().trim() +} + +var versionRequirements = [ + { + name: 'node', + currentVersion: semver.clean(process.version), + versionRequirement: packageConfig.engines.node + }, +] + +if (shell.which('npm')) { + versionRequirements.push({ + name: 'npm', + currentVersion: exec('npm --version'), + versionRequirement: packageConfig.engines.npm + }) +} + +module.exports = function () { + var warnings = [] + for (var i = 0; i < versionRequirements.length; i++) { + var mod = versionRequirements[i] + if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { + warnings.push(mod.name + ': ' + + chalk.red(mod.currentVersion) + ' should be ' + + chalk.green(mod.versionRequirement) + ) + } + } + + if (warnings.length) { + console.log('') + console.log(chalk.yellow('To use this template, you must update following to modules:')) + console.log() + for (var i = 0; i < warnings.length; i++) { + var warning = warnings[i] + console.log(' ' + warning) + } + console.log() + process.exit(1) + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/dev-client.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/dev-client.js new file mode 100644 index 0000000..18aa1e2 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/dev-client.js @@ -0,0 +1,9 @@ +/* eslint-disable */ +require('eventsource-polyfill') +var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') + +hotClient.subscribe(function (event) { + if (event.action === 'reload') { + window.location.reload() + } +}) diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/dev-server.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/dev-server.js new file mode 100644 index 0000000..782dc6f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/dev-server.js @@ -0,0 +1,89 @@ +require('./check-versions')() + +var config = require('../config') +if (!process.env.NODE_ENV) { + process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) +} + +var opn = require('opn') +var path = require('path') +var express = require('express') +var webpack = require('webpack') +var proxyMiddleware = require('http-proxy-middleware') +var webpackConfig = require('./webpack.dev.conf') + +// default port where dev server listens for incoming traffic +var port = process.env.PORT || config.dev.port +// automatically open browser, if not set will be false +var autoOpenBrowser = !!config.dev.autoOpenBrowser +// Define HTTP proxies to your custom API backend +// https://github.com/chimurai/http-proxy-middleware +var proxyTable = config.dev.proxyTable + +var app = express() +var compiler = webpack(webpackConfig) + +var devMiddleware = require('webpack-dev-middleware')(compiler, { + publicPath: webpackConfig.output.publicPath, + quiet: true +}) + +var hotMiddleware = require('webpack-hot-middleware')(compiler, { + log: () => {} +}) +// force page reload when html-webpack-plugin template changes +compiler.plugin('compilation', function (compilation) { + compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { + hotMiddleware.publish({ action: 'reload' }) + cb() + }) +}) + +// proxy api requests +Object.keys(proxyTable).forEach(function (context) { + var options = proxyTable[context] + if (typeof options === 'string') { + options = { target: options } + } + app.use(proxyMiddleware(options.filter || context, options)) +}) + +// handle fallback for HTML5 history API +app.use(require('connect-history-api-fallback')()) + +// serve webpack bundle output +app.use(devMiddleware) + +// enable hot-reload and state-preserving +// compilation error display +app.use(hotMiddleware) + +// serve pure static assets +var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) +app.use(staticPath, express.static('./static')) + +var uri = 'http://localhost:' + port + +var _resolve +var readyPromise = new Promise(resolve => { + _resolve = resolve +}) + +console.log('> Starting dev server...') +devMiddleware.waitUntilValid(() => { + console.log('> Listening at ' + uri + '\n') + // when env is testing, don't need open it + if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { + opn(uri) + } + _resolve() +}) + +var server = app.listen(port) + +module.exports = { + ready: readyPromise, + close: () => { + server.close() + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/utils.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/utils.js new file mode 100644 index 0000000..b1d54b4 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/utils.js @@ -0,0 +1,71 @@ +var path = require('path') +var config = require('../config') +var ExtractTextPlugin = require('extract-text-webpack-plugin') + +exports.assetsPath = function (_path) { + var assetsSubDirectory = process.env.NODE_ENV === 'production' + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory + return path.posix.join(assetsSubDirectory, _path) +} + +exports.cssLoaders = function (options) { + options = options || {} + + var cssLoader = { + loader: 'css-loader', + options: { + minimize: process.env.NODE_ENV === 'production', + sourceMap: options.sourceMap + } + } + + // generate loader string to be used with extract text plugin + function generateLoaders (loader, loaderOptions) { + var loaders = [cssLoader] + if (loader) { + loaders.push({ + loader: loader + '-loader', + options: Object.assign({}, loaderOptions, { + sourceMap: options.sourceMap + }) + }) + } + + // Extract CSS when that option is specified + // (which is the case during production build) + if (options.extract) { + return ExtractTextPlugin.extract({ + use: loaders, + fallback: 'vue-style-loader' + }) + } else { + return ['vue-style-loader'].concat(loaders) + } + } + + // https://vue-loader.vuejs.org/en/configurations/extract-css.html + return { + css: generateLoaders(), + postcss: generateLoaders(), + less: generateLoaders('less'), + sass: generateLoaders('sass', { indentedSyntax: true }), + scss: generateLoaders('sass'), + stylus: generateLoaders('stylus'), + styl: generateLoaders('stylus') + } +} + +// Generate loaders for standalone style files (outside of .vue) +exports.styleLoaders = function (options) { + var output = [] + var loaders = exports.cssLoaders(options) + for (var extension in loaders) { + var loader = loaders[extension] + output.push({ + test: new RegExp('\\.' + extension + '$'), + use: loader + }) + } + return output +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/vue-loader.conf.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/vue-loader.conf.js new file mode 100644 index 0000000..7aee79b --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/vue-loader.conf.js @@ -0,0 +1,12 @@ +var utils = require('./utils') +var config = require('../config') +var isProduction = process.env.NODE_ENV === 'production' + +module.exports = { + loaders: utils.cssLoaders({ + sourceMap: isProduction + ? config.build.productionSourceMap + : config.dev.cssSourceMap, + extract: isProduction + }) +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.base.conf.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.base.conf.js new file mode 100644 index 0000000..daa3589 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.base.conf.js @@ -0,0 +1,58 @@ +var path = require('path') +var utils = require('./utils') +var config = require('../config') +var vueLoaderConfig = require('./vue-loader.conf') + +function resolve (dir) { + return path.join(__dirname, '..', dir) +} + +module.exports = { + entry: { + app: './src/main.js' + }, + output: { + path: config.build.assetsRoot, + filename: '[name].js', + publicPath: process.env.NODE_ENV === 'production' + ? config.build.assetsPublicPath + : config.dev.assetsPublicPath + }, + resolve: { + extensions: ['.js', '.vue', '.json'], + alias: { + 'vue$': 'vue/dist/vue.esm.js', + '@': resolve('src') + } + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: vueLoaderConfig + }, + { + test: /\.js$/, + loader: 'babel-loader', + include: [resolve('src'), resolve('test')] + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } + } + ] + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.dev.conf.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.dev.conf.js new file mode 100644 index 0000000..5470402 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.dev.conf.js @@ -0,0 +1,35 @@ +var utils = require('./utils') +var webpack = require('webpack') +var config = require('../config') +var merge = require('webpack-merge') +var baseWebpackConfig = require('./webpack.base.conf') +var HtmlWebpackPlugin = require('html-webpack-plugin') +var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') + +// add hot-reload related code to entry chunks +Object.keys(baseWebpackConfig.entry).forEach(function (name) { + baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) +}) + +module.exports = merge(baseWebpackConfig, { + module: { + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) + }, + // cheap-module-eval-source-map is faster for development + devtool: '#cheap-module-eval-source-map', + plugins: [ + new webpack.DefinePlugin({ + 'process.env': config.dev.env + }), + // https://github.com/glenjamin/webpack-hot-middleware#installation--usage + new webpack.HotModuleReplacementPlugin(), + new webpack.NoEmitOnErrorsPlugin(), + // https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'index.html', + inject: true + }), + new FriendlyErrorsPlugin() + ] +}) diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.prod.conf.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.prod.conf.js new file mode 100644 index 0000000..da44b65 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/build/webpack.prod.conf.js @@ -0,0 +1,120 @@ +var path = require('path') +var utils = require('./utils') +var webpack = require('webpack') +var config = require('../config') +var merge = require('webpack-merge') +var baseWebpackConfig = require('./webpack.base.conf') +var CopyWebpackPlugin = require('copy-webpack-plugin') +var HtmlWebpackPlugin = require('html-webpack-plugin') +var ExtractTextPlugin = require('extract-text-webpack-plugin') +var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') + +var env = config.build.env + +var webpackConfig = merge(baseWebpackConfig, { + module: { + rules: utils.styleLoaders({ + sourceMap: config.build.productionSourceMap, + extract: true + }) + }, + devtool: config.build.productionSourceMap ? '#source-map' : false, + output: { + path: config.build.assetsRoot, + filename: utils.assetsPath('js/[name].[chunkhash].js'), + chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + }, + plugins: [ + // http://vuejs.github.io/vue-loader/en/workflow/production.html + new webpack.DefinePlugin({ + 'process.env': env + }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + }, + sourceMap: true + }), + // extract css into its own file + new ExtractTextPlugin({ + filename: utils.assetsPath('css/[name].[contenthash].css') + }), + // Compress extracted CSS. We are using this plugin so that possible + // duplicated CSS from different components can be deduped. + new OptimizeCSSPlugin({ + cssProcessorOptions: { + safe: true + } + }), + // generate dist index.html with correct asset hash for caching. + // you can customize output by editing /index.html + // see https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: config.build.index, + template: 'index.html', + inject: true, + minify: { + removeComments: true, + collapseWhitespace: true, + removeAttributeQuotes: true + // more options: + // https://github.com/kangax/html-minifier#options-quick-reference + }, + // necessary to consistently work with multiple chunks via CommonsChunkPlugin + chunksSortMode: 'dependency' + }), + // split vendor js into its own file + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: function (module, count) { + // any required modules inside node_modules are extracted to vendor + return ( + module.resource && + /\.js$/.test(module.resource) && + module.resource.indexOf( + path.join(__dirname, '../node_modules') + ) === 0 + ) + } + }), + // extract webpack runtime and module manifest to its own file in order to + // prevent vendor hash from being updated whenever app bundle is updated + new webpack.optimize.CommonsChunkPlugin({ + name: 'manifest', + chunks: ['vendor'] + }), + // copy custom static assets + new CopyWebpackPlugin([ + { + from: path.resolve(__dirname, '../static'), + to: config.build.assetsSubDirectory, + ignore: ['.*'] + } + ]) + ] +}) + +if (config.build.productionGzip) { + var CompressionWebpackPlugin = require('compression-webpack-plugin') + + webpackConfig.plugins.push( + new CompressionWebpackPlugin({ + asset: '[path].gz[query]', + algorithm: 'gzip', + test: new RegExp( + '\\.(' + + config.build.productionGzipExtensions.join('|') + + ')$' + ), + threshold: 10240, + minRatio: 0.8 + }) + ) +} + +if (config.build.bundleAnalyzerReport) { + var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + webpackConfig.plugins.push(new BundleAnalyzerPlugin()) +} + +module.exports = webpackConfig diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/dev.env.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/dev.env.js new file mode 100644 index 0000000..efead7c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/dev.env.js @@ -0,0 +1,6 @@ +var merge = require('webpack-merge') +var prodEnv = require('./prod.env') + +module.exports = merge(prodEnv, { + NODE_ENV: '"development"' +}) diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/index.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/index.js new file mode 100644 index 0000000..196da1f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/index.js @@ -0,0 +1,38 @@ +// see http://vuejs-templates.github.io/webpack for documentation. +var path = require('path') + +module.exports = { + build: { + env: require('./prod.env'), + index: path.resolve(__dirname, '../dist/index.html'), + assetsRoot: path.resolve(__dirname, '../dist'), + assetsSubDirectory: 'static', + assetsPublicPath: '/', + productionSourceMap: true, + // Gzip off by default as many popular static hosts such as + // Surge or Netlify already gzip all static assets for you. + // Before setting to `true`, make sure to: + // npm install --save-dev compression-webpack-plugin + productionGzip: false, + productionGzipExtensions: ['js', 'css'], + // Run the build command with an extra argument to + // View the bundle analyzer report after build finishes: + // `npm run build --report` + // Set to `true` or `false` to always turn it on or off + bundleAnalyzerReport: process.env.npm_config_report + }, + dev: { + env: require('./dev.env'), + port: 8080, + autoOpenBrowser: true, + assetsSubDirectory: 'static', + assetsPublicPath: '/', + proxyTable: {}, + // CSS Sourcemaps off by default because relative paths are "buggy" + // with this option, according to the CSS-Loader README + // (https://github.com/webpack/css-loader#sourcemaps) + // In our experience, they generally work as expected, + // just be aware of this issue when enabling this option. + cssSourceMap: false + } +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/prod.env.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/prod.env.js new file mode 100644 index 0000000..773d263 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/config/prod.env.js @@ -0,0 +1,3 @@ +module.exports = { + NODE_ENV: '"production"' +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/index.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/index.html new file mode 100644 index 0000000..47ae14a --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/index.html @@ -0,0 +1,11 @@ + + + + + wangeditor-in-vue + + +
+ + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/package.json b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/package.json new file mode 100644 index 0000000..80cf68f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/package.json @@ -0,0 +1,60 @@ +{ + "name": "wangeditor-in-vue", + "version": "1.0.0", + "description": "A Vue.js project", + "author": "git ", + "private": true, + "scripts": { + "dev": "node build/dev-server.js", + "start": "node build/dev-server.js", + "build": "node build/build.js" + }, + "dependencies": { + "vue": "^2.3.3", + "wangeditor": ">=3.0.0" + }, + "devDependencies": { + "autoprefixer": "^6.7.2", + "babel-core": "^6.22.1", + "babel-loader": "^6.2.10", + "babel-plugin-transform-runtime": "^6.22.0", + "babel-preset-env": "^1.3.2", + "babel-preset-stage-2": "^6.22.0", + "babel-register": "^6.22.0", + "chalk": "^1.1.3", + "connect-history-api-fallback": "^1.3.0", + "copy-webpack-plugin": "^4.0.1", + "css-loader": "^0.28.0", + "eventsource-polyfill": "^0.9.6", + "express": "^4.14.1", + "extract-text-webpack-plugin": "^2.0.0", + "file-loader": "^0.11.1", + "friendly-errors-webpack-plugin": "^1.1.3", + "html-webpack-plugin": "^2.28.0", + "http-proxy-middleware": "^0.17.3", + "webpack-bundle-analyzer": "^2.2.1", + "semver": "^5.3.0", + "shelljs": "^0.7.6", + "opn": "^4.0.2", + "optimize-css-assets-webpack-plugin": "^1.3.0", + "ora": "^1.2.0", + "rimraf": "^2.6.0", + "url-loader": "^0.5.8", + "vue-loader": "^12.1.0", + "vue-style-loader": "^3.0.1", + "vue-template-compiler": "^2.3.3", + "webpack": "^2.6.1", + "webpack-dev-middleware": "^1.10.0", + "webpack-hot-middleware": "^2.18.0", + "webpack-merge": "^4.1.0" + }, + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ] +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/App.vue b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/App.vue new file mode 100644 index 0000000..27d15ff --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/App.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/assets/logo.png b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/assets/logo.png differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/components/Editor.vue b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/components/Editor.vue new file mode 100644 index 0000000..aee43c2 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/components/Editor.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/components/Hello.vue b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/components/Hello.vue new file mode 100644 index 0000000..2d80539 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/components/Hello.vue @@ -0,0 +1,53 @@ + + + + + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/main.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/main.js new file mode 100644 index 0000000..7b7fec7 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/src/main.js @@ -0,0 +1,13 @@ +// The Vue build version to load with the `import` command +// (runtime-only or standalone) has been set in webpack.base.conf with an alias. +import Vue from 'vue' +import App from './App' + +Vue.config.productionTip = false + +/* eslint-disable no-new */ +new Vue({ + el: '#app', + template: '', + components: { App } +}) diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/static/.gitkeep b/novel-admin/src/main/resources/static/wangEditor/example/demo/in-vue/static/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-amd-main.js b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-amd-main.js new file mode 100644 index 0000000..444b2da --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-amd-main.js @@ -0,0 +1,4 @@ +require(['/wangEditor.min.js'], function (E) { + var editor2 = new E('#div3') + editor2.create() +}) \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-amd.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-amd.html new file mode 100644 index 0000000..6a3d666 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-amd.html @@ -0,0 +1,15 @@ + + + + + wangEditor 使用 AMD 加载 + + +

wangEditor 使用 AMD 加载

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-css-reset.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-css-reset.html new file mode 100644 index 0000000..c01a10d --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-css-reset.html @@ -0,0 +1,66 @@ + + + + + wangEditor css reset + + + +

wangEditor css reset

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-emot.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-emot.html new file mode 100644 index 0000000..02d8f7f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-emot.html @@ -0,0 +1,84 @@ + + + + + wangEditor 配置表情 + + +

wangEditor 配置表情

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-fullscreen.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-fullscreen.html new file mode 100644 index 0000000..cbbaa01 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-fullscreen.html @@ -0,0 +1,114 @@ + + + + + wangEditor 全屏 + + + +

wangEditor 全屏

+ + +
+ +
+
+
+ +
+
+ +
+

wangEditor 本身不包含“全屏”功能，不过可以很简单的开发出来

+

注意，全屏模式与max-height有冲突，尽量避免一起使用

+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-get-content.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-get-content.html new file mode 100644 index 0000000..012c81c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-get-content.html @@ -0,0 +1,34 @@ + + + + + wangEditor 获取内容 + + +

wangEditor 获取内容

+
+

欢迎使用 wangEditor 富文本编辑器

+

欢迎使用 wangEditor 富文本编辑器

+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-getJSON.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-getJSON.html new file mode 100644 index 0000000..68cd155 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-getJSON.html @@ -0,0 +1,30 @@ + + + + + wangEditor demo getJSON + + +

获取 JSON

+
+

欢迎使用 wangEditor 富文本编辑器

+ +
+ + + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-lang.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-lang.html new file mode 100644 index 0000000..6c77826 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-lang.html @@ -0,0 +1,31 @@ + + + + + wangEditor lang test + + +

多语言测试

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-menus.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-menus.html new file mode 100644 index 0000000..4afd45f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-menus.html @@ -0,0 +1,26 @@ + + + + + wangEditor 菜单配置 + + +

wangEditor 自定义菜单配置

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-mult.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-mult.html new file mode 100644 index 0000000..bd6f7e1 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-mult.html @@ -0,0 +1,44 @@ + + + + + wangEditor 一个页面多个编辑器 + + + + +

第一个 demo（菜单和编辑器区域分开）

+
+
+
中间隔离带
+
+

请输入内容

+
+ +

第二个 demo（常规）

+
+

请输入内容

+
+ + + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onblur.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onblur.html new file mode 100644 index 0000000..a6644bf --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onblur.html @@ -0,0 +1,23 @@ + + + + + wangEditor test onblur + + +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onchange.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onchange.html new file mode 100644 index 0000000..231de10 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onchange.html @@ -0,0 +1,24 @@ + + + + + wangEditor test onchange + + +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onfocus.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onfocus.html new file mode 100644 index 0000000..7d95de0 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-onfocus.html @@ -0,0 +1,22 @@ + + + + + wangEditor test onfocus + + +
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-paste.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-paste.html new file mode 100644 index 0000000..a3a7477 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-paste.html @@ -0,0 +1,25 @@ + + + + + wangEditor paste test + + +

wangEditor paste test

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-set-content.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-set-content.html new file mode 100644 index 0000000..42eff3b --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-set-content.html @@ -0,0 +1,35 @@ + + + + + wangEditor 设置内容 + + +

wangEditor 设置内容

+
+

欢迎使用 wangEditor 富文本编辑器

+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-sperate.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-sperate.html new file mode 100644 index 0000000..0d0b857 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-sperate.html @@ -0,0 +1,35 @@ + + + + + wangEditor 菜单和编辑器区域分离 + + + + +

wangEditor 菜单和编辑器区域分离

+
+
+
中间隔离带
+
+

请输入内容

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-textarea.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-textarea.html new file mode 100644 index 0000000..8e41119 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-textarea.html @@ -0,0 +1,33 @@ + + + + + wangEditor demo textarea + + +

编辑器

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ +
+ +

textarea

+ + + + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/demo/test-uploadimg.html b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-uploadimg.html new file mode 100644 index 0000000..97246ca --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/demo/test-uploadimg.html @@ -0,0 +1,58 @@ + + + + + wangEditor 上传图片 + + +

wangEditor 上传图片到服务器

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ +

wangEditor 以base64保存图片文件

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ +

wangEditor 自定义上传图片

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/favicon.ico b/novel-admin/src/main/resources/static/wangEditor/example/favicon.ico new file mode 100644 index 0000000..6075775 Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/favicon.ico differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/Read Me.txt b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/Read Me.txt new file mode 100644 index 0000000..8491652 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/Read Me.txt @@ -0,0 +1,7 @@ +Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. + +To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts + +You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. + +You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo-files/demo.css b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo-files/demo.css new file mode 100644 index 0000000..f9ab27c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo-files/demo.css @@ -0,0 +1,155 @@ +body { + padding: 0; + margin: 0; + font-family: sans-serif; + font-size: 1em; + line-height: 1.5; + color: #555; + background: #fff; +} +h1 { + font-size: 1.5em; + font-weight: normal; +} +small { + font-size: .66666667em; +} +a { + color: #e74c3c; + text-decoration: none; +} +a:hover, a:focus { + box-shadow: 0 1px #e74c3c; +} +.bshadow0, input { + box-shadow: inset 0 -2px #e7e7e7; +} +input:hover { + box-shadow: inset 0 -2px #ccc; +} +input, fieldset { + font-family: sans-serif; + font-size: 1em; + margin: 0; + padding: 0; + border: 0; +} +input { + color: inherit; + line-height: 1.5; + height: 1.5em; + padding: .25em 0; +} +input:focus { + outline: none; + box-shadow: inset 0 -2px #449fdb; +} +.glyph { + font-size: 16px; + width: 15em; + padding-bottom: 1em; + margin-right: 4em; + margin-bottom: 1em; + float: left; + overflow: hidden; +} +.liga { + width: 80%; + width: calc(100% - 2.5em); +} +.talign-right { + text-align: right; +} +.talign-center { + text-align: center; +} +.bgc1 { + background: #f1f1f1; +} +.fgc1 { + color: #999; +} +.fgc0 { + color: #000; +} +p { + margin-top: 1em; + margin-bottom: 1em; +} +.mvm { + margin-top: .75em; + margin-bottom: .75em; +} +.mtn { + margin-top: 0; +} +.mtl, .mal { + margin-top: 1.5em; +} +.mbl, .mal { + margin-bottom: 1.5em; +} +.mal, .mhl { + margin-left: 1.5em; + margin-right: 1.5em; +} +.mhmm { + margin-left: 1em; + margin-right: 1em; +} +.mls { + margin-left: .25em; +} +.ptl { + padding-top: 1.5em; +} +.pbs, .pvs { + padding-bottom: .25em; +} +.pvs, .pts { + padding-top: .25em; +} +.unit { + float: left; +} +.unitRight { + float: right; +} +.size1of2 { + width: 50%; +} +.size1of1 { + width: 100%; +} +.clearfix:before, .clearfix:after { + content: " "; + display: table; +} +.clearfix:after { + clear: both; +} +.hidden-true { + display: none; +} +.textbox0 { + width: 3em; + background: #f1f1f1; + padding: .25em .5em; + line-height: 1.5; + height: 1.5em; +} +#testDrive { + display: block; + padding-top: 24px; + line-height: 1.5; +} +.fs0 { + font-size: 16px; +} +.fs1 { + font-size: 16px; +} +.fs2 { + font-size: 16px; +} + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo-files/demo.js b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo-files/demo.js new file mode 100644 index 0000000..6f45f1c --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo-files/demo.js @@ -0,0 +1,30 @@ +if (!('boxShadow' in document.body.style)) { + document.body.setAttribute('class', 'noBoxShadow'); +} + +document.body.addEventListener("click", function(e) { + var target = e.target; + if (target.tagName === "INPUT" && + target.getAttribute('class').indexOf('liga') === -1) { + target.select(); + } +}); + +(function() { + var fontSize = document.getElementById('fontSize'), + testDrive = document.getElementById('testDrive'), + testText = document.getElementById('testText'); + function updateTest() { + testDrive.innerHTML = testText.value || String.fromCharCode(160); + if (window.icomoonLiga) { + window.icomoonLiga(testDrive); + } + } + function updateSize() { + testDrive.style.fontSize = fontSize.value + 'px'; + } + fontSize.addEventListener('change', updateSize, false); + testText.addEventListener('input', updateTest, false); + testText.addEventListener('change', updateTest, false); + updateSize(); +}()); diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo.html b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo.html new file mode 100644 index 0000000..a36d3ba --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/demo.html @@ -0,0 +1,505 @@ + + + + + IcoMoon Demo + + + + + +
+

Font Name: icomoon (Glyphs: 27)

+
+
+

Grid Size: 14

+
+
+ + + + icon-close +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-remove +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-times +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-trash-o +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-terminal +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-header +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-paint-brush +
+
+ + +
+
+ liga: + +
+
+
+
+

Grid Size: 16

+
+
+ + + + icon-pencil2 +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-image +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-play +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-location +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-undo +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-redo +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-quotes-left +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-list-numbered +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-list2 +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-upload2 +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-link +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-happy +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-cancel-circle +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-bold +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-underline +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-italic +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-strikethrough +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-page-break +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-table2 +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-paragraph-left +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-paragraph-center +
+
+ + +
+
+ liga: + +
+
+
+
+ + + + icon-paragraph-right +
+
+ + +
+
+ liga: + +
+
+
+ + +
+

Font Test Drive

+ + +
  +
+
+ +
+

Generated by IcoMoon

+
+ + + + diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.eot b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.eot new file mode 100644 index 0000000..0d144fd Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.eot differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.svg b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.svg new file mode 100644 index 0000000..21be016 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.svg @@ -0,0 +1,37 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.ttf b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.ttf new file mode 100644 index 0000000..80be9ad Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.ttf differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.woff b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.woff new file mode 100644 index 0000000..fa64c4d Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/fonts/icomoon.woff differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/selection.json b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/selection.json new file mode 100644 index 0000000..b4a875f --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/selection.json @@ -0,0 +1,775 @@ +{ + "IcoMoonType": "selection", + "icons": [ + { + "icon": { + "paths": [ + "M741.714 755.429q0 22.857-16 38.857l-77.714 77.714q-16 16-38.857 16t-38.857-16l-168-168-168 168q-16 16-38.857 16t-38.857-16l-77.714-77.714q-16-16-16-38.857t16-38.857l168-168-168-168q-16-16-16-38.857t16-38.857l77.714-77.714q16-16 38.857-16t38.857 16l168 168 168-168q16-16 38.857-16t38.857 16l77.714 77.714q16 16 16 38.857t-16 38.857l-168 168 168 168q16 16 16 38.857z" + ], + "width": 804.5720062255859, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "close", + "remove", + "times" + ], + "defaultCode": 61453, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "close, remove, times", + "id": 13, + "order": 60, + "prevSize": 16, + "code": 61453 + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 13 + }, + { + "icon": { + "paths": [ + "M292.571 420.571v329.143q0 8-5.143 13.143t-13.143 5.143h-36.571q-8 0-13.143-5.143t-5.143-13.143v-329.143q0-8 5.143-13.143t13.143-5.143h36.571q8 0 13.143 5.143t5.143 13.143zM438.857 420.571v329.143q0 8-5.143 13.143t-13.143 5.143h-36.571q-8 0-13.143-5.143t-5.143-13.143v-329.143q0-8 5.143-13.143t13.143-5.143h36.571q8 0 13.143 5.143t5.143 13.143zM585.143 420.571v329.143q0 8-5.143 13.143t-13.143 5.143h-36.571q-8 0-13.143-5.143t-5.143-13.143v-329.143q0-8 5.143-13.143t13.143-5.143h36.571q8 0 13.143 5.143t5.143 13.143zM658.286 834.286v-541.714h-512v541.714q0 12.571 4 23.143t8.286 15.429 6 4.857h475.429q1.714 0 6-4.857t8.286-15.429 4-23.143zM274.286 219.429h256l-27.429-66.857q-4-5.143-9.714-6.286h-181.143q-5.714 1.143-9.714 6.286zM804.571 237.714v36.571q0 8-5.143 13.143t-13.143 5.143h-54.857v541.714q0 47.429-26.857 82t-64.571 34.571h-475.429q-37.714 0-64.571-33.429t-26.857-80.857v-544h-54.857q-8 0-13.143-5.143t-5.143-13.143v-36.571q0-8 5.143-13.143t13.143-5.143h176.571l40-95.429q8.571-21.143 30.857-36t45.143-14.857h182.857q22.857 0 45.143 14.857t30.857 36l40 95.429h176.571q8 0 13.143 5.143t5.143 13.143z" + ], + "width": 804.5710134506226, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "trash-o" + ], + "defaultCode": 61460, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "trash-o", + "id": 19, + "order": 53, + "prevSize": 16, + "code": 61460 + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 19 + }, + { + "icon": { + "paths": [ + "M334.286 561.714l-266.286 266.286q-5.714 5.714-13.143 5.714t-13.143-5.714l-28.571-28.571q-5.714-5.714-5.714-13.143t5.714-13.143l224.571-224.571-224.571-224.571q-5.714-5.714-5.714-13.143t5.714-13.143l28.571-28.571q5.714-5.714 13.143-5.714t13.143 5.714l266.286 266.286q5.714 5.714 5.714 13.143t-5.714 13.143zM950.857 822.857v36.571q0 8-5.143 13.143t-13.143 5.143h-548.571q-8 0-13.143-5.143t-5.143-13.143v-36.571q0-8 5.143-13.143t13.143-5.143h548.571q8 0 13.143 5.143t5.143 13.143z" + ], + "width": 958.2859897613525, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "terminal" + ], + "defaultCode": 61728, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "terminal", + "id": 256, + "order": 55, + "prevSize": 16, + "code": 61728 + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 256 + }, + { + "icon": { + "paths": [ + "M961.143 950.857q-25.143 0-75.714-2t-76.286-2q-25.143 0-75.429 2t-75.429 2q-13.714 0-21.143-11.714t-7.429-26q0-17.714 9.714-26.286t22.286-9.714 29.143-4 25.714-8.571q18.857-12 18.857-80l-0.571-223.429q0-12-0.571-17.714-7.429-2.286-28.571-2.286h-385.714q-21.714 0-29.143 2.286-0.571 5.714-0.571 17.714l-0.571 212q0 81.143 21.143 93.714 9.143 5.714 27.429 7.429t32.571 2 25.714 8.571 11.429 26q0 14.857-7.143 27.429t-20.857 12.571q-26.857 0-79.714-2t-79.143-2q-24.571 0-73.143 2t-72.571 2q-13.143 0-20.286-12t-7.143-25.714q0-17.143 8.857-25.714t20.571-10 27.143-4.286 24-8.571q18.857-13.143 18.857-81.714l-0.571-32.571v-464.571q0-1.714 0.286-14.857t0-20.857-0.857-22-2-24-3.714-20.857-6.286-18-9.143-10.286q-8.571-5.714-25.714-6.857t-30.286-1.143-23.429-8-10.286-25.714q0-14.857 6.857-27.429t20.571-12.571q26.286 0 79.143 2t79.143 2q24 0 72.286-2t72.286-2q14.286 0 21.429 12.571t7.143 27.429q0 17.143-9.714 24.857t-22 8.286-28.286 2.286-24.571 7.429q-20 12-20 91.429l0.571 182.857q0 12 0.571 18.286 7.429 1.714 22.286 1.714h399.429q14.286 0 21.714-1.714 0.571-6.286 0.571-18.286l0.571-182.857q0-79.429-20-91.429-10.286-6.286-33.429-7.143t-37.714-7.429-14.571-28.286q0-14.857 7.143-27.429t21.429-12.571q25.143 0 75.429 2t75.429 2q24.571 0 73.714-2t73.714-2q14.286 0 21.429 12.571t7.143 27.429q0 17.143-10 25.143t-22.857 8.286-29.429 1.714-25.143 7.143q-20 13.143-20 92l0.571 538.857q0 68 19.429 80 9.143 5.714 26.286 7.714t30.571 2.571 23.714 8.857 10.286 25.429q0 14.857-6.857 27.429t-20.571 12.571z" + ], + "width": 1024.001937866211, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "header" + ], + "defaultCode": 61916, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "header", + "id": 433, + "order": 49, + "prevSize": 16, + "code": 61916 + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 433 + }, + { + "icon": { + "paths": [ + "M922.857 0q40 0 70 26.571t30 66.571q0 36-25.714 86.286-189.714 359.429-265.714 429.714-55.429 52-124.571 52-72 0-123.714-52.857t-51.714-125.429q0-73.143 52.571-121.143l364.571-330.857q33.714-30.857 74.286-30.857zM403.429 590.857q22.286 43.429 60.857 74.286t86 43.429l0.571 40.571q2.286 121.714-74 198.286t-199.143 76.571q-70.286 0-124.571-26.571t-87.143-72.857-49.429-104.571-16.571-125.714q4 2.857 23.429 17.143t35.429 25.429 33.714 20.857 26.286 9.714q23.429 0 31.429-21.143 14.286-37.714 32.857-64.286t39.714-43.429 50.286-27.143 58.857-14.571 71.429-6z" + ], + "width": 1022.8569793701172, + "attrs": [], + "isMulticolor": false, + "isMulticolor2": false, + "tags": [ + "paint-brush" + ], + "defaultCode": 61948, + "grid": 14 + }, + "attrs": [], + "properties": { + "name": "paint-brush", + "id": 463, + "order": 54, + "prevSize": 16, + "code": 61948 + }, + "setIdx": 0, + "setId": 2, + "iconIdx": 463 + }, + { + "icon": { + "paths": [ + "M384 640l128-64 448-448-64-64-448 448-64 128zM289.3 867.098c-31.632-66.728-65.666-100.762-132.396-132.394l99.096-272.792 128-77.912 384-384h-192l-384 384-192 640 640-192 384-384v-192l-384 384-77.912 128z" + ], + "tags": [ + "pencil", + "write", + "edit" + ], + "defaultCode": 59654, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "pencil2, write2", + "name": "pencil2", + "order": 32, + "id": 7, + "prevSize": 16, + "code": 59654 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 6 + }, + { + "icon": { + "paths": [ + "M959.884 128c0.040 0.034 0.082 0.076 0.116 0.116v767.77c-0.034 0.040-0.076 0.082-0.116 0.116h-895.77c-0.040-0.034-0.082-0.076-0.114-0.116v-767.772c0.034-0.040 0.076-0.082 0.114-0.114h895.77zM960 64h-896c-35.2 0-64 28.8-64 64v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64v-768c0-35.2-28.8-64-64-64v0z", + "M832 288c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.98 96 96z", + "M896 832h-768v-128l224-384 256 320h64l224-192z" + ], + "tags": [ + "image", + "picture", + "photo", + "graphic" + ], + "defaultCode": 59661, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "image, picture", + "name": "image", + "order": 44, + "id": 14, + "prevSize": 16, + "code": 59661 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 13 + }, + { + "icon": { + "paths": [ + "M981.188 160.108c-143.632-20.65-302.332-32.108-469.186-32.108-166.86 0-325.556 11.458-469.194 32.108-27.53 107.726-42.808 226.75-42.808 351.892 0 125.14 15.278 244.166 42.808 351.89 143.638 20.652 302.336 32.11 469.194 32.11 166.854 0 325.552-11.458 469.186-32.11 27.532-107.724 42.812-226.75 42.812-351.89 0-125.142-15.28-244.166-42.812-351.892zM384.002 704v-384l320 192-320 192z" + ], + "tags": [ + "play", + "video", + "movie" + ], + "defaultCode": 59666, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "play, video", + "name": "play", + "order": 51, + "id": 19, + "prevSize": 16, + "code": 59666 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 18 + }, + { + "icon": { + "paths": [ + "M512 0c-176.732 0-320 143.268-320 320 0 320 320 704 320 704s320-384 320-704c0-176.732-143.27-320-320-320zM512 512c-106.040 0-192-85.96-192-192s85.96-192 192-192 192 85.96 192 192-85.96 192-192 192z" + ], + "tags": [ + "location", + "map-marker", + "pin" + ], + "defaultCode": 59719, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "location, map-marker", + "name": "location", + "order": 48, + "id": 72, + "prevSize": 16, + "code": 59719 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 71 + }, + { + "icon": { + "paths": [ + "M512 64c-141.384 0-269.376 57.32-362.032 149.978l-149.968-149.978v384h384l-143.532-143.522c69.496-69.492 165.492-112.478 271.532-112.478 212.068 0 384 171.924 384 384 0 114.696-50.292 217.636-130.018 288l84.666 96c106.302-93.816 173.352-231.076 173.352-384 0-282.77-229.23-512-512-512z" + ], + "tags": [ + "undo", + "ccw", + "arrow" + ], + "defaultCode": 59749, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "undo, ccw", + "name": "undo", + "order": 35, + "id": 102, + "prevSize": 16, + "code": 59749 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 101 + }, + { + "icon": { + "paths": [ + "M0 576c0 152.924 67.048 290.184 173.35 384l84.666-96c-79.726-70.364-130.016-173.304-130.016-288 0-212.076 171.93-384 384-384 106.042 0 202.038 42.986 271.53 112.478l-143.53 143.522h384v-384l-149.97 149.978c-92.654-92.658-220.644-149.978-362.030-149.978-282.77 0-512 229.23-512 512z" + ], + "tags": [ + "redo", + "cw", + "arrow" + ], + "defaultCode": 59750, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "redo, cw", + "name": "redo", + "order": 36, + "id": 103, + "prevSize": 16, + "code": 59750 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 102 + }, + { + "icon": { + "paths": [ + "M225 448c123.712 0 224 100.29 224 224 0 123.712-100.288 224-224 224s-224-100.288-224-224l-1-32c0-247.424 200.576-448 448-448v128c-85.474 0-165.834 33.286-226.274 93.726-11.634 11.636-22.252 24.016-31.83 37.020 11.438-1.8 23.16-2.746 35.104-2.746zM801 448c123.71 0 224 100.29 224 224 0 123.712-100.29 224-224 224s-224-100.288-224-224l-1-32c0-247.424 200.576-448 448-448v128c-85.474 0-165.834 33.286-226.274 93.726-11.636 11.636-22.254 24.016-31.832 37.020 11.44-1.8 23.16-2.746 35.106-2.746z" + ], + "tags": [ + "quotes-left", + "ldquo" + ], + "defaultCode": 59767, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "quotes-left, ldquo", + "name": "quotes-left", + "order": 34, + "id": 120, + "prevSize": 16, + "code": 59767 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 119 + }, + { + "icon": { + "paths": [ + "M384 832h640v128h-640zM384 448h640v128h-640zM384 64h640v128h-640zM192 0v256h-64v-192h-64v-64zM128 526v50h128v64h-192v-146l128-60v-50h-128v-64h192v146zM256 704v320h-192v-64h128v-64h-128v-64h128v-64h-128v-64z" + ], + "tags": [ + "list-numbered", + "options" + ], + "defaultCode": 59833, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "list-numbered, options", + "name": "list-numbered", + "order": 37, + "id": 186, + "prevSize": 16, + "code": 59833 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 185 + }, + { + "icon": { + "paths": [ + "M384 64h640v128h-640v-128zM384 448h640v128h-640v-128zM384 832h640v128h-640v-128zM0 128c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128s-128-57.308-128-128zM0 512c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128s-128-57.308-128-128zM0 896c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128s-128-57.308-128-128z" + ], + "tags": [ + "list", + "todo", + "bullet", + "menu", + "options" + ], + "defaultCode": 59835, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "list2, todo2", + "name": "list2", + "order": 38, + "id": 188, + "prevSize": 16, + "code": 59835 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 187 + }, + { + "icon": { + "paths": [ + "M0 896h1024v64h-1024zM1024 768v64h-1024v-64l128-256h256v128h256v-128h256zM224 320l288-288 288 288h-224v256h-128v-256z" + ], + "tags": [ + "upload", + "load", + "open" + ], + "defaultCode": 59846, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "upload2, load2", + "name": "upload2", + "order": 52, + "id": 199, + "prevSize": 16, + "code": 59846 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 198 + }, + { + "icon": { + "paths": [ + "M440.236 635.766c-13.31 0-26.616-5.076-36.77-15.23-95.134-95.136-95.134-249.934 0-345.070l192-192c46.088-46.086 107.36-71.466 172.534-71.466s126.448 25.38 172.536 71.464c95.132 95.136 95.132 249.934 0 345.070l-87.766 87.766c-20.308 20.308-53.23 20.308-73.54 0-20.306-20.306-20.306-53.232 0-73.54l87.766-87.766c54.584-54.586 54.584-143.404 0-197.99-26.442-26.442-61.6-41.004-98.996-41.004s-72.552 14.562-98.996 41.006l-192 191.998c-54.586 54.586-54.586 143.406 0 197.992 20.308 20.306 20.306 53.232 0 73.54-10.15 10.152-23.462 15.23-36.768 15.23z", + "M256 1012c-65.176 0-126.45-25.38-172.534-71.464-95.134-95.136-95.134-249.934 0-345.070l87.764-87.764c20.308-20.306 53.234-20.306 73.54 0 20.308 20.306 20.308 53.232 0 73.54l-87.764 87.764c-54.586 54.586-54.586 143.406 0 197.992 26.44 26.44 61.598 41.002 98.994 41.002s72.552-14.562 98.998-41.006l192-191.998c54.584-54.586 54.584-143.406 0-197.992-20.308-20.308-20.306-53.232 0-73.54 20.306-20.306 53.232-20.306 73.54 0.002 95.132 95.134 95.132 249.932 0.002 345.068l-192.002 192c-46.090 46.088-107.364 71.466-172.538 71.466z" + ], + "tags": [ + "link", + "chain", + "url", + "uri", + "anchor" + ], + "defaultCode": 59851, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "link, chain", + "name": "link", + "order": 42, + "id": 204, + "prevSize": 16, + "code": 59851 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 203 + }, + { + "icon": { + "paths": [ + "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512-512 229.23-512 512 229.23 512 512 512zM512 96c229.75 0 416 186.25 416 416s-186.25 416-416 416-416-186.25-416-416 186.25-416 416-416zM512 598.76c115.95 0 226.23-30.806 320-84.92-14.574 178.438-153.128 318.16-320 318.16-166.868 0-305.422-139.872-320-318.304 93.77 54.112 204.050 85.064 320 85.064zM256 352c0-53.019 28.654-96 64-96s64 42.981 64 96c0 53.019-28.654 96-64 96s-64-42.981-64-96zM640 352c0-53.019 28.654-96 64-96s64 42.981 64 96c0 53.019-28.654 96-64 96s-64-42.981-64-96z" + ], + "tags": [ + "happy", + "emoticon", + "smiley", + "face" + ], + "defaultCode": 59871, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "happy, emoticon", + "name": "happy", + "order": 31, + "id": 224, + "prevSize": 16, + "code": 59871 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 223 + }, + { + "icon": { + "paths": [ + "M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM512 928c-229.75 0-416-186.25-416-416s186.25-416 416-416 416 186.25 416 416-186.25 416-416 416z", + "M672 256l-160 160-160-160-96 96 160 160-160 160 96 96 160-160 160 160 96-96-160-160 160-160z" + ], + "tags": [ + "cancel-circle", + "close", + "remove", + "delete" + ], + "defaultCode": 59917, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "cancel-circle, close", + "name": "cancel-circle", + "order": 59, + "id": 270, + "prevSize": 16, + "code": 59917 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 269 + }, + { + "icon": { + "paths": [ + "M707.88 484.652c37.498-44.542 60.12-102.008 60.12-164.652 0-141.16-114.842-256-256-256h-320v896h384c141.158 0 256-114.842 256-256 0-92.956-49.798-174.496-124.12-219.348zM384 192h101.5c55.968 0 101.5 57.42 101.5 128s-45.532 128-101.5 128h-101.5v-256zM543 832h-159v-256h159c58.45 0 106 57.42 106 128s-47.55 128-106 128z" + ], + "tags": [ + "bold", + "wysiwyg" + ], + "defaultCode": 60002, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "bold, wysiwyg4", + "name": "bold", + "order": 27, + "id": 355, + "prevSize": 16, + "code": 60002 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 354 + }, + { + "icon": { + "paths": [ + "M704 64h128v416c0 159.058-143.268 288-320 288-176.73 0-320-128.942-320-288v-416h128v416c0 40.166 18.238 78.704 51.354 108.506 36.896 33.204 86.846 51.494 140.646 51.494s103.75-18.29 140.646-51.494c33.116-29.802 51.354-68.34 51.354-108.506v-416zM192 832h640v128h-640z" + ], + "tags": [ + "underline", + "wysiwyg" + ], + "defaultCode": 60003, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "underline, wysiwyg5", + "name": "underline", + "order": 28, + "id": 356, + "prevSize": 16, + "code": 60003 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 355 + }, + { + "icon": { + "paths": [ + "M896 64v64h-128l-320 768h128v64h-448v-64h128l320-768h-128v-64z" + ], + "tags": [ + "italic", + "wysiwyg" + ], + "defaultCode": 60004, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "italic, wysiwyg6", + "name": "italic", + "order": 29, + "id": 357, + "prevSize": 16, + "code": 60004 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 356 + }, + { + "icon": { + "paths": [ + "M1024 512v64h-234.506c27.504 38.51 42.506 82.692 42.506 128 0 70.878-36.66 139.026-100.58 186.964-59.358 44.518-137.284 69.036-219.42 69.036-82.138 0-160.062-24.518-219.42-69.036-63.92-47.938-100.58-116.086-100.58-186.964h128c0 69.382 87.926 128 192 128s192-58.618 192-128c0-69.382-87.926-128-192-128h-512v-64h299.518c-2.338-1.654-4.656-3.324-6.938-5.036-63.92-47.94-100.58-116.086-100.58-186.964s36.66-139.024 100.58-186.964c59.358-44.518 137.282-69.036 219.42-69.036 82.136 0 160.062 24.518 219.42 69.036 63.92 47.94 100.58 116.086 100.58 186.964h-128c0-69.382-87.926-128-192-128s-192 58.618-192 128c0 69.382 87.926 128 192 128 78.978 0 154.054 22.678 212.482 64h299.518z" + ], + "tags": [ + "strikethrough", + "wysiwyg" + ], + "defaultCode": 60005, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "strikethrough, wysiwyg7", + "name": "strikethrough", + "order": 30, + "id": 358, + "prevSize": 16, + "code": 60005 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 357 + }, + { + "icon": { + "paths": [ + "M0 512h128v64h-128zM192 512h192v64h-192zM448 512h128v64h-128zM640 512h192v64h-192zM896 512h128v64h-128zM880 0l16 448h-768l16-448h32l16 384h640l16-384zM144 1024l-16-384h768l-16 384h-32l-16-320h-640l-16 320z" + ], + "tags": [ + "page-break", + "wysiwyg" + ], + "defaultCode": 60008, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "page-break, wysiwyg10", + "name": "page-break", + "order": 57, + "id": 361, + "prevSize": 16, + "code": 60008 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 360 + }, + { + "icon": { + "paths": [ + "M0 64v896h1024v-896h-1024zM384 640v-192h256v192h-256zM640 704v192h-256v-192h256zM640 192v192h-256v-192h256zM320 192v192h-256v-192h256zM64 448h256v192h-256v-192zM704 448h256v192h-256v-192zM704 384v-192h256v192h-256zM64 704h256v192h-256v-192zM704 896v-192h256v192h-256z" + ], + "tags": [ + "table", + "wysiwyg" + ], + "defaultCode": 60017, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "table2, wysiwyg19", + "name": "table2", + "order": 43, + "id": 370, + "prevSize": 16, + "code": 60017 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 369 + }, + { + "icon": { + "paths": [ + "M0 64h1024v128h-1024zM0 256h640v128h-640zM0 640h640v128h-640zM0 448h1024v128h-1024zM0 832h1024v128h-1024z" + ], + "tags": [ + "paragraph-left", + "wysiwyg", + "align-left", + "left" + ], + "defaultCode": 60023, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "paragraph-left, wysiwyg25", + "name": "paragraph-left", + "order": 39, + "id": 376, + "prevSize": 16, + "code": 60023 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 375 + }, + { + "icon": { + "paths": [ + "M0 64h1024v128h-1024zM192 256h640v128h-640zM192 640h640v128h-640zM0 448h1024v128h-1024zM0 832h1024v128h-1024z" + ], + "tags": [ + "paragraph-center", + "wysiwyg", + "align-center", + "center" + ], + "defaultCode": 60024, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "paragraph-center, wysiwyg26", + "name": "paragraph-center", + "order": 40, + "id": 377, + "prevSize": 16, + "code": 60024 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 376 + }, + { + "icon": { + "paths": [ + "M0 64h1024v128h-1024zM384 256h640v128h-640zM384 640h640v128h-640zM0 448h1024v128h-1024zM0 832h1024v128h-1024z" + ], + "tags": [ + "paragraph-right", + "wysiwyg", + "align-right", + "right" + ], + "defaultCode": 60025, + "grid": 16, + "attrs": [] + }, + "attrs": [], + "properties": { + "ligatures": "paragraph-right, wysiwyg27", + "name": "paragraph-right", + "order": 41, + "id": 378, + "prevSize": 16, + "code": 60025 + }, + "setIdx": 1, + "setId": 1, + "iconIdx": 377 + } + ], + "height": 1024, + "metadata": { + "name": "icomoon" + }, + "preferences": { + "showGlyphs": true, + "showQuickUse": true, + "showQuickUse2": true, + "showSVGs": true, + "fontPref": { + "prefix": "icon-", + "metadata": { + "fontFamily": "icomoon" + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, + "embed": false + }, + "imagePref": { + "prefix": "icon-", + "png": true, + "useClassSelector": true, + "color": 0, + "bgColor": 16777215, + "classSelector": ".icon" + }, + "historySize": 100, + "showCodes": true, + "gridSize": 16 + } +} \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/icomoon/style.css b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/style.css new file mode 100644 index 0000000..e8caa25 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/icomoon/style.css @@ -0,0 +1,113 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?b1ngen'); + src: url('fonts/icomoon.eot?b1ngen#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?b1ngen') format('truetype'), + url('fonts/icomoon.woff?b1ngen') format('woff'), + url('fonts/icomoon.svg?b1ngen#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-close:before { + content: "\f00d"; +} +.icon-remove:before { + content: "\f00d"; +} +.icon-times:before { + content: "\f00d"; +} +.icon-trash-o:before { + content: "\f014"; +} +.icon-terminal:before { + content: "\f120"; +} +.icon-header:before { + content: "\f1dc"; +} +.icon-paint-brush:before { + content: "\f1fc"; +} +.icon-pencil2:before { + content: "\e906"; +} +.icon-image:before { + content: "\e90d"; +} +.icon-play:before { + content: "\e912"; +} +.icon-location:before { + content: "\e947"; +} +.icon-undo:before { + content: "\e965"; +} +.icon-redo:before { + content: "\e966"; +} +.icon-quotes-left:before { + content: "\e977"; +} +.icon-list-numbered:before { + content: "\e9b9"; +} +.icon-list2:before { + content: "\e9bb"; +} +.icon-upload2:before { + content: "\e9c6"; +} +.icon-link:before { + content: "\e9cb"; +} +.icon-happy:before { + content: "\e9df"; +} +.icon-cancel-circle:before { + content: "\ea0d"; +} +.icon-bold:before { + content: "\ea62"; +} +.icon-underline:before { + content: "\ea63"; +} +.icon-italic:before { + content: "\ea64"; +} +.icon-strikethrough:before { + content: "\ea65"; +} +.icon-page-break:before { + content: "\ea68"; +} +.icon-table2:before { + content: "\ea71"; +} +.icon-paragraph-left:before { + content: "\ea77"; +} +.icon-paragraph-center:before { + content: "\ea78"; +} +.icon-paragraph-right:before { + content: "\ea79"; +} diff --git a/novel-admin/src/main/resources/static/wangEditor/example/index.html b/novel-admin/src/main/resources/static/wangEditor/example/index.html new file mode 100644 index 0000000..6f55c8b --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/index.html @@ -0,0 +1,62 @@ + + + + + wangEditor demo list + + + +
+

可访问 wangEditor 官网 了解更多内容

+
+

欢迎使用 wangEditor 富文本编辑器

+
+ +

wangEditor demo list（demo页面直接查看网页源代码即可）

+ + +

其他链接

+
+ +
+ +

向我捐赠

+ +
+ + + + + + \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/pay.png b/novel-admin/src/main/resources/static/wangEditor/example/pay.png new file mode 100644 index 0000000..98efb8d Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/example/pay.png differ diff --git a/novel-admin/src/main/resources/static/wangEditor/example/server/index.js b/novel-admin/src/main/resources/static/wangEditor/example/server/index.js new file mode 100644 index 0000000..28d8a60 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/server/index.js @@ -0,0 +1,88 @@ +const fs = require('fs') +const path = require('path') +const formidable = require('formidable') +const util = require('./util.js') + +const koa = require('koa') +const app = koa() + +// 捕获错误 +const onerror = require('koa-onerror') +onerror(app) + +// post body 解析 +const bodyParser = require('koa-bodyparser') +app.use(bodyParser()) + +// 静态文件服务，针对 html js css fonts 文件 +const staticCache = require('koa-static-cache') +function setStaticCache() { + const exampleDir = path.join(__dirname, '..', '..', 'example') + const releaseDir = path.join(__dirname, '..', '..', 'release') + app.use(staticCache(exampleDir)) + app.use(staticCache(releaseDir)) +} +setStaticCache() + +// 配置路由 +const router = require('koa-router')() + +// 保存上传的文件 +function saveFiles(req) { + return new Promise((resolve, reject) => { + const imgLinks = [] + const form = new formidable.IncomingForm() + form.parse(req, function (err, fields, files) { + if (err) { + reject('formidable, form.parse err', err.stack) + } + // 存储图片的文件夹 + const storePath = path.resolve(__dirname, '..', 'upload-files') + if (!fs.existsSync(storePath)) { + fs.mkdirSync(storePath) + } + + // 遍历所有上传来的图片 + util.objForEach(files, (name, file) => { + // 图片临时位置 + const tempFilePath = file.path + // 图片名称和路径 + const fileName = file.name + const fullFileName = path.join(storePath, fileName) + // 将临时文件保存为正式文件 + fs.renameSync(tempFilePath, fullFileName) + // 存储链接 + imgLinks.push('/upload-files/' + fileName) + }) + + // 重新设置静态文件缓存 + setStaticCache() + + // 返回结果 + resolve({ + errno: 0, + data: imgLinks + }) + }) + }) +} + +// 上传图片 +router.post('/upload-img', function* () { + const ctx = this + const req = ctx.req + const res = ctx.res + + // 获取数据 + const data = yield saveFiles(req) + + // 返回结果 + this.body = JSON.stringify(data) +}) +app.use(router.routes()).use(router.allowedMethods()); + +// 启动服务 +app.listen(3000) +console.log('listening on port %s', 3000) + +module.exports = app \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/example/server/util.js b/novel-admin/src/main/resources/static/wangEditor/example/server/util.js new file mode 100644 index 0000000..62477f2 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/example/server/util.js @@ -0,0 +1,14 @@ +module.exports = { + // 遍历对象 + objForEach: function (obj, fn) { + let key, result + for (key in obj) { + if (obj.hasOwnProperty(key)) { + result = fn.call(obj, key, obj[key]) + if (result === false) { + break + } + } + } + } +} \ No newline at end of file diff --git a/novel-admin/src/main/resources/static/wangEditor/gulpfile.js b/novel-admin/src/main/resources/static/wangEditor/gulpfile.js new file mode 100644 index 0000000..171e7e5 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/gulpfile.js @@ -0,0 +1,122 @@ +const path = require('path') +const fs = require('fs') +const gulp = require('gulp') +const rollup = require('rollup') +const uglify = require('gulp-uglify') +const sourcemaps = require('gulp-sourcemaps') +const rename = require('gulp-rename') +const less = require('gulp-less') +const concat = require('gulp-concat') +const cssmin = require('gulp-cssmin') +const eslint = require('rollup-plugin-eslint') +const postcss = require('gulp-postcss') +const autoprefixer = require('autoprefixer') +const cssgrace = require('cssgrace') +const resolve = require('rollup-plugin-node-resolve') +const babel = require('rollup-plugin-babel') +const gulpReplace = require('gulp-replace') + +// 拷贝 fonts 文件 +gulp.task('copy-fonts', () => { + gulp.src('./src/fonts/*') + .pipe(gulp.dest('./release/fonts')) +}) + +// 处理 css +gulp.task('css', () => { + gulp.src('./src/less/**/*.less') + .pipe(less()) + // 产出的未压缩的文件名 + .pipe(concat('wangEditor.css')) + // 配置 postcss + .pipe(postcss([ + autoprefixer, + cssgrace + ])) + // 将 css 引用的字体文件转换为 base64 格式 + .pipe(gulpReplace( /'fonts\/w-e-icon\..+?'/gm, function (fontFile) { + // fontFile 例如 'fonts/w-e-icon.eot?paxlku' + fontFile = fontFile.slice(0, -1).slice(1) + fontFile = fontFile.split('?')[0] + var ext = fontFile.split('.')[1] + // 读取文件内容，转换为 base64 格式 + var filePath = path.resolve(__dirname, 'release', fontFile) + var content = fs.readFileSync(filePath) + var base64 = content.toString('base64') + // 返回 + return 'data:application/x-font-' + ext + ';charset=utf-8;base64,' + base64 + })) + // 产出文件的位置 + .pipe(gulp.dest('./release')) + // 产出的压缩后的文件名 + .pipe(rename('wangEditor.min.css')) + .pipe(cssmin()) + .pipe(gulp.dest('./release')) +}) + +// 处理 JS +gulp.task('script', () => { + // rollup 打包 js 模块 + return rollup.rollup({ + // 入口文件 + entry: './src/js/index.js', + plugins: [ + // 对原始文件启动 eslint 检查，配置参见 ./.eslintrc.json + eslint(), + resolve(), + babel({ + exclude: 'node_modules/**' // only transpile our source code + }) + ] + }).then(bundle => { + bundle.write({ + // 产出文件使用 umd 规范（即兼容 amd cjs 和 iife） + format: 'umd', + // iife 规范下的全局变量名称 + moduleName: 'wangEditor', + // 产出的未压缩的文件名 + dest: './release/wangEditor.js' + }).then(() => { + // 待 rollup 打包 js 完毕之后，再进行如下的处理： + gulp.src('./release/wangEditor.js') + // inline css + .pipe(gulpReplace(/__INLINE_CSS__/gm, function () { + // 读取 css 文件内容 + var filePath = path.resolve(__dirname, 'release', 'wangEditor.css') + var content = fs.readFileSync(filePath).toString('utf-8') + // 替换 \n \ ' 三个字符 + content = content.replace(/\n/g, '').replace(/\\/g, '\\\\').replace(/'/g, '\\\'') + return content + })) + .pipe(gulp.dest('./release')) + .pipe(sourcemaps.init()) + // 压缩 + .pipe(uglify()) + // 产出的压缩的文件名 + .pipe(rename('wangEditor.min.js')) + // 生成 sourcemap + .pipe(sourcemaps.write('')) + .pipe(gulp.dest('./release')) + }) + }) +}) + + +// 默认任务配置 +gulp.task('default', () => { + gulp.run('copy-fonts', 'css', 'script') + + // 监听 js 原始文件的变化 + gulp.watch('./src/js/**/*.js', () => { + gulp.run('script') + }) + // 监听 css 原始文件的变化 + gulp.watch('./src/less/**/*.less', () => { + gulp.run('css', 'script') + }) + // 监听 icon.less 的变化，变化时重新拷贝 fonts 文件 + gulp.watch('./src/less/icon.less', () => { + gulp.run('copy-fonts') + }) +}) + diff --git a/novel-admin/src/main/resources/static/wangEditor/package.json b/novel-admin/src/main/resources/static/wangEditor/package.json new file mode 100644 index 0000000..b42d94d --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/package.json @@ -0,0 +1,60 @@ +{ + "name": "wangeditor", + "title": "wangEditor", + "version": "3.0.17", + "description": "wangEditor - 基于javascript和css开发的 web 富文本编辑器， 轻量、简洁、易用、开源免费", + "homepage": "http://wangeditor.github.io/", + "author": { + "name": "wangfupeng1988", + "url": "https://github.com/wangfupeng1988" + }, + "keywords": [ + "wangEditor", + "web 富文本编辑器" + ], + "main": "release/wangEditor.js", + "maintainers": [ + { + "name": "wangfupeng1988", + "web": "http://www.cnblogs.com/wangfupeng1988/default.html?OnlyTitle=1", + "mail": "wangfupeng1988@163.com" + } + ], + "repositories": [ + { + "type": "git", + "url": "https://github.com/wangfupeng1988/wangEditor" + } + ], + "scripts": { + "release": "gulp", + "win-example": "node ./example/server/index.js", + "example": "/bin/rm -rf ./example/upload-files && mkdir ./example/upload-files && npm run win-example" + }, + "devDependencies": { + "autoprefixer": "^6.7.7", + "babel-plugin-external-helpers": "^6.22.0", + "babel-preset-latest": "^6.24.0", + "cssgrace": "^3.0.0", + "formidable": "^1.1.1", + "gulp": "^3.9.1", + "gulp-concat": "^2.6.1", + "gulp-cssmin": "^0.1.7", + "gulp-less": "^3.3.0", + "gulp-postcss": "^6.4.0", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.5.4", + "gulp-sourcemaps": "^2.5.0", + "gulp-uglify": "^2.1.2", + "koa": "^1.2.4", + "koa-bodyparser": "^2.3.0", + "koa-onerror": "^3.1.0", + "koa-router": "^5.4.0", + "koa-static-cache": "^4.0.0", + "rollup": "^0.41.6", + "rollup-plugin-babel": "^2.7.1", + "rollup-plugin-eslint": "^3.0.0", + "rollup-plugin-node-resolve": "^3.0.0" + }, + "dependencies": {} +} diff --git a/novel-admin/src/main/resources/static/wangEditor/release/fonts/w-e-icon.woff b/novel-admin/src/main/resources/static/wangEditor/release/fonts/w-e-icon.woff new file mode 100644 index 0000000..fa64c4d Binary files /dev/null and b/novel-admin/src/main/resources/static/wangEditor/release/fonts/w-e-icon.woff differ diff --git a/novel-admin/src/main/resources/static/wangEditor/release/wangEditor.css b/novel-admin/src/main/resources/static/wangEditor/release/wangEditor.css new file mode 100644 index 0000000..78a4c41 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/release/wangEditor.css @@ -0,0 +1,405 @@ +.w-e-toolbar, +.w-e-text-container, +.w-e-menu-panel { + padding: 0; + margin: 0; + box-sizing: border-box; +} +.w-e-toolbar *, +.w-e-text-container *, +.w-e-menu-panel * { + padding: 0; + margin: 0; + box-sizing: border-box; +} +.w-e-clear-fix:after { + content: ""; + display: table; + clear: both; +} + +.w-e-toolbar .w-e-droplist { + position: absolute; + left: 0; + top: 0; + background-color: #fff; + border: 1px solid #f1f1f1; + border-right-color: #ccc; + border-bottom-color: #ccc; +} +.w-e-toolbar .w-e-droplist .w-e-dp-title { + text-align: center; + color: #999; + line-height: 2; + border-bottom: 1px solid #f1f1f1; + font-size: 13px; +} +.w-e-toolbar .w-e-droplist ul.w-e-list { + list-style: none; + line-height: 1; +} +.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item { + color: #333; + padding: 5px 0; +} +.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover { + background-color: #f1f1f1; +} +.w-e-toolbar .w-e-droplist ul.w-e-block { + list-style: none; + text-align: left; + padding: 5px; +} +.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item { + display: inline-block; + *display: inline; + *zoom: 1; + padding: 3px 5px; +} +.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover { + background-color: #f1f1f1; +} + +@font-face { + font-family: 'w-e-icon'; + src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('truetype'); + font-weight: normal; + font-style: normal; +} +[class^="w-e-icon-"], +[class*=" w-e-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'w-e-icon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.w-e-icon-close:before { + content: "\f00d"; +} +.w-e-icon-upload2:before { + content: "\e9c6"; +} +.w-e-icon-trash-o:before { + content: "\f014"; +} +.w-e-icon-header:before { + content: "\f1dc"; +} +.w-e-icon-pencil2:before { + content: "\e906"; +} +.w-e-icon-paint-brush:before { + content: "\f1fc"; +} +.w-e-icon-image:before { + content: "\e90d"; +} +.w-e-icon-play:before { + content: "\e912"; +} +.w-e-icon-location:before { + content: "\e947"; +} +.w-e-icon-undo:before { + content: "\e965"; +} +.w-e-icon-redo:before { + content: "\e966"; +} +.w-e-icon-quotes-left:before { + content: "\e977"; +} +.w-e-icon-list-numbered:before { + content: "\e9b9"; +} +.w-e-icon-list2:before { + content: "\e9bb"; +} +.w-e-icon-link:before { + content: "\e9cb"; +} +.w-e-icon-happy:before { + content: "\e9df"; +} +.w-e-icon-bold:before { + content: "\ea62"; +} +.w-e-icon-underline:before { + content: "\ea63"; +} +.w-e-icon-italic:before { + content: "\ea64"; +} +.w-e-icon-strikethrough:before { + content: "\ea65"; +} +.w-e-icon-table2:before { + content: "\ea71"; +} +.w-e-icon-paragraph-left:before { + content: "\ea77"; +} +.w-e-icon-paragraph-center:before { + content: "\ea78"; +} +.w-e-icon-paragraph-right:before { + content: "\ea79"; +} +.w-e-icon-terminal:before { + content: "\f120"; +} +.w-e-icon-page-break:before { + content: "\ea68"; +} +.w-e-icon-cancel-circle:before { + content: "\ea0d"; +} + +.w-e-toolbar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0 5px; + /* flex-wrap: wrap; */ + /* 单个菜单 */ +} +.w-e-toolbar .w-e-menu { + position: relative; + text-align: center; + padding: 5px 10px; + cursor: pointer; +} +.w-e-toolbar .w-e-menu i { + color: #999; +} +.w-e-toolbar .w-e-menu:hover i { + color: #333; +} +.w-e-toolbar .w-e-active i { + color: #1e88e5; +} +.w-e-toolbar .w-e-active:hover i { + color: #1e88e5; +} + +.w-e-text-container .w-e-panel-container { + position: absolute; + top: 0; + left: 50%; + border: 1px solid #ccc; + border-top: 0; + box-shadow: 1px 1px 2px #ccc; + color: #333; + background-color: #fff; + /* 为 emotion panel 定制的样式 */ + /* 上传图片的 panel 定制样式 */ +} +.w-e-text-container .w-e-panel-container .w-e-panel-close { + position: absolute; + right: 0; + top: 0; + padding: 5px; + margin: 2px 5px 0 0; + cursor: pointer; + color: #999; +} +.w-e-text-container .w-e-panel-container .w-e-panel-close:hover { + color: #333; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-title { + list-style: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 14px; + margin: 2px 10px 0 10px; + border-bottom: 1px solid #f1f1f1; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-item { + padding: 3px 5px; + color: #999; + cursor: pointer; + margin: 0 3px; + position: relative; + top: 1px; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-active { + color: #333; + border-bottom: 1px solid #333; + cursor: default; + font-weight: 700; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content { + padding: 10px 15px 10px 15px; + font-size: 16px; + /* 输入框的样式 */ + /* 按钮的样式 */ +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input:focus, +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus, +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content button:focus { + outline: none; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea { + width: 100%; + border: 1px solid #ccc; + padding: 5px; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus { + border-color: #1e88e5; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text] { + border: none; + border-bottom: 1px solid #ccc; + font-size: 14px; + height: 20px; + color: #333; + text-align: left; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].small { + width: 30px; + text-align: center; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].block { + display: block; + width: 100%; + margin: 10px 0; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus { + border-bottom: 2px solid #1e88e5; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button { + font-size: 14px; + color: #1e88e5; + border: none; + padding: 5px 10px; + background-color: #fff; + cursor: pointer; + border-radius: 3px; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left { + float: left; + margin-right: 10px; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right { + float: right; + margin-left: 10px; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray { + color: #999; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red { + color: #c24f4a; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover { + background-color: #f1f1f1; +} +.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after { + content: ""; + display: table; + clear: both; +} +.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item { + cursor: pointer; + font-size: 18px; + padding: 0 3px; + display: inline-block; + *display: inline; + *zoom: 1; +} +.w-e-text-container .w-e-panel-container .w-e-up-img-container { + text-align: center; +} +.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn { + display: inline-block; + *display: inline; + *zoom: 1; + color: #999; + cursor: pointer; + font-size: 60px; + line-height: 1; +} +.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn:hover { + color: #333; +} + +.w-e-text-container { + position: relative; +} +.w-e-text-container .w-e-progress { + position: absolute; + background-color: #1e88e5; + bottom: 0; + left: 0; + height: 1px; +} +.w-e-text { + padding: 0 10px; + overflow-y: scroll; +} +.w-e-text p, +.w-e-text h1, +.w-e-text h2, +.w-e-text h3, +.w-e-text h4, +.w-e-text h5, +.w-e-text table, +.w-e-text pre { + margin: 10px 0; + line-height: 1.5; +} +.w-e-text ul, +.w-e-text ol { + margin: 10px 0 10px 20px; +} +.w-e-text blockquote { + display: block; + border-left: 8px solid #d0e5f2; + padding: 5px 10px; + margin: 10px 0; + line-height: 1.4; + font-size: 100%; + background-color: #f1f1f1; +} +.w-e-text code { + display: inline-block; + *display: inline; + *zoom: 1; + background-color: #f1f1f1; + border-radius: 3px; + padding: 3px 5px; + margin: 0 3px; +} +.w-e-text pre code { + display: block; +} +.w-e-text table { + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; +} +.w-e-text table td, +.w-e-text table th { + border-bottom: 1px solid #ccc; + border-right: 1px solid #ccc; + padding: 3px 5px; +} +.w-e-text table th { + border-bottom: 2px solid #ccc; + text-align: center; +} +.w-e-text:focus { + outline: none; +} +.w-e-text img { + cursor: pointer; +} +.w-e-text img:hover { + box-shadow: 0 0 5px #333; +} diff --git a/novel-admin/src/main/resources/static/wangEditor/release/wangEditor.js b/novel-admin/src/main/resources/static/wangEditor/release/wangEditor.js new file mode 100644 index 0000000..ea701f1 --- /dev/null +++ b/novel-admin/src/main/resources/static/wangEditor/release/wangEditor.js @@ -0,0 +1,4679 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.wangEditor = factory()); +}(this, (function () { 'use strict'; + +/* + poly-fill +*/ + +var polyfill = function () { + + // Object.assign + if (typeof Object.assign != 'function') { + Object.assign = function (target, varArgs) { + // .length of function is 2 + if (target == null) { + // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { + // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }; + } + + // IE 中兼容 Element.prototype.matches + if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.matchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || function (s) { + var matches = (this.document || this.ownerDocument).querySelectorAll(s), + i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; + } +}; + +/* + DOM 操作 API +*/ + +// 根据 html 代码片段创建 dom 对象 +function createElemByHTML(html) { + var div = void 0; + div = document.createElement('div'); + div.innerHTML = html; + return div.children; +} + +// 是否是 DOM List +function isDOMList(selector) { + if (!selector) { + return false; + } + if (selector instanceof HTMLCollection || selector instanceof NodeList) { + return true; + } + return false; +} + +// 封装 document.querySelectorAll +function querySelectorAll(selector) { + var result = document.querySelectorAll(selector); + if (isDOMList(result)) { + return result; + } else { + return [result]; + } +} + +// 记录所有的事件绑定 +var eventList = []; + +// 创建构造函数 +function DomElement(selector) { + if (!selector) { + return; + } + + // selector 本来就是 DomElement 对象，直接返回 + if (selector instanceof DomElement) { + return selector; + } + + this.selector = selector; + var nodeType = selector.nodeType; + + // 根据 selector 得出的结果（如 DOM，DOM List） + var selectorResult = []; + if (nodeType === 9) { + // document 节点 + selectorResult = [selector]; + } else if (nodeType === 1) { + // 单个 DOM 节点 + selectorResult = [selector]; + } else if (isDOMList(selector) || selector instanceof Array) { + // DOM List 或者数组 + selectorResult = selector; + } else if (typeof selector === 'string') { + // 字符串 + selector = selector.replace('/\n/mg', '').trim(); + if (selector.indexOf('<') === 0) { + // 如
+ selectorResult = createElemByHTML(selector); + } else { + // 如 #id .class + selectorResult = querySelectorAll(selector); + } + } + + var length = selectorResult.length; + if (!length) { + // 空数组 + return this; + } + + // 加入 DOM 节点 + var i = void 0; + for (i = 0; i < length; i++) { + this[i] = selectorResult[i]; + } + this.length = length; +} + +// 修改原型 +DomElement.prototype = { + constructor: DomElement, + + // 类数组，forEach + forEach: function forEach(fn) { + var i = void 0; + for (i = 0; i < this.length; i++) { + var elem = this[i]; + var result = fn.call(elem, elem, i); + if (result === false) { + break; + } + } + return this; + }, + + // clone + clone: function clone(deep) { + var cloneList = []; + this.forEach(function (elem) { + cloneList.push(elem.cloneNode(!!deep)); + }); + return $(cloneList); + }, + + // 获取第几个元素 + get: function get(index) { + var length = this.length; + if (index >= length) { + index = index % length; + } + return $(this[index]); + }, + + // 第一个 + first: function first() { + return this.get(0); + }, + + // 最后一个 + last: function last() { + var length = this.length; + return this.get(length - 1); + }, + + // 绑定事件 + on: function on(type, selector, fn) { + // selector 不为空，证明绑定事件要加代理 + if (!fn) { + fn = selector; + selector = null; + } + + // type 是否有多个 + var types = []; + types = type.split(/\s+/); + + return this.forEach(function (elem) { + types.forEach(function (type) { + if (!type) { + return; + } + + // 记录下，方便后面解绑 + eventList.push({ + elem: elem, + type: type, + fn: fn + }); + + if (!selector) { + // 无代理 + elem.addEventListener(type, fn); + return; + } + + // 有代理 + elem.addEventListener(type, function (e) { + var target = e.target; + if (target.matches(selector)) { + fn.call(target, e); + } + }); + }); + }); + }, + + // 取消事件绑定 + off: function off(type, fn) { + return this.forEach(function (elem) { + elem.removeEventListener(type, fn); + }); + }, + + // 获取/设置 属性 + attr: function attr(key, val) { + if (val == null) { + // 获取值 + return this[0].getAttribute(key); + } else { + // 设置值 + return this.forEach(function (elem) { + elem.setAttribute(key, val); + }); + } + }, + + // 添加 class + addClass: function addClass(className) { + if (!className) { + return this; + } + return this.forEach(function (elem) { + var arr = void 0; + if (elem.className) { + // 解析当前 className 转换为数组 + arr = elem.className.split(/\s/); + arr = arr.filter(function (item) { + return !!item.trim(); + }); + // 添加 class + if (arr.indexOf(className) < 0) { + arr.push(className); + } + // 修改 elem.class + elem.className = arr.join(' '); + } else { + elem.className = className; + } + }); + }, + + // 删除 class + removeClass: function removeClass(className) { + if (!className) { + return this; + } + return this.forEach(function (elem) { + var arr = void 0; + if (elem.className) { + // 解析当前 className 转换为数组 + arr = elem.className.split(/\s/); + arr = arr.filter(function (item) { + item = item.trim(); + // 删除 class + if (!item || item === className) { + return false; + } + return true; + }); + // 修改 elem.class + elem.className = arr.join(' '); + } + }); + }, + + // 修改 css + css: function css(key, val) { + var currentStyle = key + ':' + val + ';'; + return this.forEach(function (elem) { + var style = (elem.getAttribute('style') || '').trim(); + var styleArr = void 0, + resultArr = []; + if (style) { + // 将 style 按照 ; 拆分为数组 + styleArr = style.split(';'); + styleArr.forEach(function (item) { + // 对每项样式，按照 : 拆分为 key 和 value + var arr = item.split(':').map(function (i) { + return i.trim(); + }); + if (arr.length === 2) { + resultArr.push(arr[0] + ':' + arr[1]); + } + }); + // 替换或者新增 + resultArr = resultArr.map(function (item) { + if (item.indexOf(key) === 0) { + return currentStyle; + } else { + return item; + } + }); + if (resultArr.indexOf(currentStyle) < 0) { + resultArr.push(currentStyle); + } + // 结果 + elem.setAttribute('style', resultArr.join('; ')); + } else { + // style 无值 + elem.setAttribute('style', currentStyle); + } + }); + }, + + // 显示 + show: function show() { + return this.css('display', 'block'); + }, + + // 隐藏 + hide: function hide() { + return this.css('display', 'none'); + }, + + // 获取子节点 + children: function children() { + var elem = this[0]; + if (!elem) { + return null; + } + + return $(elem.children); + }, + + // 获取子节点（包括文本节点） + childNodes: function childNodes() { + var elem = this[0]; + if (!elem) { + return null; + } + + return $(elem.childNodes); + }, + + // 增加子节点 + append: function append($children) { + return this.forEach(function (elem) { + $children.forEach(function (child) { + elem.appendChild(child); + }); + }); + }, + + // 移除当前节点 + remove: function remove() { + return this.forEach(function (elem) { + if (elem.remove) { + elem.remove(); + } else { + var parent = elem.parentElement; + parent && parent.removeChild(elem); + } + }); + }, + + // 是否包含某个子节点 + isContain: function isContain($child) { + var elem = this[0]; + var child = $child[0]; + return elem.contains(child); + }, + + // 尺寸数据 + getSizeData: function getSizeData() { + var elem = this[0]; + return elem.getBoundingClientRect(); // 可得到 bottom height left right top width 的数据 + }, + + // 封装 nodeName + getNodeName: function getNodeName() { + var elem = this[0]; + return elem.nodeName; + }, + + // 从当前元素查找 + find: function find(selector) { + var elem = this[0]; + return $(elem.querySelectorAll(selector)); + }, + + // 获取当前元素的 text + text: function text(val) { + if (!val) { + // 获取 text + var elem = this[0]; + return elem.innerHTML.replace(/<.*?>/g, function () { + return ''; + }); + } else { + // 设置 text + return this.forEach(function (elem) { + elem.innerHTML = val; + }); + } + }, + + // 获取 html + html: function html(value) { + var elem = this[0]; + if (value == null) { + return elem.innerHTML; + } else { + elem.innerHTML = value; + return this; + } + }, + + // 获取 value + val: function val() { + var elem = this[0]; + return elem.value.trim(); + }, + + // focus + focus: function focus() { + return this.forEach(function (elem) { + elem.focus(); + }); + }, + + // parent + parent: function parent() { + var elem = this[0]; + return $(elem.parentElement); + }, + + // parentUntil 找到符合 selector 的父节点 + parentUntil: function parentUntil(selector, _currentElem) { + var results = document.querySelectorAll(selector); + var length = results.length; + if (!length) { + // 传入的 selector 无效 + return null; + } + + var elem = _currentElem || this[0]; + if (elem.nodeName === 'BODY') { + return null; + } + + var parent = elem.parentElement; + var i = void 0; + for (i = 0; i < length; i++) { + if (parent === results[i]) { + // 找到，并返回 + return $(parent); + } + } + + // 继续查找 + return this.parentUntil(selector, parent); + }, + + // 判断两个 elem 是否相等 + equal: function equal($elem) { + if ($elem.nodeType === 1) { + return this[0] === $elem; + } else { + return this[0] === $elem[0]; + } + }, + + // 将该元素插入到某个元素前面 + insertBefore: function insertBefore(selector) { + var $referenceNode = $(selector); + var referenceNode = $referenceNode[0]; + if (!referenceNode) { + return this; + } + return this.forEach(function (elem) { + var parent = referenceNode.parentNode; + parent.insertBefore(elem, referenceNode); + }); + }, + + // 将该元素插入到某个元素后面 + insertAfter: function insertAfter(selector) { + var $referenceNode = $(selector); + var referenceNode = $referenceNode[0]; + if (!referenceNode) { + return this; + } + return this.forEach(function (elem) { + var parent = referenceNode.parentNode; + if (parent.lastChild === referenceNode) { + // 最后一个元素 + parent.appendChild(elem); + } else { + // 不是最后一个元素 + parent.insertBefore(elem, referenceNode.nextSibling); + } + }); + } +}; + +// new 一个对象 +function $(selector) { + return new DomElement(selector); +} + +// 解绑所有事件，用于销毁编辑器 +$.offAll = function () { + eventList.forEach(function (item) { + var elem = item.elem; + var type = item.type; + var fn = item.fn; + // 解绑 + elem.removeEventListener(type, fn); + }); +}; + +/* + 配置信息 +*/ + +var config = { + + // 默认菜单配置 + menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo'], + + colors: ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff'], + + // // 语言配置 + // lang: { + // '设置标题': 'title', + // '正文': 'p', + // '链接文字': 'link text', + // '链接': 'link', + // '插入': 'insert', + // '创建': 'init' + // }, + + // 表情 + emotions: [{ + // tab 的标题 + title: '默认', + // type -> 'emoji' / 'image' + type: 'image', + // content -> 数组 + content: [{ + alt: '[坏笑]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png' + }, { + alt: '[舔屏]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png' + }, { + alt: '[污]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png' + }, { + alt: '[允悲]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png' + }, { + alt: '[笑而不语]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/moren_xiaoerbuyu_org.png' + }, { + alt: '[费解]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/moren_feijie_org.png' + }, { + alt: '[憧憬]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/37/moren_chongjing_org.png' + }, { + alt: '[并不简单]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fc/moren_bbjdnew_org.png' + }, { + alt: '[微笑]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_org.gif' + }, { + alt: '[酷]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8a/pcmoren_cool2017_org.png' + }, { + alt: '[嘻嘻]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_org.gif' + }, { + alt: '[哈哈]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif' + }, { + alt: '[可爱]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_org.gif' + }, { + alt: '[可怜]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_org.gif' + }, { + alt: '[挖鼻]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_org.gif' + }, { + alt: '[吃惊]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_org.gif' + }, { + alt: '[害羞]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_org.gif' + }, { + alt: '[挤眼]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_org.gif' + }, { + alt: '[闭嘴]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_org.gif' + }, { + alt: '[鄙视]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_org.gif' + }, { + alt: '[爱你]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_org.gif' + }, { + alt: '[泪]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_org.gif' + }, { + alt: '[偷笑]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif' + }, { + alt: '[亲亲]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_org.gif' + }, { + alt: '[生病]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_org.gif' + }, { + alt: '[太开心]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_org.gif' + }, { + alt: '[白眼]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_org.gif' + }, { + alt: '[右哼哼]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_org.gif' + }, { + alt: '[左哼哼]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_org.gif' + }, { + alt: '[嘘]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_org.gif' + }, { + alt: '[衰]', + src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif' + }] + }, { + // tab 的标题 + title: '新浪', + // type -> 'emoji' / 'image' + type: 'image', + // content -> 数组 + content: [{ + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif', + alt: '[草泥马]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif', + alt: '[神马]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif', + alt: '[浮云]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif', + alt: '[给力]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif', + alt: '[围观]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif', + alt: '[威武]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif', + alt: '[熊猫]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif', + alt: '[兔子]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif', + alt: '[奥特曼]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif', + alt: '[囧]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif', + alt: '[互粉]' + }, { + src: 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif', + alt: '[礼物]' + }] + }, { + // tab 的标题 + title: 'emoji', + // type -> 'emoji' / 'image' + type: 'emoji', + // content -> 数组 + content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/) + }], + + // 编辑区域的 z-index + zIndex: 10000, + + // 是否开启 debug 模式（debug 模式下错误会 throw error 形式抛出） + debug: false, + + // 插入链接时候的格式校验 + linkCheck: function linkCheck(text, link) { + // text 是插入的文字 + // link 是插入的链接 + return true; // 返回 true 即表示成功 + // return '校验失败' // 返回字符串即表示失败的提示信息 + }, + + // 插入网络图片的校验 + linkImgCheck: function linkImgCheck(src) { + // src 即图片的地址 + return true; // 返回 true 即表示成功 + // return '校验失败' // 返回字符串即表示失败的提示信息 + }, + + // 粘贴过滤样式，默认开启 + pasteFilterStyle: true, + + // 对粘贴的文字进行自定义处理，返回处理后的结果。编辑器会将处理后的结果粘贴到编辑区域中。 + // IE 暂时不支持 + pasteTextHandle: function pasteTextHandle(content) { + // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回 + return content; + }, + + // onchange 事件 + // onchange: function (html) { + // // html 即变化之后的内容 + // console.log(html) + // }, + + // 是否显示添加网络图片的 tab + showLinkImg: true, + + // 插入网络图片的回调 + linkImgCallback: function linkImgCallback(url) { + // console.log(url) // url 即插入图片的地址 + }, + + // 默认上传图片 max size: 5M + uploadImgMaxSize: 5 * 1024 * 1024, + + // 配置一次最多上传几个图片 + // uploadImgMaxLength: 5, + + // 上传图片，是否显示 base64 格式 + uploadImgShowBase64: false, + + // 上传图片，server 地址（如果有值，则 base64 格式的配置则失效） + // uploadImgServer: '/upload', + + // 自定义配置 filename + uploadFileName: '', + + // 上传图片的自定义参数 + uploadImgParams: { + // token: 'abcdef12345' + }, + + // 上传图片的自定义header + uploadImgHeaders: { + // 'Accept': 'text/x-json' + }, + + // 配置 XHR withCredentials + withCredentials: false, + + // 自定义上传图片超时时间 ms + uploadImgTimeout: 10000, + + // 上传图片 hook + uploadImgHooks: { + // customInsert: function (insertLinkImg, result, editor) { + // console.log('customInsert') + // // 图片上传并返回结果，自定义插入图片的事件，而不是编辑器自动插入图片 + // const data = result.data1 || [] + // data.forEach(link => { + // insertLinkImg(link) + // }) + // }, + before: function before(xhr, editor, files) { + // 图片上传之前触发 + + // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传 + // return { + // prevent: true, + // msg: '放弃上传' + // } + }, + success: function success(xhr, editor, result) { + // 图片上传并返回结果，图片插入成功之后触发 + }, + fail: function fail(xhr, editor, result) { + // 图片上传并返回结果，但图片插入错误时触发 + }, + error: function error(xhr, editor) { + // 图片上传出错时触发 + }, + timeout: function timeout(xhr, editor) { + // 图片上传超时时触发 + } + }, + + // 是否上传七牛云，默认为 false + qiniu: false + +}; + +/* + 工具 +*/ + +// 和 UA 相关的属性 +var UA = { + _ua: navigator.userAgent, + + // 是否 webkit + isWebkit: function isWebkit() { + var reg = /webkit/i; + return reg.test(this._ua); + }, + + // 是否 IE + isIE: function isIE() { + return 'ActiveXObject' in window; + } +}; + +// 遍历对象 +function objForEach(obj, fn) { + var key = void 0, + result = void 0; + for (key in obj) { + if (obj.hasOwnProperty(key)) { + result = fn.call(obj, key, obj[key]); + if (result === false) { + break; + } + } + } +} + +// 遍历类数组 +function arrForEach(fakeArr, fn) { + var i = void 0, + item = void 0, + result = void 0; + var length = fakeArr.length || 0; + for (i = 0; i < length; i++) { + item = fakeArr[i]; + result = fn.call(fakeArr, item, i); + if (result === false) { + break; + } + } +} + +// 获取随机数 +function getRandom(prefix) { + return prefix + Math.random().toString().slice(2); +} + +// 替换 html 特殊字符 +function replaceHtmlSymbol(html) { + if (html == null) { + return ''; + } + return html.replace(//gm, '>').replace(/"/gm, '"'); +} + +// 返回百分比的格式 + + +// 判断是不是 function +function isFunction(fn) { + return typeof fn === 'function'; +} + +/* + bold-menu +*/ +// 构造函数 +function Bold(editor) { + this.editor = editor; + this.$elem = $('
\n \n
'); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Bold.prototype = { + constructor: Bold, + + // 点击事件 + onClick: function onClick(e) { + // 点击菜单将触发这里 + + var editor = this.editor; + var isSeleEmpty = editor.selection.isSelectionEmpty(); + + if (isSeleEmpty) { + // 选区是空的，插入并选中一个“空白” + editor.selection.createEmptyRange(); + } + + // 执行 bold 命令 + editor.cmd.do('bold'); + + if (isSeleEmpty) { + // 需要将选取折叠起来 + editor.selection.collapseRange(); + editor.selection.restoreSelection(); + } + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + if (editor.cmd.queryCommandState('bold')) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + 替换多语言 + */ + +var replaceLang = function (editor, str) { + var langArgs = editor.config.langArgs || []; + var result = str; + + langArgs.forEach(function (item) { + var reg = item.reg; + var val = item.val; + + if (reg.test(result)) { + result = result.replace(reg, function () { + return val; + }); + } + }); + + return result; +}; + +/* + droplist +*/ +var _emptyFn = function _emptyFn() {}; + +// 构造函数 +function DropList(menu, opt) { + var _this = this; + + // droplist 所依附的菜单 + var editor = menu.editor; + this.menu = menu; + this.opt = opt; + // 容器 + var $container = $('
'); + + // 标题 + var $title = opt.$title; + var titleHtml = void 0; + if ($title) { + // 替换多语言 + titleHtml = $title.html(); + titleHtml = replaceLang(editor, titleHtml); + $title.html(titleHtml); + + $title.addClass('w-e-dp-title'); + $container.append($title); + } + + var list = opt.list || []; + var type = opt.type || 'list'; // 'list' 列表形式（如“标题”菜单） / 'inline-block' 块状形式（如“颜色”菜单） + var onClick = opt.onClick || _emptyFn; + + // 加入 DOM 并绑定事件 + var $list = $('
    '); + $container.append($list); + list.forEach(function (item) { + var $elem = item.$elem; + + // 替换多语言 + var elemHtml = $elem.html(); + elemHtml = replaceLang(editor, elemHtml); + $elem.html(elemHtml); + + var value = item.value; + var $li = $('
  • '); + if ($elem) { + $li.append($elem); + $list.append($li); + $li.on('click', function (e) { + onClick(value); + + // 隐藏 + _this.hideTimeoutId = setTimeout(function () { + _this.hide(); + }, 0); + }); + } + }); + + // 绑定隐藏事件 + $container.on('mouseleave', function (e) { + _this.hideTimeoutId = setTimeout(function () { + _this.hide(); + }, 0); + }); + + // 记录属性 + this.$container = $container; + + // 基本属性 + this._rendered = false; + this._show = false; +} + +// 原型 +DropList.prototype = { + constructor: DropList, + + // 显示（插入DOM） + show: function show() { + if (this.hideTimeoutId) { + // 清除之前的定时隐藏 + clearTimeout(this.hideTimeoutId); + } + + var menu = this.menu; + var $menuELem = menu.$elem; + var $container = this.$container; + if (this._show) { + return; + } + if (this._rendered) { + // 显示 + $container.show(); + } else { + // 加入 DOM 之前先定位位置 + var menuHeight = $menuELem.getSizeData().height || 0; + var width = this.opt.width || 100; // 默认为 100 + $container.css('margin-top', menuHeight + 'px').css('width', width + 'px'); + + // 加入到 DOM + $menuELem.append($container); + this._rendered = true; + } + + // 修改属性 + this._show = true; + }, + + // 隐藏（移除DOM） + hide: function hide() { + if (this.showTimeoutId) { + // 清除之前的定时显示 + clearTimeout(this.showTimeoutId); + } + + var $container = this.$container; + if (!this._show) { + return; + } + // 隐藏并需改属性 + $container.hide(); + this._show = false; + } +}; + +/* + menu - header +*/ +// 构造函数 +function Head(editor) { + var _this = this; + + this.editor = editor; + this.$elem = $('
    '); + this.type = 'droplist'; + + // 当前是否 active 状态 + this._active = false; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 100, + $title: $('

    设置标题

    '), + type: 'list', // droplist 以列表形式展示 + list: [{ $elem: $('

    H1

    '), value: '

    ' }, { $elem: $('

    H2

    '), value: '

    ' }, { $elem: $('

    H3

    '), value: '

    ' }, { $elem: $('

    H4

    '), value: '

    ' }, { $elem: $('

    H5
    '), value: '
    ' }, { $elem: $('

    正文

    '), value: '

    ' }], + onClick: function onClick(value) { + // 注意 this 是指向当前的 Head 对象 + _this._command(value); + } + }); +} + +// 原型 +Head.prototype = { + constructor: Head, + + // 执行命令 + _command: function _command(value) { + var editor = this.editor; + + var $selectionElem = editor.selection.getSelectionContainerElem(); + if (editor.$textElem.equal($selectionElem)) { + // 不能选中多行来设置标题，否则会出现问题 + // 例如选中的是

    xxx

    yyy

    来设置标题，设置之后会成为

    xxx
    yyy

    不符合预期 + return; + } + + editor.cmd.do('formatBlock', value); + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + var reg = /^h/i; + var cmdValue = editor.cmd.queryCommandValue('formatBlock'); + if (reg.test(cmdValue)) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + panel +*/ + +var emptyFn = function emptyFn() {}; + +// 记录已经显示 panel 的菜单 +var _isCreatedPanelMenus = []; + +// 构造函数 +function Panel(menu, opt) { + this.menu = menu; + this.opt = opt; +} + +// 原型 +Panel.prototype = { + constructor: Panel, + + // 显示（插入DOM） + show: function show() { + var _this = this; + + var menu = this.menu; + if (_isCreatedPanelMenus.indexOf(menu) >= 0) { + // 该菜单已经创建了 panel 不能再创建 + return; + } + + var editor = menu.editor; + var $body = $('body'); + var $textContainerElem = editor.$textContainerElem; + var opt = this.opt; + + // panel 的容器 + var $container = $('
    '); + var width = opt.width || 300; // 默认 300px + $container.css('width', width + 'px').css('margin-left', (0 - width) / 2 + 'px'); + + // 添加关闭按钮 + var $closeBtn = $(''); + $container.append($closeBtn); + $closeBtn.on('click', function () { + _this.hide(); + }); + + // 准备 tabs 容器 + var $tabTitleContainer = $('
      '); + var $tabContentContainer = $('
      '); + $container.append($tabTitleContainer).append($tabContentContainer); + + // 设置高度 + var height = opt.height; + if (height) { + $tabContentContainer.css('height', height + 'px').css('overflow-y', 'auto'); + } + + // tabs + var tabs = opt.tabs || []; + var tabTitleArr = []; + var tabContentArr = []; + tabs.forEach(function (tab, tabIndex) { + if (!tab) { + return; + } + var title = tab.title || ''; + var tpl = tab.tpl || ''; + + // 替换多语言 + title = replaceLang(editor, title); + tpl = replaceLang(editor, tpl); + + // 添加到 DOM + var $title = $('
    • ' + title + '
      • '); + $tabTitleContainer.append($title); + var $content = $(tpl); + $tabContentContainer.append($content); + + // 记录到内存 + $title._index = tabIndex; + tabTitleArr.push($title); + tabContentArr.push($content); + + // 设置 active 项 + if (tabIndex === 0) { + $title._active = true; + $title.addClass('w-e-active'); + } else { + $content.hide(); + } + + // 绑定 tab 的事件 + $title.on('click', function (e) { + if ($title._active) { + return; + } + // 隐藏所有的 tab + tabTitleArr.forEach(function ($title) { + $title._active = false; + $title.removeClass('w-e-active'); + }); + tabContentArr.forEach(function ($content) { + $content.hide(); + }); + + // 显示当前的 tab + $title._active = true; + $title.addClass('w-e-active'); + $content.show(); + }); + }); + + // 绑定关闭事件 + $container.on('click', function (e) { + // 点击时阻止冒泡 + e.stopPropagation(); + }); + $body.on('click', function (e) { + _this.hide(); + }); + + // 添加到 DOM + $textContainerElem.append($container); + + // 绑定 opt 的事件，只有添加到 DOM 之后才能绑定成功 + tabs.forEach(function (tab, index) { + if (!tab) { + return; + } + var events = tab.events || []; + events.forEach(function (event) { + var selector = event.selector; + var type = event.type; + var fn = event.fn || emptyFn; + var $content = tabContentArr[index]; + $content.find(selector).on(type, function (e) { + e.stopPropagation(); + var needToHide = fn(e); + // 执行完事件之后，是否要关闭 panel + if (needToHide) { + _this.hide(); + } + }); + }); + }); + + // focus 第一个 elem + var $inputs = $container.find('input[type=text],textarea'); + if ($inputs.length) { + $inputs.get(0).focus(); + } + + // 添加到属性 + this.$container = $container; + + // 隐藏其他 panel + this._hideOtherPanels(); + // 记录该 menu 已经创建了 panel + _isCreatedPanelMenus.push(menu); + }, + + // 隐藏（移除DOM） + hide: function hide() { + var menu = this.menu; + var $container = this.$container; + if ($container) { + $container.remove(); + } + + // 将该 menu 记录中移除 + _isCreatedPanelMenus = _isCreatedPanelMenus.filter(function (item) { + if (item === menu) { + return false; + } else { + return true; + } + }); + }, + + // 一个 panel 展示时，隐藏其他 panel + _hideOtherPanels: function _hideOtherPanels() { + if (!_isCreatedPanelMenus.length) { + return; + } + _isCreatedPanelMenus.forEach(function (menu) { + var panel = menu.panel || {}; + if (panel.hide) { + panel.hide(); + } + }); + } +}; + +/* + menu - link +*/ +// 构造函数 +function Link(editor) { + this.editor = editor; + this.$elem = $('
      '); + this.type = 'panel'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Link.prototype = { + constructor: Link, + + // 点击事件 + onClick: function onClick(e) { + var editor = this.editor; + var $linkelem = void 0; + + if (this._active) { + // 当前选区在链接里面 + $linkelem = editor.selection.getSelectionContainerElem(); + if (!$linkelem) { + return; + } + // 将该元素都包含在选取之内，以便后面整体替换 + editor.selection.createRangeByElem($linkelem); + editor.selection.restoreSelection(); + // 显示 panel + this._createPanel($linkelem.text(), $linkelem.attr('href')); + } else { + // 当前选区不在链接里面 + if (editor.selection.isSelectionEmpty()) { + // 选区是空的，未选中内容 + this._createPanel('', ''); + } else { + // 选中内容了 + this._createPanel(editor.selection.getSelectionText(), ''); + } + } + }, + + // 创建 panel + _createPanel: function _createPanel(text, link) { + var _this = this; + + // panel 中需要用到的id + var inputLinkId = getRandom('input-link'); + var inputTextId = getRandom('input-text'); + var btnOkId = getRandom('btn-ok'); + var btnDelId = getRandom('btn-del'); + + // 是否显示“删除链接” + var delBtnDisplay = this._active ? 'inline-block' : 'none'; + + // 初始化并显示 panel + var panel = new Panel(this, { + width: 300, + // panel 中可包含多个 tab + tabs: [{ + // tab 的标题 + title: '链接', + // 模板 + tpl: '
      \n \n \n
      \n \n \n
      \n
      ', + // 事件绑定 + events: [ + // 插入链接 + { + selector: '#' + btnOkId, + type: 'click', + fn: function fn() { + // 执行插入链接 + var $link = $('#' + inputLinkId); + var $text = $('#' + inputTextId); + var link = $link.val(); + var text = $text.val(); + _this._insertLink(text, link); + + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, + // 删除链接 + { + selector: '#' + btnDelId, + type: 'click', + fn: function fn() { + // 执行删除链接 + _this._delLink(); + + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }] + } // tab end + ] // tabs end + }); + + // 显示 panel + panel.show(); + + // 记录属性 + this.panel = panel; + }, + + // 删除当前链接 + _delLink: function _delLink() { + if (!this._active) { + return; + } + var editor = this.editor; + var $selectionELem = editor.selection.getSelectionContainerElem(); + if (!$selectionELem) { + return; + } + var selectionText = editor.selection.getSelectionText(); + editor.cmd.do('insertHTML', '' + selectionText + ''); + }, + + // 插入链接 + _insertLink: function _insertLink(text, link) { + var editor = this.editor; + var config = editor.config; + var linkCheck = config.linkCheck; + var checkResult = true; // 默认为 true + if (linkCheck && typeof linkCheck === 'function') { + checkResult = linkCheck(text, link); + } + if (checkResult === true) { + editor.cmd.do('insertHTML', '' + text + ''); + } else { + alert(checkResult); + } + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + var $selectionELem = editor.selection.getSelectionContainerElem(); + if (!$selectionELem) { + return; + } + if ($selectionELem.getNodeName() === 'A') { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + italic-menu +*/ +// 构造函数 +function Italic(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Italic.prototype = { + constructor: Italic, + + // 点击事件 + onClick: function onClick(e) { + // 点击菜单将触发这里 + + var editor = this.editor; + var isSeleEmpty = editor.selection.isSelectionEmpty(); + + if (isSeleEmpty) { + // 选区是空的，插入并选中一个“空白” + editor.selection.createEmptyRange(); + } + + // 执行 italic 命令 + editor.cmd.do('italic'); + + if (isSeleEmpty) { + // 需要将选取折叠起来 + editor.selection.collapseRange(); + editor.selection.restoreSelection(); + } + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + if (editor.cmd.queryCommandState('italic')) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + redo-menu +*/ +// 构造函数 +function Redo(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Redo.prototype = { + constructor: Redo, + + // 点击事件 + onClick: function onClick(e) { + // 点击菜单将触发这里 + + var editor = this.editor; + + // 执行 redo 命令 + editor.cmd.do('redo'); + } +}; + +/* + strikeThrough-menu +*/ +// 构造函数 +function StrikeThrough(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +StrikeThrough.prototype = { + constructor: StrikeThrough, + + // 点击事件 + onClick: function onClick(e) { + // 点击菜单将触发这里 + + var editor = this.editor; + var isSeleEmpty = editor.selection.isSelectionEmpty(); + + if (isSeleEmpty) { + // 选区是空的，插入并选中一个“空白” + editor.selection.createEmptyRange(); + } + + // 执行 strikeThrough 命令 + editor.cmd.do('strikeThrough'); + + if (isSeleEmpty) { + // 需要将选取折叠起来 + editor.selection.collapseRange(); + editor.selection.restoreSelection(); + } + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + if (editor.cmd.queryCommandState('strikeThrough')) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + underline-menu +*/ +// 构造函数 +function Underline(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Underline.prototype = { + constructor: Underline, + + // 点击事件 + onClick: function onClick(e) { + // 点击菜单将触发这里 + + var editor = this.editor; + var isSeleEmpty = editor.selection.isSelectionEmpty(); + + if (isSeleEmpty) { + // 选区是空的，插入并选中一个“空白” + editor.selection.createEmptyRange(); + } + + // 执行 underline 命令 + editor.cmd.do('underline'); + + if (isSeleEmpty) { + // 需要将选取折叠起来 + editor.selection.collapseRange(); + editor.selection.restoreSelection(); + } + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + if (editor.cmd.queryCommandState('underline')) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + undo-menu +*/ +// 构造函数 +function Undo(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Undo.prototype = { + constructor: Undo, + + // 点击事件 + onClick: function onClick(e) { + // 点击菜单将触发这里 + + var editor = this.editor; + + // 执行 undo 命令 + editor.cmd.do('undo'); + } +}; + +/* + menu - list +*/ +// 构造函数 +function List(editor) { + var _this = this; + + this.editor = editor; + this.$elem = $('
      '); + this.type = 'droplist'; + + // 当前是否 active 状态 + this._active = false; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 120, + $title: $('

      设置列表

      '), + type: 'list', // droplist 以列表形式展示 + list: [{ $elem: $(' 有序列表'), value: 'insertOrderedList' }, { $elem: $(' 无序列表'), value: 'insertUnorderedList' }], + onClick: function onClick(value) { + // 注意 this 是指向当前的 List 对象 + _this._command(value); + } + }); +} + +// 原型 +List.prototype = { + constructor: List, + + // 执行命令 + _command: function _command(value) { + var editor = this.editor; + var $textElem = editor.$textElem; + editor.selection.restoreSelection(); + if (editor.cmd.queryCommandState(value)) { + return; + } + editor.cmd.do(value); + + // 验证列表是否被包裹在

      之内 + var $selectionElem = editor.selection.getSelectionContainerElem(); + if ($selectionElem.getNodeName() === 'LI') { + $selectionElem = $selectionElem.parent(); + } + if (/^ol|ul$/i.test($selectionElem.getNodeName()) === false) { + return; + } + if ($selectionElem.equal($textElem)) { + // 证明是顶级标签，没有被

      包裹 + return; + } + var $parent = $selectionElem.parent(); + if ($parent.equal($textElem)) { + // $parent 是顶级标签，不能删除 + return; + } + + $selectionElem.insertAfter($parent); + $parent.remove(); + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + if (editor.cmd.queryCommandState('insertUnOrderedList') || editor.cmd.queryCommandState('insertOrderedList')) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + menu - justify +*/ +// 构造函数 +function Justify(editor) { + var _this = this; + + this.editor = editor; + this.$elem = $('

      '); + this.type = 'droplist'; + + // 当前是否 active 状态 + this._active = false; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 100, + $title: $('

      对齐方式

      '), + type: 'list', // droplist 以列表形式展示 + list: [{ $elem: $(' 靠左'), value: 'justifyLeft' }, { $elem: $(' 居中'), value: 'justifyCenter' }, { $elem: $(' 靠右'), value: 'justifyRight' }], + onClick: function onClick(value) { + // 注意 this 是指向当前的 List 对象 + _this._command(value); + } + }); +} + +// 原型 +Justify.prototype = { + constructor: Justify, + + // 执行命令 + _command: function _command(value) { + var editor = this.editor; + editor.cmd.do(value); + } +}; + +/* + menu - Forecolor +*/ +// 构造函数 +function ForeColor(editor) { + var _this = this; + + this.editor = editor; + this.$elem = $('
      '); + this.type = 'droplist'; + + // 获取配置的颜色 + var config = editor.config; + var colors = config.colors || []; + + // 当前是否 active 状态 + this._active = false; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 120, + $title: $('

      文字颜色

      '), + type: 'inline-block', // droplist 内容以 block 形式展示 + list: colors.map(function (color) { + return { $elem: $(''), value: color }; + }), + onClick: function onClick(value) { + // 注意 this 是指向当前的 ForeColor 对象 + _this._command(value); + } + }); +} + +// 原型 +ForeColor.prototype = { + constructor: ForeColor, + + // 执行命令 + _command: function _command(value) { + var editor = this.editor; + editor.cmd.do('foreColor', value); + } +}; + +/* + menu - BackColor +*/ +// 构造函数 +function BackColor(editor) { + var _this = this; + + this.editor = editor; + this.$elem = $('
      '); + this.type = 'droplist'; + + // 获取配置的颜色 + var config = editor.config; + var colors = config.colors || []; + + // 当前是否 active 状态 + this._active = false; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 120, + $title: $('

      背景色

      '), + type: 'inline-block', // droplist 内容以 block 形式展示 + list: colors.map(function (color) { + return { $elem: $(''), value: color }; + }), + onClick: function onClick(value) { + // 注意 this 是指向当前的 BackColor 对象 + _this._command(value); + } + }); +} + +// 原型 +BackColor.prototype = { + constructor: BackColor, + + // 执行命令 + _command: function _command(value) { + var editor = this.editor; + editor.cmd.do('backColor', value); + } +}; + +/* + menu - quote +*/ +// 构造函数 +function Quote(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'click'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Quote.prototype = { + constructor: Quote, + + onClick: function onClick(e) { + var editor = this.editor; + var $selectionElem = editor.selection.getSelectionContainerElem(); + var nodeName = $selectionElem.getNodeName(); + + if (!UA.isIE()) { + if (nodeName === 'BLOCKQUOTE') { + // 撤销 quote + editor.cmd.do('formatBlock', '

      '); + } else { + // 转换为 quote + editor.cmd.do('formatBlock', '

      '); + } + return; + } + + // IE 中不支持 formatBlock
      ，要用其他方式兼容 + var content = void 0, + $targetELem = void 0; + if (nodeName === 'P') { + // 将 P 转换为 quote + content = $selectionElem.text(); + $targetELem = $('
      ' + content + '
      '); + $targetELem.insertAfter($selectionElem); + $selectionElem.remove(); + return; + } + if (nodeName === 'BLOCKQUOTE') { + // 撤销 quote + content = $selectionElem.text(); + $targetELem = $('

      ' + content + '

      '); + $targetELem.insertAfter($selectionElem); + $selectionElem.remove(); + } + }, + + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + var reg = /^BLOCKQUOTE$/i; + var cmdValue = editor.cmd.queryCommandValue('formatBlock'); + if (reg.test(cmdValue)) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + menu - code +*/ +// 构造函数 +function Code(editor) { + this.editor = editor; + this.$elem = $('
      \n \n
      '); + this.type = 'panel'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Code.prototype = { + constructor: Code, + + onClick: function onClick(e) { + var editor = this.editor; + var $startElem = editor.selection.getSelectionStartElem(); + var $endElem = editor.selection.getSelectionEndElem(); + var isSeleEmpty = editor.selection.isSelectionEmpty(); + var selectionText = editor.selection.getSelectionText(); + var $code = void 0; + + if (!$startElem.equal($endElem)) { + // 跨元素选择，不做处理 + editor.selection.restoreSelection(); + return; + } + if (!isSeleEmpty) { + // 选取不是空，用 包裹即可 + $code = $('' + selectionText + ''); + editor.cmd.do('insertElem', $code); + editor.selection.createRangeByElem($code, false); + editor.selection.restoreSelection(); + return; + } + + // 选取是空，且没有夸元素选择，则插入 
      
+        if (this._active) {
+            // 选中状态，将编辑内容
+            this._createPanel($startElem.html());
+        } else {
+            // 未选中状态，将创建内容
+            this._createPanel();
+        }
+    },
+
+    _createPanel: function _createPanel(value) {
+        var _this = this;
+
+        // value - 要编辑的内容
+        value = value || '';
+        var type = !value ? 'new' : 'edit';
+        var textId = getRandom('texxt');
+        var btnId = getRandom('btn');
+
+        var panel = new Panel(this, {
+            width: 500,
+            // 一个 Panel 包含多个 tab
+            tabs: [{
+                // 标题
+                title: '插入代码',
+                // 模板
+                tpl: '
      \n                        \n                        
      \n                            \n                        
      \n                    
      ',
+                // 事件绑定
+                events: [
+                // 插入代码
+                {
+                    selector: '#' + btnId,
+                    type: 'click',
+                    fn: function fn() {
+                        var $text = $('#' + textId);
+                        var text = $text.val() || $text.html();
+                        text = replaceHtmlSymbol(text);
+                        if (type === 'new') {
+                            // 新插入
+                            _this._insertCode(text);
+                        } else {
+                            // 编辑更新
+                            _this._updateCode(text);
+                        }
+
+                        // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
+                        return true;
+                    }
+                }]
+            } // first tab end
+            ] // tabs end
+        }); // new Panel end
+
+        // 显示 panel
+        panel.show();
+
+        // 记录属性
+        this.panel = panel;
+    },
+
+    // 插入代码
+    _insertCode: function _insertCode(value) {
+        var editor = this.editor;
+        editor.cmd.do('insertHTML', '
      ' + value + '

      ');
+    },
+
+    // 更新代码
+    _updateCode: function _updateCode(value) {
+        var editor = this.editor;
+        var $selectionELem = editor.selection.getSelectionContainerElem();
+        if (!$selectionELem) {
+            return;
+        }
+        $selectionELem.html(value);
+        editor.selection.restoreSelection();
+    },
+
+    // 试图改变 active 状态
+    tryChangeActive: function tryChangeActive(e) {
+        var editor = this.editor;
+        var $elem = this.$elem;
+        var $selectionELem = editor.selection.getSelectionContainerElem();
+        if (!$selectionELem) {
+            return;
+        }
+        var $parentElem = $selectionELem.parent();
+        if ($selectionELem.getNodeName() === 'CODE' && $parentElem.getNodeName() === 'PRE') {
+            this._active = true;
+            $elem.addClass('w-e-active');
+        } else {
+            this._active = false;
+            $elem.removeClass('w-e-active');
+        }
+    }
+};
+
+/*
+    menu - emoticon
+*/
+// 构造函数
+function Emoticon(editor) {
+    this.editor = editor;
+    this.$elem = $('
      \n            \n        
      ');
+    this.type = 'panel';
+
+    // 当前是否 active 状态
+    this._active = false;
+}
+
+// 原型
+Emoticon.prototype = {
+    constructor: Emoticon,
+
+    onClick: function onClick() {
+        this._createPanel();
+    },
+
+    _createPanel: function _createPanel() {
+        var _this = this;
+
+        var editor = this.editor;
+        var config = editor.config;
+        // 获取表情配置
+        var emotions = config.emotions || [];
+
+        // 创建表情 dropPanel 的配置
+        var tabConfig = [];
+        emotions.forEach(function (emotData) {
+            var emotType = emotData.type;
+            var content = emotData.content || [];
+
+            // 这一组表情最终拼接出来的 html
+            var faceHtml = '';
+
+            // emoji 表情
+            if (emotType === 'emoji') {
+                content.forEach(function (item) {
+                    if (item) {
+                        faceHtml += '' + item + '';
+                    }
+                });
+            }
+            // 图片表情
+            if (emotType === 'image') {
+                content.forEach(function (item) {
+                    var src = item.src;
+                    var alt = item.alt;
+                    if (src) {
+                        // 加一个 data-w-e 属性，点击图片的时候不再提示编辑图片
+                        faceHtml += '' + alt + '';
+                    }
+                });
+            }
+
+            tabConfig.push({
+                title: emotData.title,
+                tpl: '
      ' + faceHtml + '
      ',
+                events: [{
+                    selector: 'span.w-e-item',
+                    type: 'click',
+                    fn: function fn(e) {
+                        var target = e.target;
+                        var $target = $(target);
+                        var nodeName = $target.getNodeName();
+
+                        var insertHtml = void 0;
+                        if (nodeName === 'IMG') {
+                            // 插入图片
+                            insertHtml = $target.parent().html();
+                        } else {
+                            // 插入 emoji
+                            insertHtml = '' + $target.html() + '';
+                        }
+
+                        _this._insert(insertHtml);
+                        // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
+                        return true;
+                    }
+                }]
+            });
+        });
+
+        var panel = new Panel(this, {
+            width: 300,
+            height: 200,
+            // 一个 Panel 包含多个 tab
+            tabs: tabConfig
+        });
+
+        // 显示 panel
+        panel.show();
+
+        // 记录属性
+        this.panel = panel;
+    },
+
+    // 插入表情
+    _insert: function _insert(emotHtml) {
+        var editor = this.editor;
+        editor.cmd.do('insertHTML', emotHtml);
+    }
+};
+
+/*
+    menu - table
+*/
+// 构造函数
+function Table(editor) {
+    this.editor = editor;
+    this.$elem = $('
      ');
+    this.type = 'panel';
+
+    // 当前是否 active 状态
+    this._active = false;
+}
+
+// 原型
+Table.prototype = {
+    constructor: Table,
+
+    onClick: function onClick() {
+        if (this._active) {
+            // 编辑现有表格
+            this._createEditPanel();
+        } else {
+            // 插入新表格
+            this._createInsertPanel();
+        }
+    },
+
+    // 创建插入新表格的 panel
+    _createInsertPanel: function _createInsertPanel() {
+        var _this = this;
+
+        // 用到的 id
+        var btnInsertId = getRandom('btn');
+        var textRowNum = getRandom('row');
+        var textColNum = getRandom('col');
+
+        var panel = new Panel(this, {
+            width: 250,
+            // panel 包含多个 tab
+            tabs: [{
+                // 标题
+                title: '插入表格',
+                // 模板
+                tpl: '
      \n                        
      \n                            \u521B\u5EFA\n                            \n                            \u884C\n                            \n                            \u5217\u7684\u8868\u683C\n                        
      \n                        
      \n                            \n                        
      \n                    
      ',
+                // 事件绑定
+                events: [{
+                    // 点击按钮，插入表格
+                    selector: '#' + btnInsertId,
+                    type: 'click',
+                    fn: function fn() {
+                        var rowNum = parseInt($('#' + textRowNum).val());
+                        var colNum = parseInt($('#' + textColNum).val());
+
+                        if (rowNum && colNum && rowNum > 0 && colNum > 0) {
+                            // form 数据有效
+                            _this._insert(rowNum, colNum);
+                        }
+
+                        // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
+                        return true;
+                    }
+                }]
+            } // first tab end
+            ] // tabs end
+        }); // panel end
+
+        // 展示 panel
+        panel.show();
+
+        // 记录属性
+        this.panel = panel;
+    },
+
+    // 插入表格
+    _insert: function _insert(rowNum, colNum) {
+        // 拼接 table 模板
+        var r = void 0,
+            c = void 0;
+        var html = '
      '; + for (r = 0; r < rowNum; r++) { + html += ''; + if (r === 0) { + for (c = 0; c < colNum; c++) { + html += ''; + } + } else { + for (c = 0; c < colNum; c++) { + html += ''; + } + } + html += ''; + } + html += '
        


      '; + + // 执行命令 + var editor = this.editor; + editor.cmd.do('insertHTML', html); + + // 防止 firefox 下出现 resize 的控制点 + editor.cmd.do('enableObjectResizing', false); + editor.cmd.do('enableInlineTableEditing', false); + }, + + // 创建编辑表格的 panel + _createEditPanel: function _createEditPanel() { + var _this2 = this; + + // 可用的 id + var addRowBtnId = getRandom('add-row'); + var addColBtnId = getRandom('add-col'); + var delRowBtnId = getRandom('del-row'); + var delColBtnId = getRandom('del-col'); + var delTableBtnId = getRandom('del-table'); + + // 创建 panel 对象 + var panel = new Panel(this, { + width: 320, + // panel 包含多个 tab + tabs: [{ + // 标题 + title: '编辑表格', + // 模板 + tpl: '
      \n
      \n \n \n \n \n
      \n
      \n \n \n
      ', + // 事件绑定 + events: [{ + // 增加行 + selector: '#' + addRowBtnId, + type: 'click', + fn: function fn() { + _this2._addRow(); + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + // 增加列 + selector: '#' + addColBtnId, + type: 'click', + fn: function fn() { + _this2._addCol(); + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + // 删除行 + selector: '#' + delRowBtnId, + type: 'click', + fn: function fn() { + _this2._delRow(); + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + // 删除列 + selector: '#' + delColBtnId, + type: 'click', + fn: function fn() { + _this2._delCol(); + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + // 删除表格 + selector: '#' + delTableBtnId, + type: 'click', + fn: function fn() { + _this2._delTable(); + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }] + }] + }); + // 显示 panel + panel.show(); + }, + + // 获取选中的单元格的位置信息 + _getLocationData: function _getLocationData() { + var result = {}; + var editor = this.editor; + var $selectionELem = editor.selection.getSelectionContainerElem(); + if (!$selectionELem) { + return; + } + var nodeName = $selectionELem.getNodeName(); + if (nodeName !== 'TD' && nodeName !== 'TH') { + return; + } + + // 获取 td index + var $tr = $selectionELem.parent(); + var $tds = $tr.children(); + var tdLength = $tds.length; + $tds.forEach(function (td, index) { + if (td === $selectionELem[0]) { + // 记录并跳出循环 + result.td = { + index: index, + elem: td, + length: tdLength + }; + return false; + } + }); + + // 获取 tr index + var $tbody = $tr.parent(); + var $trs = $tbody.children(); + var trLength = $trs.length; + $trs.forEach(function (tr, index) { + if (tr === $tr[0]) { + // 记录并跳出循环 + result.tr = { + index: index, + elem: tr, + length: trLength + }; + return false; + } + }); + + // 返回结果 + return result; + }, + + // 增加行 + _addRow: function _addRow() { + // 获取当前单元格的位置信息 + var locationData = this._getLocationData(); + if (!locationData) { + return; + } + var trData = locationData.tr; + var $currentTr = $(trData.elem); + var tdData = locationData.td; + var tdLength = tdData.length; + + // 拼接即将插入的字符串 + var newTr = document.createElement('tr'); + var tpl = '', + i = void 0; + for (i = 0; i < tdLength; i++) { + tpl += ' '; + } + newTr.innerHTML = tpl; + // 插入 + $(newTr).insertAfter($currentTr); + }, + + // 增加列 + _addCol: function _addCol() { + // 获取当前单元格的位置信息 + var locationData = this._getLocationData(); + if (!locationData) { + return; + } + var trData = locationData.tr; + var tdData = locationData.td; + var tdIndex = tdData.index; + var $currentTr = $(trData.elem); + var $trParent = $currentTr.parent(); + var $trs = $trParent.children(); + + // 遍历所有行 + $trs.forEach(function (tr) { + var $tr = $(tr); + var $tds = $tr.children(); + var $currentTd = $tds.get(tdIndex); + var name = $currentTd.getNodeName().toLowerCase(); + + // new 一个 td，并插入 + var newTd = document.createElement(name); + $(newTd).insertAfter($currentTd); + }); + }, + + // 删除行 + _delRow: function _delRow() { + // 获取当前单元格的位置信息 + var locationData = this._getLocationData(); + if (!locationData) { + return; + } + var trData = locationData.tr; + var $currentTr = $(trData.elem); + $currentTr.remove(); + }, + + // 删除列 + _delCol: function _delCol() { + // 获取当前单元格的位置信息 + var locationData = this._getLocationData(); + if (!locationData) { + return; + } + var trData = locationData.tr; + var tdData = locationData.td; + var tdIndex = tdData.index; + var $currentTr = $(trData.elem); + var $trParent = $currentTr.parent(); + var $trs = $trParent.children(); + + // 遍历所有行 + $trs.forEach(function (tr) { + var $tr = $(tr); + var $tds = $tr.children(); + var $currentTd = $tds.get(tdIndex); + // 删除 + $currentTd.remove(); + }); + }, + + // 删除表格 + _delTable: function _delTable() { + var editor = this.editor; + var $selectionELem = editor.selection.getSelectionContainerElem(); + if (!$selectionELem) { + return; + } + var $table = $selectionELem.parentUntil('table'); + if (!$table) { + return; + } + $table.remove(); + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + var $selectionELem = editor.selection.getSelectionContainerElem(); + if (!$selectionELem) { + return; + } + var nodeName = $selectionELem.getNodeName(); + if (nodeName === 'TD' || nodeName === 'TH') { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + menu - video +*/ +// 构造函数 +function Video(editor) { + this.editor = editor; + this.$elem = $('
      '); + this.type = 'panel'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Video.prototype = { + constructor: Video, + + onClick: function onClick() { + this._createPanel(); + }, + + _createPanel: function _createPanel() { + var _this = this; + + // 创建 id + var textValId = getRandom('text-val'); + var btnId = getRandom('btn'); + + // 创建 panel + var panel = new Panel(this, { + width: 350, + // 一个 panel 多个 tab + tabs: [{ + // 标题 + title: '插入视频', + // 模板 + tpl: '
      \n \n
      \n \n
      \n
      ', + // 事件绑定 + events: [{ + selector: '#' + btnId, + type: 'click', + fn: function fn() { + var $text = $('#' + textValId); + var val = $text.val().trim(); + + // 测试用视频地址 + // + + if (val) { + // 插入视频 + _this._insert(val); + } + + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }] + } // first tab end + ] // tabs end + }); // panel end + + // 显示 panel + panel.show(); + + // 记录属性 + this.panel = panel; + }, + + // 插入视频 + _insert: function _insert(val) { + var editor = this.editor; + editor.cmd.do('insertHTML', val + '


      '); + } +}; + +/* + menu - img +*/ +// 构造函数 +function Image(editor) { + this.editor = editor; + var imgMenuId = getRandom('w-e-img'); + this.$elem = $('
      '); + editor.imgMenuId = imgMenuId; + this.type = 'panel'; + + // 当前是否 active 状态 + this._active = false; +} + +// 原型 +Image.prototype = { + constructor: Image, + + onClick: function onClick() { + var editor = this.editor; + var config = editor.config; + if (config.qiniu) { + return; + } + if (this._active) { + this._createEditPanel(); + } else { + this._createInsertPanel(); + } + }, + + _createEditPanel: function _createEditPanel() { + var editor = this.editor; + + // id + var width30 = getRandom('width-30'); + var width50 = getRandom('width-50'); + var width100 = getRandom('width-100'); + var delBtn = getRandom('del-btn'); + + // tab 配置 + var tabsConfig = [{ + title: '编辑图片', + tpl: '
      \n
      \n \u6700\u5927\u5BBD\u5EA6\uFF1A\n \n \n \n
      \n
      \n \n \n
      ', + events: [{ + selector: '#' + width30, + type: 'click', + fn: function fn() { + var $img = editor._selectedImg; + if ($img) { + $img.css('max-width', '30%'); + } + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + selector: '#' + width50, + type: 'click', + fn: function fn() { + var $img = editor._selectedImg; + if ($img) { + $img.css('max-width', '50%'); + } + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + selector: '#' + width100, + type: 'click', + fn: function fn() { + var $img = editor._selectedImg; + if ($img) { + $img.css('max-width', '100%'); + } + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }, { + selector: '#' + delBtn, + type: 'click', + fn: function fn() { + var $img = editor._selectedImg; + if ($img) { + $img.remove(); + } + // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭 + return true; + } + }] + }]; + + // 创建 panel 并显示 + var panel = new Panel(this, { + width: 300, + tabs: tabsConfig + }); + panel.show(); + + // 记录属性 + this.panel = panel; + }, + + _createInsertPanel: function _createInsertPanel() { + var editor = this.editor; + var uploadImg = editor.uploadImg; + var config = editor.config; + + // id + var upTriggerId = getRandom('up-trigger'); + var upFileId = getRandom('up-file'); + var linkUrlId = getRandom('link-url'); + var linkBtnId = getRandom('link-btn'); + + // tabs 的配置 + var tabsConfig = [{ + title: '上传图片', + tpl: '
      \n
      \n \n
      \n
      \n \n
      \n
      ', + events: [{ + // 触发选择图片 + selector: '#' + upTriggerId, + type: 'click', + fn: function fn() { + var $file = $('#' + upFileId); + var fileElem = $file[0]; + if (fileElem) { + fileElem.click(); + } else { + // 返回 true 可关闭 panel + return true; + } + } + }, { + // 选择图片完毕 + selector: '#' + upFileId, + type: 'change', + fn: function fn() { + var $file = $('#' + upFileId); + var fileElem = $file[0]; + if (!fileElem) { + // 返回 true 可关闭 panel + return true; + } + + // 获取选中的 file 对象列表 + var fileList = fileElem.files; + if (fileList.length) { + uploadImg.uploadImg(fileList); + } + + // 返回 true 可关闭 panel + return true; + } + }] + }, // first tab end + { + title: '网络图片', + tpl: '
      \n \n
      \n \n
      \n
      ', + events: [{ + selector: '#' + linkBtnId, + type: 'click', + fn: function fn() { + var $linkUrl = $('#' + linkUrlId); + var url = $linkUrl.val().trim(); + + if (url) { + uploadImg.insertLinkImg(url); + } + + // 返回 true 表示函数执行结束之后关闭 panel + return true; + } + }] + } // second tab end + ]; // tabs end + + // 判断 tabs 的显示 + var tabsConfigResult = []; + if ((config.uploadImgShowBase64 || config.uploadImgServer || config.customUploadImg) && window.FileReader) { + // 显示“上传图片” + tabsConfigResult.push(tabsConfig[0]); + } + if (config.showLinkImg) { + // 显示“网络图片” + tabsConfigResult.push(tabsConfig[1]); + } + + // 创建 panel 并显示 + var panel = new Panel(this, { + width: 300, + tabs: tabsConfigResult + }); + panel.show(); + + // 记录属性 + this.panel = panel; + }, + + // 试图改变 active 状态 + tryChangeActive: function tryChangeActive(e) { + var editor = this.editor; + var $elem = this.$elem; + if (editor._selectedImg) { + this._active = true; + $elem.addClass('w-e-active'); + } else { + this._active = false; + $elem.removeClass('w-e-active'); + } + } +}; + +/* + 所有菜单的汇总 +*/ + +// 存储菜单的构造函数 +var MenuConstructors = {}; + +MenuConstructors.bold = Bold; + +MenuConstructors.head = Head; + +MenuConstructors.link = Link; + +MenuConstructors.italic = Italic; + +MenuConstructors.redo = Redo; + +MenuConstructors.strikeThrough = StrikeThrough; + +MenuConstructors.underline = Underline; + +MenuConstructors.undo = Undo; + +MenuConstructors.list = List; + +MenuConstructors.justify = Justify; + +MenuConstructors.foreColor = ForeColor; + +MenuConstructors.backColor = BackColor; + +MenuConstructors.quote = Quote; + +MenuConstructors.code = Code; + +MenuConstructors.emoticon = Emoticon; + +MenuConstructors.table = Table; + +MenuConstructors.video = Video; + +MenuConstructors.image = Image; + +/* + 菜单集合 +*/ +// 构造函数 +function Menus(editor) { + this.editor = editor; + this.menus = {}; +} + +// 修改原型 +Menus.prototype = { + constructor: Menus, + + // 初始化菜单 + init: function init() { + var _this = this; + + var editor = this.editor; + var config = editor.config || {}; + var configMenus = config.menus || []; // 获取配置中的菜单 + + // 根据配置信息，创建菜单 + configMenus.forEach(function (menuKey) { + var MenuConstructor = MenuConstructors[menuKey]; + if (MenuConstructor && typeof MenuConstructor === 'function') { + // 创建单个菜单 + _this.menus[menuKey] = new MenuConstructor(editor); + } + }); + + // 添加到菜单栏 + this._addToToolbar(); + + // 绑定事件 + this._bindEvent(); + }, + + // 添加到菜单栏 + _addToToolbar: function _addToToolbar() { + var editor = this.editor; + var $toolbarElem = editor.$toolbarElem; + var menus = this.menus; + var config = editor.config; + // config.zIndex 是配置的编辑区域的 z-index，菜单的 z-index 得在其基础上 +1 + var zIndex = config.zIndex + 1; + objForEach(menus, function (key, menu) { + var $elem = menu.$elem; + if ($elem) { + // 设置 z-index + $elem.css('z-index', zIndex); + $toolbarElem.append($elem); + } + }); + }, + + // 绑定菜单 click mouseenter 事件 + _bindEvent: function _bindEvent() { + var menus = this.menus; + var editor = this.editor; + objForEach(menus, function (key, menu) { + var type = menu.type; + if (!type) { + return; + } + var $elem = menu.$elem; + var droplist = menu.droplist; + var panel = menu.panel; + + // 点击类型，例如 bold + if (type === 'click' && menu.onClick) { + $elem.on('click', function (e) { + if (editor.selection.getRange() == null) { + return; + } + menu.onClick(e); + }); + } + + // 下拉框，例如 head + if (type === 'droplist' && droplist) { + $elem.on('mouseenter', function (e) { + if (editor.selection.getRange() == null) { + return; + } + // 显示 + droplist.showTimeoutId = setTimeout(function () { + droplist.show(); + }, 200); + }).on('mouseleave', function (e) { + // 隐藏 + droplist.hideTimeoutId = setTimeout(function () { + droplist.hide(); + }, 0); + }); + } + + // 弹框类型，例如 link + if (type === 'panel' && menu.onClick) { + $elem.on('click', function (e) { + e.stopPropagation(); + if (editor.selection.getRange() == null) { + return; + } + // 在自定义事件中显示 panel + menu.onClick(e); + }); + } + }); + }, + + // 尝试修改菜单状态 + changeActive: function changeActive() { + var menus = this.menus; + objForEach(menus, function (key, menu) { + if (menu.tryChangeActive) { + setTimeout(function () { + menu.tryChangeActive(); + }, 100); + } + }); + } +}; + +/* + 粘贴信息的处理 +*/ + +// 获取粘贴的纯文本 +function getPasteText(e) { + var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData; + var pasteText = void 0; + if (clipboardData == null) { + pasteText = window.clipboardData && window.clipboardData.getData('text'); + } else { + pasteText = clipboardData.getData('text/plain'); + } + + return replaceHtmlSymbol(pasteText); +} + +// 获取粘贴的html +function getPasteHtml(e, filterStyle) { + var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData; + var pasteText = void 0, + pasteHtml = void 0; + if (clipboardData == null) { + pasteText = window.clipboardData && window.clipboardData.getData('text'); + } else { + pasteText = clipboardData.getData('text/plain'); + pasteHtml = clipboardData.getData('text/html'); + } + if (!pasteHtml && pasteText) { + pasteHtml = '

      ' + replaceHtmlSymbol(pasteText) + '

      '; + } + if (!pasteHtml) { + return; + } + + // 过滤word中状态过来的无用字符 + var docSplitHtml = pasteHtml.split(''); + if (docSplitHtml.length === 2) { + pasteHtml = docSplitHtml[0]; + } + + // 过滤无用标签 + pasteHtml = pasteHtml.replace(/<(meta|script|link).+?>/igm, ''); + // 去掉注释 + pasteHtml = pasteHtml.replace(//mg, ''); + // 过滤 data-xxx 属性 + pasteHtml = pasteHtml.replace(/\s?data-.+?=('|").+?('|")/igm, ''); + + if (filterStyle) { + // 过滤样式 + pasteHtml = pasteHtml.replace(/\s?(class|style)=('|").+?('|")/igm, ''); + } else { + // 保留样式 + pasteHtml = pasteHtml.replace(/\s?class=('|").+?('|")/igm, ''); + } + + return pasteHtml; +} + +// 获取粘贴的图片文件 +function getPasteImgs(e) { + var result = []; + var txt = getPasteText(e); + if (txt) { + // 有文字，就忽略图片 + return result; + } + + var clipboardData = e.clipboardData || e.originalEvent && e.originalEvent.clipboardData || {}; + var items = clipboardData.items; + if (!items) { + return result; + } + + objForEach(items, function (key, value) { + var type = value.type; + if (/image/i.test(type)) { + result.push(value.getAsFile()); + } + }); + + return result; +} + +/* + 编辑区域 +*/ + +// 获取一个 elem.childNodes 的 JSON 数据 +function getChildrenJSON($elem) { + var result = []; + var $children = $elem.childNodes() || []; // 注意 childNodes() 可以获取文本节点 + $children.forEach(function (curElem) { + var elemResult = void 0; + var nodeType = curElem.nodeType; + + // 文本节点 + if (nodeType === 3) { + elemResult = curElem.textContent; + } + + // 普通 DOM 节点 + if (nodeType === 1) { + elemResult = {}; + + // tag + elemResult.tag = curElem.nodeName.toLowerCase(); + // attr + var attrData = []; + var attrList = curElem.attributes || {}; + var attrListLength = attrList.length || 0; + for (var i = 0; i < attrListLength; i++) { + var attr = attrList[i]; + attrData.push({ + name: attr.name, + value: attr.value + }); + } + elemResult.attrs = attrData; + // children（递归） + elemResult.children = getChildrenJSON($(curElem)); + } + + result.push(elemResult); + }); + return result; +} + +// 构造函数 +function Text(editor) { + this.editor = editor; +} + +// 修改原型 +Text.prototype = { + constructor: Text, + + // 初始化 + init: function init() { + // 绑定事件 + this._bindEvent(); + }, + + // 清空内容 + clear: function clear() { + this.html('


      '); + }, + + // 获取 设置 html + html: function html(val) { + var editor = this.editor; + var $textElem = editor.$textElem; + var html = void 0; + if (val == null) { + html = $textElem.html(); + // 未选中任何内容的时候点击“加粗”或者“斜体”等按钮，就得需要一个空的占位符 ​ ，这里替换掉 + html = html.replace(/\u200b/gm, ''); + return html; + } else { + $textElem.html(val); + + // 初始化选取，将光标定位到内容尾部 + editor.initSelection(); + } + }, + + // 获取 JSON + getJSON: function getJSON() { + var editor = this.editor; + var $textElem = editor.$textElem; + return getChildrenJSON($textElem); + }, + + // 获取 设置 text + text: function text(val) { + var editor = this.editor; + var $textElem = editor.$textElem; + var text = void 0; + if (val == null) { + text = $textElem.text(); + // 未选中任何内容的时候点击“加粗”或者“斜体”等按钮，就得需要一个空的占位符 ​ ，这里替换掉 + text = text.replace(/\u200b/gm, ''); + return text; + } else { + $textElem.text('

      ' + val + '

      '); + + // 初始化选取，将光标定位到内容尾部 + editor.initSelection(); + } + }, + + // 追加内容 + append: function append(html) { + var editor = this.editor; + var $textElem = editor.$textElem; + $textElem.append($(html)); + + // 初始化选取，将光标定位到内容尾部 + editor.initSelection(); + }, + + // 绑定事件 + _bindEvent: function _bindEvent() { + // 实时保存选取 + this._saveRangeRealTime(); + + // 按回车建时的特殊处理 + this._enterKeyHandle(); + + // 清空时保留


      + this._clearHandle(); + + // 粘贴事件（粘贴文字，粘贴图片） + this._pasteHandle(); + + // tab 特殊处理 + this._tabHandle(); + + // img 点击 + this._imgHandle(); + + // 拖拽事件 + this._dragHandle(); + }, + + // 实时保存选取 + _saveRangeRealTime: function _saveRangeRealTime() { + var editor = this.editor; + var $textElem = editor.$textElem; + + // 保存当前的选区 + function saveRange(e) { + // 随时保存选区 + editor.selection.saveRange(); + // 更新按钮 ative 状态 + editor.menus.changeActive(); + } + // 按键后保存 + $textElem.on('keyup', saveRange); + $textElem.on('mousedown', function (e) { + // mousedown 状态下，鼠标滑动到编辑区域外面，也需要保存选区 + $textElem.on('mouseleave', saveRange); + }); + $textElem.on('mouseup', function (e) { + saveRange(); + // 在编辑器区域之内完成点击，取消鼠标滑动到编辑区外面的事件 + $textElem.off('mouseleave', saveRange); + }); + }, + + // 按回车键时的特殊处理 + _enterKeyHandle: function _enterKeyHandle() { + var editor = this.editor; + var $textElem = editor.$textElem; + + function insertEmptyP($selectionElem) { + var $p = $('


      '); + $p.insertBefore($selectionElem); + editor.selection.createRangeByElem($p, true); + editor.selection.restoreSelection(); + $selectionElem.remove(); + } + + // 将回车之后生成的非

      的顶级标签，改为

      + function pHandle(e) { + var $selectionElem = editor.selection.getSelectionContainerElem(); + var $parentElem = $selectionElem.parent(); + + if ($parentElem.html() === '
      ') { + // 回车之前光标所在一个

      .....

      ，忽然回车生成一个空的


      + // 而且继续回车跳不出去，因此只能特殊处理 + insertEmptyP($selectionElem); + return; + } + + if (!$parentElem.equal($textElem)) { + // 不是顶级标签 + return; + } + + var nodeName = $selectionElem.getNodeName(); + if (nodeName === 'P') { + // 当前的标签是 P ，不用做处理 + return; + } + + if ($selectionElem.text()) { + // 有内容，不做处理 + return; + } + + // 插入

      ，并将选取定位到

      ，删除当前标签 + insertEmptyP($selectionElem); + } + + $textElem.on('keyup', function (e) { + if (e.keyCode !== 13) { + // 不是回车键 + return; + } + // 将回车之后生成的非

      的顶级标签，改为

      + pHandle(e); + }); + + //

      回车时 特殊处理 + function codeHandle(e) { + var $selectionElem = editor.selection.getSelectionContainerElem(); + if (!$selectionElem) { + return; + } + var $parentElem = $selectionElem.parent(); + var selectionNodeName = $selectionElem.getNodeName(); + var parentNodeName = $parentElem.getNodeName(); + + if (selectionNodeName !== 'CODE' || parentNodeName !== 'PRE') { + // 不符合要求 忽略 + return; + } + + if (!editor.cmd.queryCommandSupported('insertHTML')) { + // 必须原生支持 insertHTML 命令 + return; + } + + // 处理：光标定位到代码末尾，联系点击两次回车，即跳出代码块 + if (editor._willBreakCode === true) { + // 此时可以跳出代码块 + // 插入

      ，并将选取定位到

      + var $p = $('


      '); + $p.insertAfter($parentElem); + editor.selection.createRangeByElem($p, true); + editor.selection.restoreSelection(); + + // 修改状态 + editor._willBreakCode = false; + + e.preventDefault(); + return; + } + + var _startOffset = editor.selection.getRange().startOffset; + + // 处理：回车时，不能插入
      而是插入 \n ，因为是在 pre 标签里面 + editor.cmd.do('insertHTML', '\n'); + editor.selection.saveRange(); + if (editor.selection.getRange().startOffset === _startOffset) { + // 没起作用，再来一遍 + editor.cmd.do('insertHTML', '\n'); + } + + var codeLength = $selectionElem.html().length; + if (editor.selection.getRange().startOffset + 1 === codeLength) { + // 说明光标在代码最后的位置，执行了回车操作 + // 记录下来，以便下次回车时候跳出 code + editor._willBreakCode = true; + } + + // 阻止默认行为 + e.preventDefault(); + } + + $textElem.on('keydown', function (e) { + if (e.keyCode !== 13) { + // 不是回车键 + // 取消即将跳转代码块的记录 + editor._willBreakCode = false; + return; + } + //
      回车时 特殊处理 + codeHandle(e); + }); + }, + + // 清空时保留


      + _clearHandle: function _clearHandle() { + var editor = this.editor; + var $textElem = editor.$textElem; + + $textElem.on('keydown', function (e) { + if (e.keyCode !== 8) { + return; + } + var txtHtml = $textElem.html().toLowerCase().trim(); + if (txtHtml === '


      ') { + // 最后剩下一个空行，就不再删除了 + e.preventDefault(); + return; + } + }); + + $textElem.on('keyup', function (e) { + if (e.keyCode !== 8) { + return; + } + var $p = void 0; + var txtHtml = $textElem.html().toLowerCase().trim(); + + // firefox 时用 txtHtml === '
      ' 判断，其他用 !txtHtml 判断 + if (!txtHtml || txtHtml === '
      ') { + // 内容空了 + $p = $('


      '); + $textElem.html(''); // 一定要先清空，否则在 firefox 下有问题 + $textElem.append($p); + editor.selection.createRangeByElem($p, false, true); + editor.selection.restoreSelection(); + } + }); + }, + + // 粘贴事件（粘贴文字 粘贴图片） + _pasteHandle: function _pasteHandle() { + var editor = this.editor; + var config = editor.config; + var pasteFilterStyle = config.pasteFilterStyle; + var pasteTextHandle = config.pasteTextHandle; + var $textElem = editor.$textElem; + + // 粘贴图片、文本的事件，每次只能执行一个 + // 判断该次粘贴事件是否可以执行 + var pasteTime = 0; + function canDo() { + var now = Date.now(); + var flag = false; + if (now - pasteTime >= 500) { + // 间隔大于 500 ms ，可以执行 + flag = true; + } + pasteTime = now; + return flag; + } + function resetTime() { + pasteTime = 0; + } + + // 粘贴文字 + $textElem.on('paste', function (e) { + if (UA.isIE()) { + return; + } else { + // 阻止默认行为，使用 execCommand 的粘贴命令 + e.preventDefault(); + } + + // 粘贴图片和文本，只能同时使用一个 + if (!canDo()) { + return; + } + + // 获取粘贴的文字 + var pasteHtml = getPasteHtml(e, pasteFilterStyle); + var pasteText = getPasteText(e); + pasteText = pasteText.replace(/\n/gm, '
      '); + + var $selectionElem = editor.selection.getSelectionContainerElem(); + if (!$selectionElem) { + return; + } + var nodeName = $selectionElem.getNodeName(); + + // code 中只能粘贴纯文本 + if (nodeName === 'CODE' || nodeName === 'PRE') { + if (pasteTextHandle && isFunction(pasteTextHandle)) { + // 用户自定义过滤处理粘贴内容 + pasteText = '' + (pasteTextHandle(pasteText) || ''); + } + editor.cmd.do('insertHTML', '

      ' + pasteText + '

      '); + return; + } + + // 先放开注释，有问题再追查 ———— + // // 表格中忽略，可能会出现异常问题 + // if (nodeName === 'TD' || nodeName === 'TH') { + // return + // } + + if (!pasteHtml) { + // 没有内容，可继续执行下面的图片粘贴 + resetTime(); + return; + } + try { + // firefox 中，获取的 pasteHtml 可能是没有
        包裹的
      • + // 因此执行 insertHTML 会报错 + if (pasteTextHandle && isFunction(pasteTextHandle)) { + // 用户自定义过滤处理粘贴内容 + pasteHtml = '' + (pasteTextHandle(pasteHtml) || ''); + } + editor.cmd.do('insertHTML', pasteHtml); + } catch (ex) { + // 此时使用 pasteText 来兼容一下 + if (pasteTextHandle && isFunction(pasteTextHandle)) { + // 用户自定义过滤处理粘贴内容 + pasteText = '' + (pasteTextHandle(pasteText) || ''); + } + editor.cmd.do('insertHTML', '

        ' + pasteText + '

        '); + } + }); + + // 粘贴图片 + $textElem.on('paste', function (e) { + if (UA.isIE()) { + return; + } else { + e.preventDefault(); + } + + // 粘贴图片和文本，只能同时使用一个 + if (!canDo()) { + return; + } + + // 获取粘贴的图片 + var pasteFiles = getPasteImgs(e); + if (!pasteFiles || !pasteFiles.length) { + return; + } + + // 获取当前的元素 + var $selectionElem = editor.selection.getSelectionContainerElem(); + if (!$selectionElem) { + return; + } + var nodeName = $selectionElem.getNodeName(); + + // code 中粘贴忽略 + if (nodeName === 'CODE' || nodeName === 'PRE') { + return; + } + + // 上传图片 + var uploadImg = editor.uploadImg; + uploadImg.uploadImg(pasteFiles); + }); + }, + + // tab 特殊处理 + _tabHandle: function _tabHandle() { + var editor = this.editor; + var $textElem = editor.$textElem; + + $textElem.on('keydown', function (e) { + if (e.keyCode !== 9) { + return; + } + if (!editor.cmd.queryCommandSupported('insertHTML')) { + // 必须原生支持 insertHTML 命令 + return; + } + var $selectionElem = editor.selection.getSelectionContainerElem(); + if (!$selectionElem) { + return; + } + var $parentElem = $selectionElem.parent(); + var selectionNodeName = $selectionElem.getNodeName(); + var parentNodeName = $parentElem.getNodeName(); + + if (selectionNodeName === 'CODE' && parentNodeName === 'PRE') { + // 
         里面
+                editor.cmd.do('insertHTML', '    ');
+            } else {
+                // 普通文字
+                editor.cmd.do('insertHTML', '    ');
+            }
+
+            e.preventDefault();
+        });
+    },
+
+    // img 点击
+    _imgHandle: function _imgHandle() {
+        var editor = this.editor;
+        var $textElem = editor.$textElem;
+
+        // 为图片增加 selected 样式
+        $textElem.on('click', 'img', function (e) {
+            var img = this;
+            var $img = $(img);
+
+            if ($img.attr('data-w-e') === '1') {
+                // 是表情图片，忽略
+                return;
+            }
+
+            // 记录当前点击过的图片
+            editor._selectedImg = $img;
+
+            // 修改选区并 restore ，防止用户此时点击退格键，会删除其他内容
+            editor.selection.createRangeByElem($img);
+            editor.selection.restoreSelection();
+        });
+
+        // 去掉图片的 selected 样式
+        $textElem.on('click  keyup', function (e) {
+            if (e.target.matches('img')) {
+                // 点击的是图片，忽略
+                return;
+            }
+            // 删除记录
+            editor._selectedImg = null;
+        });
+    },
+
+    // 拖拽事件
+    _dragHandle: function _dragHandle() {
+        var editor = this.editor;
+
+        // 禁用 document 拖拽事件
+        var $document = $(document);
+        $document.on('dragleave drop dragenter dragover', function (e) {
+            e.preventDefault();
+        });
+
+        // 添加编辑区域拖拽事件
+        var $textElem = editor.$textElem;
+        $textElem.on('drop', function (e) {
+            e.preventDefault();
+            var files = e.dataTransfer && e.dataTransfer.files;
+            if (!files || !files.length) {
+                return;
+            }
+
+            // 上传图片
+            var uploadImg = editor.uploadImg;
+            uploadImg.uploadImg(files);
+        });
+    }
+};
+
+/*
+    命令，封装 document.execCommand
+*/
+
+// 构造函数
+function Command(editor) {
+    this.editor = editor;
+}
+
+// 修改原型
+Command.prototype = {
+    constructor: Command,
+
+    // 执行命令
+    do: function _do(name, value) {
+        var editor = this.editor;
+
+        // 使用 styleWithCSS
+        if (!editor._useStyleWithCSS) {
+            document.execCommand('styleWithCSS', null, true);
+            editor._useStyleWithCSS = true;
+        }
+
+        // 如果无选区，忽略
+        if (!editor.selection.getRange()) {
+            return;
+        }
+
+        // 恢复选取
+        editor.selection.restoreSelection();
+
+        // 执行
+        var _name = '_' + name;
+        if (this[_name]) {
+            // 有自定义事件
+            this[_name](value);
+        } else {
+            // 默认 command
+            this._execCommand(name, value);
+        }
+
+        // 修改菜单状态
+        editor.menus.changeActive();
+
+        // 最后，恢复选取保证光标在原来的位置闪烁
+        editor.selection.saveRange();
+        editor.selection.restoreSelection();
+
+        // 触发 onchange
+        editor.change && editor.change();
+    },
+
+    // 自定义 insertHTML 事件
+    _insertHTML: function _insertHTML(html) {
+        var editor = this.editor;
+        var range = editor.selection.getRange();
+
+        if (this.queryCommandSupported('insertHTML')) {
+            // W3C
+            this._execCommand('insertHTML', html);
+        } else if (range.insertNode) {
+            // IE
+            range.deleteContents();
+            range.insertNode($(html)[0]);
+        } else if (range.pasteHTML) {
+            // IE <= 10
+            range.pasteHTML(html);
+        }
+    },
+
+    // 插入 elem
+    _insertElem: function _insertElem($elem) {
+        var editor = this.editor;
+        var range = editor.selection.getRange();
+
+        if (range.insertNode) {
+            range.deleteContents();
+            range.insertNode($elem[0]);
+        }
+    },
+
+    // 封装 execCommand
+    _execCommand: function _execCommand(name, value) {
+        document.execCommand(name, false, value);
+    },
+
+    // 封装 document.queryCommandValue
+    queryCommandValue: function queryCommandValue(name) {
+        return document.queryCommandValue(name);
+    },
+
+    // 封装 document.queryCommandState
+    queryCommandState: function queryCommandState(name) {
+        return document.queryCommandState(name);
+    },
+
+    // 封装 document.queryCommandSupported
+    queryCommandSupported: function queryCommandSupported(name) {
+        return document.queryCommandSupported(name);
+    }
+};
+
+/*
+    selection range API
+*/
+
+// 构造函数
+function API(editor) {
+    this.editor = editor;
+    this._currentRange = null;
+}
+
+// 修改原型
+API.prototype = {
+    constructor: API,
+
+    // 获取 range 对象
+    getRange: function getRange() {
+        return this._currentRange;
+    },
+
+    // 保存选区
+    saveRange: function saveRange(_range) {
+        if (_range) {
+            // 保存已有选区
+            this._currentRange = _range;
+            return;
+        }
+
+        // 获取当前的选区
+        var selection = window.getSelection();
+        if (selection.rangeCount === 0) {
+            return;
+        }
+        var range = selection.getRangeAt(0);
+
+        // 判断选区内容是否在编辑内容之内
+        var $containerElem = this.getSelectionContainerElem(range);
+        if (!$containerElem) {
+            return;
+        }
+        var editor = this.editor;
+        var $textElem = editor.$textElem;
+        if ($textElem.isContain($containerElem)) {
+            // 是编辑内容之内的
+            this._currentRange = range;
+        }
+    },
+
+    // 折叠选区
+    collapseRange: function collapseRange(toStart) {
+        if (toStart == null) {
+            // 默认为 false
+            toStart = false;
+        }
+        var range = this._currentRange;
+        if (range) {
+            range.collapse(toStart);
+        }
+    },
+
+    // 选中区域的文字
+    getSelectionText: function getSelectionText() {
+        var range = this._currentRange;
+        if (range) {
+            return this._currentRange.toString();
+        } else {
+            return '';
+        }
+    },
+
+    // 选区的 $Elem
+    getSelectionContainerElem: function getSelectionContainerElem(range) {
+        range = range || this._currentRange;
+        var elem = void 0;
+        if (range) {
+            elem = range.commonAncestorContainer;
+            return $(elem.nodeType === 1 ? elem : elem.parentNode);
+        }
+    },
+    getSelectionStartElem: function getSelectionStartElem(range) {
+        range = range || this._currentRange;
+        var elem = void 0;
+        if (range) {
+            elem = range.startContainer;
+            return $(elem.nodeType === 1 ? elem : elem.parentNode);
+        }
+    },
+    getSelectionEndElem: function getSelectionEndElem(range) {
+        range = range || this._currentRange;
+        var elem = void 0;
+        if (range) {
+            elem = range.endContainer;
+            return $(elem.nodeType === 1 ? elem : elem.parentNode);
+        }
+    },
+
+    // 选区是否为空
+    isSelectionEmpty: function isSelectionEmpty() {
+        var range = this._currentRange;
+        if (range && range.startContainer) {
+            if (range.startContainer === range.endContainer) {
+                if (range.startOffset === range.endOffset) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    },
+
+    // 恢复选区
+    restoreSelection: function restoreSelection() {
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(this._currentRange);
+    },
+
+    // 创建一个空白（即 ​ 字符）选区
+    createEmptyRange: function createEmptyRange() {
+        var editor = this.editor;
+        var range = this.getRange();
+        var $elem = void 0;
+
+        if (!range) {
+            // 当前无 range
+            return;
+        }
+        if (!this.isSelectionEmpty()) {
+            // 当前选区必须没有内容才可以
+            return;
+        }
+
+        try {
+            // 目前只支持 webkit 内核
+            if (UA.isWebkit()) {
+                // 插入 ​
+                editor.cmd.do('insertHTML', '​');
+                // 修改 offset 位置
+                range.setEnd(range.endContainer, range.endOffset + 1);
+                // 存储
+                this.saveRange(range);
+            } else {
+                $elem = $('​');
+                editor.cmd.do('insertElem', $elem);
+                this.createRangeByElem($elem, true);
+            }
+        } catch (ex) {
+            // 部分情况下会报错，兼容一下
+        }
+    },
+
+    // 根据 $Elem 设置选区
+    createRangeByElem: function createRangeByElem($elem, toStart, isContent) {
+        // $elem - 经过封装的 elem
+        // toStart - true 开始位置，false 结束位置
+        // isContent - 是否选中Elem的内容
+        if (!$elem.length) {
+            return;
+        }
+
+        var elem = $elem[0];
+        var range = document.createRange();
+
+        if (isContent) {
+            range.selectNodeContents(elem);
+        } else {
+            range.selectNode(elem);
+        }
+
+        if (typeof toStart === 'boolean') {
+            range.collapse(toStart);
+        }
+
+        // 存储 range
+        this.saveRange(range);
+    }
+};
+
+/*
+    上传进度条
+*/
+
+function Progress(editor) {
+    this.editor = editor;
+    this._time = 0;
+    this._isShow = false;
+    this._isRender = false;
+    this._timeoutId = 0;
+    this.$textContainer = editor.$textContainerElem;
+    this.$bar = $('
        ');
+}
+
+Progress.prototype = {
+    constructor: Progress,
+
+    show: function show(progress) {
+        var _this = this;
+
+        // 状态处理
+        if (this._isShow) {
+            return;
+        }
+        this._isShow = true;
+
+        // 渲染
+        var $bar = this.$bar;
+        if (!this._isRender) {
+            var $textContainer = this.$textContainer;
+            $textContainer.append($bar);
+        } else {
+            this._isRender = true;
+        }
+
+        // 改变进度（节流，100ms 渲染一次）
+        if (Date.now() - this._time > 100) {
+            if (progress <= 1) {
+                $bar.css('width', progress * 100 + '%');
+                this._time = Date.now();
+            }
+        }
+
+        // 隐藏
+        var timeoutId = this._timeoutId;
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(function () {
+            _this._hide();
+        }, 500);
+    },
+
+    _hide: function _hide() {
+        var $bar = this.$bar;
+        $bar.remove();
+
+        // 修改状态
+        this._time = 0;
+        this._isShow = false;
+        this._isRender = false;
+    }
+};
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
+/*
+    上传图片
+*/
+
+// 构造函数
+function UploadImg(editor) {
+    this.editor = editor;
+}
+
+// 原型
+UploadImg.prototype = {
+    constructor: UploadImg,
+
+    // 根据 debug 弹出不同的信息
+    _alert: function _alert(alertInfo, debugInfo) {
+        var editor = this.editor;
+        var debug = editor.config.debug;
+        var customAlert = editor.config.customAlert;
+
+        if (debug) {
+            throw new Error('wangEditor: ' + (debugInfo || alertInfo));
+        } else {
+            if (customAlert && typeof customAlert === 'function') {
+                customAlert(alertInfo);
+            } else {
+                alert(alertInfo);
+            }
+        }
+    },
+
+    // 根据链接插入图片
+    insertLinkImg: function insertLinkImg(link) {
+        var _this2 = this;
+
+        if (!link) {
+            return;
+        }
+        var editor = this.editor;
+        var config = editor.config;
+
+        // 校验格式
+        var linkImgCheck = config.linkImgCheck;
+        var checkResult = void 0;
+        if (linkImgCheck && typeof linkImgCheck === 'function') {
+            checkResult = linkImgCheck(link);
+            if (typeof checkResult === 'string') {
+                // 校验失败，提示信息
+                alert(checkResult);
+                return;
+            }
+        }
+
+        editor.cmd.do('insertHTML', '');
+
+        // 验证图片 url 是否有效，无效的话给出提示
+        var img = document.createElement('img');
+        img.onload = function () {
+            var callback = config.linkImgCallback;
+            if (callback && typeof callback === 'function') {
+                callback(link);
+            }
+
+            img = null;
+        };
+        img.onerror = function () {
+            img = null;
+            // 无法成功下载图片
+            _this2._alert('插入图片错误', 'wangEditor: \u63D2\u5165\u56FE\u7247\u51FA\u9519\uFF0C\u56FE\u7247\u94FE\u63A5\u662F "' + link + '"\uFF0C\u4E0B\u8F7D\u8BE5\u94FE\u63A5\u5931\u8D25');
+            return;
+        };
+        img.onabort = function () {
+            img = null;
+        };
+        img.src = link;
+    },
+
+    // 上传图片
+    uploadImg: function uploadImg(files) {
+        var _this3 = this;
+
+        if (!files || !files.length) {
+            return;
+        }
+
+        // ------------------------------ 获取配置信息 ------------------------------
+        var editor = this.editor;
+        var config = editor.config;
+        var uploadImgServer = config.uploadImgServer;
+        var uploadImgShowBase64 = config.uploadImgShowBase64;
+
+        var maxSize = config.uploadImgMaxSize;
+        var maxSizeM = maxSize / 1024 / 1024;
+        var maxLength = config.uploadImgMaxLength || 10000;
+        var uploadFileName = config.uploadFileName || '';
+        var uploadImgParams = config.uploadImgParams || {};
+        var uploadImgParamsWithUrl = config.uploadImgParamsWithUrl;
+        var uploadImgHeaders = config.uploadImgHeaders || {};
+        var hooks = config.uploadImgHooks || {};
+        var timeout = config.uploadImgTimeout || 3000;
+        var withCredentials = config.withCredentials;
+        if (withCredentials == null) {
+            withCredentials = false;
+        }
+        var customUploadImg = config.customUploadImg;
+
+        if (!customUploadImg) {
+            // 没有 customUploadImg 的情况下，需要如下两个配置才能继续进行图片上传
+            if (!uploadImgServer && !uploadImgShowBase64) {
+                return;
+            }
+        }
+
+        // ------------------------------ 验证文件信息 ------------------------------
+        var resultFiles = [];
+        var errInfo = [];
+        arrForEach(files, function (file) {
+            var name = file.name;
+            var size = file.size;
+
+            // chrome 低版本 name === undefined
+            if (!name || !size) {
+                return;
+            }
+
+            if (/\.(jpg|jpeg|png|bmp|gif)$/i.test(name) === false) {
+                // 后缀名不合法，不是图片
+                errInfo.push('\u3010' + name + '\u3011\u4E0D\u662F\u56FE\u7247');
+                return;
+            }
+            if (maxSize < size) {
+                // 上传图片过大
+                errInfo.push('\u3010' + name + '\u3011\u5927\u4E8E ' + maxSizeM + 'M');
+                return;
+            }
+
+            // 验证通过的加入结果列表
+            resultFiles.push(file);
+        });
+        // 抛出验证信息
+        if (errInfo.length) {
+            this._alert('图片验证未通过: \n' + errInfo.join('\n'));
+            return;
+        }
+        if (resultFiles.length > maxLength) {
+            this._alert('一次最多上传' + maxLength + '张图片');
+            return;
+        }
+
+        // ------------------------------ 自定义上传 ------------------------------
+        if (customUploadImg && typeof customUploadImg === 'function') {
+            customUploadImg(resultFiles, this.insertLinkImg.bind(this));
+
+            // 阻止以下代码执行
+            return;
+        }
+
+        // 添加图片数据
+        var formdata = new FormData();
+        arrForEach(resultFiles, function (file) {
+            var name = uploadFileName || file.name;
+            formdata.append(name, file);
+        });
+
+        // ------------------------------ 上传图片 ------------------------------
+        if (uploadImgServer && typeof uploadImgServer === 'string') {
+            // 添加参数
+            var uploadImgServerArr = uploadImgServer.split('#');
+            uploadImgServer = uploadImgServerArr[0];
+            var uploadImgServerHash = uploadImgServerArr[1] || '';
+            objForEach(uploadImgParams, function (key, val) {
+                val = encodeURIComponent(val);
+
+                // 第一，将参数拼接到 url 中
+                if (uploadImgParamsWithUrl) {
+                    if (uploadImgServer.indexOf('?') > 0) {
+                        uploadImgServer += '&';
+                    } else {
+                        uploadImgServer += '?';
+                    }
+                    uploadImgServer = uploadImgServer + key + '=' + val;
+                }
+
+                // 第二，将参数添加到 formdata 中
+                formdata.append(key, val);
+            });
+            if (uploadImgServerHash) {
+                uploadImgServer += '#' + uploadImgServerHash;
+            }
+
+            // 定义 xhr
+            var xhr = new XMLHttpRequest();
+            xhr.open('POST', uploadImgServer);
+
+            // 设置超时
+            xhr.timeout = timeout;
+            xhr.ontimeout = function () {
+                // hook - timeout
+                if (hooks.timeout && typeof hooks.timeout === 'function') {
+                    hooks.timeout(xhr, editor);
+                }
+
+                _this3._alert('上传图片超时');
+            };
+
+            // 监控 progress
+            if (xhr.upload) {
+                xhr.upload.onprogress = function (e) {
+                    var percent = void 0;
+                    // 进度条
+                    var progressBar = new Progress(editor);
+                    if (e.lengthComputable) {
+                        percent = e.loaded / e.total;
+                        progressBar.show(percent);
+                    }
+                };
+            }
+
+            // 返回数据
+            xhr.onreadystatechange = function () {
+                var result = void 0;
+                if (xhr.readyState === 4) {
+                    if (xhr.status < 200 || xhr.status >= 300) {
+                        // hook - error
+                        if (hooks.error && typeof hooks.error === 'function') {
+                            hooks.error(xhr, editor);
+                        }
+
+                        // xhr 返回状态错误
+                        _this3._alert('上传图片发生错误', '\u4E0A\u4F20\u56FE\u7247\u53D1\u751F\u9519\u8BEF\uFF0C\u670D\u52A1\u5668\u8FD4\u56DE\u72B6\u6001\u662F ' + xhr.status);
+                        return;
+                    }
+
+                    result = xhr.responseText;
+                    if ((typeof result === 'undefined' ? 'undefined' : _typeof(result)) !== 'object') {
+                        try {
+                            result = JSON.parse(result);
+                        } catch (ex) {
+                            // hook - fail
+                            if (hooks.fail && typeof hooks.fail === 'function') {
+                                hooks.fail(xhr, editor, result);
+                            }
+
+                            _this3._alert('上传图片失败', '上传图片返回结果错误，返回结果是: ' + result);
+                            return;
+                        }
+                    }
+                    if (!hooks.customInsert && result.errno != '0') {
+                        // hook - fail
+                        if (hooks.fail && typeof hooks.fail === 'function') {
+                            hooks.fail(xhr, editor, result);
+                        }
+
+                        // 数据错误
+                        _this3._alert('上传图片失败', '上传图片返回结果错误，返回结果 errno=' + result.errno);
+                    } else {
+                        if (hooks.customInsert && typeof hooks.customInsert === 'function') {
+                            // 使用者自定义插入方法
+                            hooks.customInsert(_this3.insertLinkImg.bind(_this3), result, editor);
+                        } else {
+                            // 将图片插入编辑器
+                            var data = result.data || [];
+                            data.forEach(function (link) {
+                                _this3.insertLinkImg(link);
+                            });
+                        }
+
+                        // hook - success
+                        if (hooks.success && typeof hooks.success === 'function') {
+                            hooks.success(xhr, editor, result);
+                        }
+                    }
+                }
+            };
+
+            // hook - before
+            if (hooks.before && typeof hooks.before === 'function') {
+                var beforeResult = hooks.before(xhr, editor, resultFiles);
+                if (beforeResult && (typeof beforeResult === 'undefined' ? 'undefined' : _typeof(beforeResult)) === 'object') {
+                    if (beforeResult.prevent) {
+                        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
+                        this._alert(beforeResult.msg);
+                        return;
+                    }
+                }
+            }
+
+            // 自定义 headers
+            objForEach(uploadImgHeaders, function (key, val) {
+                xhr.setRequestHeader(key, val);
+            });
+
+            // 跨域传 cookie
+            xhr.withCredentials = withCredentials;
+
+            // 发送请求
+            xhr.send(formdata);
+
+            // 注意，要 return 。不去操作接下来的 base64 显示方式
+            return;
+        }
+
+        // ------------------------------ 显示 base64 格式 ------------------------------
+        if (uploadImgShowBase64) {
+            arrForEach(files, function (file) {
+                var _this = _this3;
+                var reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = function () {
+                    _this.insertLinkImg(this.result);
+                };
+            });
+        }
+    }
+};
+
+/*
+    编辑器构造函数
+*/
+
+// id，累加
+var editorId = 1;
+
+// 构造函数
+function Editor(toolbarSelector, textSelector) {
+    if (toolbarSelector == null) {
+        // 没有传入任何参数，报错
+        throw new Error('错误：初始化编辑器时候未传入任何参数，请查阅文档');
+    }
+    // id，用以区分单个页面不同的编辑器对象
+    this.id = 'wangEditor-' + editorId++;
+
+    this.toolbarSelector = toolbarSelector;
+    this.textSelector = textSelector;
+
+    // 自定义配置
+    this.customConfig = {};
+}
+
+// 修改原型
+Editor.prototype = {
+    constructor: Editor,
+
+    // 初始化配置
+    _initConfig: function _initConfig() {
+        // _config 是默认配置，this.customConfig 是用户自定义配置，将它们 merge 之后再赋值
+        var target = {};
+        this.config = Object.assign(target, config, this.customConfig);
+
+        // 将语言配置，生成正则表达式
+        var langConfig = this.config.lang || {};
+        var langArgs = [];
+        objForEach(langConfig, function (key, val) {
+            // key 即需要生成正则表达式的规则，如“插入链接”
+            // val 即需要被替换成的语言，如“insert link”
+            langArgs.push({
+                reg: new RegExp(key, 'img'),
+                val: val
+
+            });
+        });
+        this.config.langArgs = langArgs;
+    },
+
+    // 初始化 DOM
+    _initDom: function _initDom() {
+        var _this = this;
+
+        var toolbarSelector = this.toolbarSelector;
+        var $toolbarSelector = $(toolbarSelector);
+        var textSelector = this.textSelector;
+
+        var config$$1 = this.config;
+        var zIndex = config$$1.zIndex;
+
+        // 定义变量
+        var $toolbarElem = void 0,
+            $textContainerElem = void 0,
+            $textElem = void 0,
+            $children = void 0;
+
+        if (textSelector == null) {
+            // 只传入一个参数，即是容器的选择器或元素，toolbar 和 text 的元素自行创建
+            $toolbarElem = $('
        ');
+            $textContainerElem = $('
        ');
+
+            // 将编辑器区域原有的内容，暂存起来
+            $children = $toolbarSelector.children();
+
+            // 添加到 DOM 结构中
+            $toolbarSelector.append($toolbarElem).append($textContainerElem);
+
+            // 自行创建的，需要配置默认的样式
+            $toolbarElem.css('background-color', '#f1f1f1').css('border', '1px solid #ccc');
+            $textContainerElem.css('border', '1px solid #ccc').css('border-top', 'none').css('height', '300px');
+        } else {
+            // toolbar 和 text 的选择器都有值，记录属性
+            $toolbarElem = $toolbarSelector;
+            $textContainerElem = $(textSelector);
+            // 将编辑器区域原有的内容，暂存起来
+            $children = $textContainerElem.children();
+        }
+
+        // 编辑区域
+        $textElem = $('
        ');
+        $textElem.attr('contenteditable', 'true').css('width', '100%').css('height', '100%');
+
+        // 初始化编辑区域内容
+        if ($children && $children.length) {
+            $textElem.append($children);
+        } else {
+            $textElem.append($('

        '));
+        }
+
+        // 编辑区域加入DOM
+        $textContainerElem.append($textElem);
+
+        // 设置通用的 class
+        $toolbarElem.addClass('w-e-toolbar');
+        $textContainerElem.addClass('w-e-text-container');
+        $textContainerElem.css('z-index', zIndex);
+        $textElem.addClass('w-e-text');
+
+        // 添加 ID
+        var toolbarElemId = getRandom('toolbar-elem');
+        $toolbarElem.attr('id', toolbarElemId);
+        var textElemId = getRandom('text-elem');
+        $textElem.attr('id', textElemId);
+
+        // 记录属性
+        this.$toolbarElem = $toolbarElem;
+        this.$textContainerElem = $textContainerElem;
+        this.$textElem = $textElem;
+        this.toolbarElemId = toolbarElemId;
+        this.textElemId = textElemId;
+
+        // 记录输入法的开始和结束
+        var compositionEnd = true;
+        $textContainerElem.on('compositionstart', function () {
+            // 输入法开始输入
+            compositionEnd = false;
+        });
+        $textContainerElem.on('compositionend', function () {
+            // 输入法结束输入
+            compositionEnd = true;
+        });
+
+        // 绑定 onchange
+        $textContainerElem.on('click keyup', function () {
+            // 输入法结束才出发 onchange
+            compositionEnd && _this.change && _this.change();
+        });
+        $toolbarElem.on('click', function () {
+            this.change && this.change();
+        });
+
+        //绑定 onfocus 与 onblur 事件
+        if (config$$1.onfocus || config$$1.onblur) {
+            // 当前编辑器是否是焦点状态
+            this.isFocus = false;
+
+            $(document).on('click', function (e) {
+                //判断当前点击元素是否在编辑器内
+                var isChild = $textElem.isContain($(e.target));
+
+                //判断当前点击元素是否为工具栏
+                var isToolbar = $toolbarElem.isContain($(e.target));
+                var isMenu = $toolbarElem[0] == e.target ? true : false;
+
+                if (!isChild) {
+                    //若为选择工具栏中的功能，则不视为成blur操作
+                    if (isToolbar && !isMenu) {
+                        return;
+                    }
+
+                    if (_this.isFocus) {
+                        _this.onblur && _this.onblur();
+                    }
+                    _this.isFocus = false;
+                } else {
+                    if (!_this.isFocus) {
+                        _this.onfocus && _this.onfocus();
+                    }
+                    _this.isFocus = true;
+                }
+            });
+        }
+    },
+
+    // 封装 command
+    _initCommand: function _initCommand() {
+        this.cmd = new Command(this);
+    },
+
+    // 封装 selection range API
+    _initSelectionAPI: function _initSelectionAPI() {
+        this.selection = new API(this);
+    },
+
+    // 添加图片上传
+    _initUploadImg: function _initUploadImg() {
+        this.uploadImg = new UploadImg(this);
+    },
+
+    // 初始化菜单
+    _initMenus: function _initMenus() {
+        this.menus = new Menus(this);
+        this.menus.init();
+    },
+
+    // 添加 text 区域
+    _initText: function _initText() {
+        this.txt = new Text(this);
+        this.txt.init();
+    },
+
+    // 初始化选区，将光标定位到内容尾部
+    initSelection: function initSelection(newLine) {
+        var $textElem = this.$textElem;
+        var $children = $textElem.children();
+        if (!$children.length) {
+            // 如果编辑器区域无内容，添加一个空行，重新设置选区
+            $textElem.append($('

        '));
+            this.initSelection();
+            return;
+        }
+
+        var $last = $children.last();
+
+        if (newLine) {
+            // 新增一个空行
+            var html = $last.html().toLowerCase();
+            var nodeName = $last.getNodeName();
+            if (html !== '
        ' && html !== '' || nodeName !== 'P') {
+                // 最后一个元素不是 

        ，添加一个空行，重新设置选区
+                $textElem.append($('

        '));
+                this.initSelection();
+                return;
+            }
+        }
+
+        this.selection.createRangeByElem($last, false, true);
+        this.selection.restoreSelection();
+    },
+
+    // 绑定事件
+    _bindEvent: function _bindEvent() {
+        // -------- 绑定 onchange 事件 --------
+        var onChangeTimeoutId = 0;
+        var beforeChangeHtml = this.txt.html();
+        var config$$1 = this.config;
+
+        // onchange 触发延迟时间
+        var onchangeTimeout = config$$1.onchangeTimeout;
+        onchangeTimeout = parseInt(onchangeTimeout, 10);
+        if (!onchangeTimeout || onchangeTimeout <= 0) {
+            onchangeTimeout = 200;
+        }
+
+        var onchange = config$$1.onchange;
+        if (onchange && typeof onchange === 'function') {
+            // 触发 change 的有三个场景：
+            // 1. $textContainerElem.on('click keyup')
+            // 2. $toolbarElem.on('click')
+            // 3. editor.cmd.do()
+            this.change = function () {
+                // 判断是否有变化
+                var currentHtml = this.txt.html();
+
+                if (currentHtml.length === beforeChangeHtml.length) {
+                    // 需要比较每一个字符
+                    if (currentHtml === beforeChangeHtml) {
+                        return;
+                    }
+                }
+
+                // 执行，使用节流
+                if (onChangeTimeoutId) {
+                    clearTimeout(onChangeTimeoutId);
+                }
+                onChangeTimeoutId = setTimeout(function () {
+                    // 触发配置的 onchange 函数
+                    onchange(currentHtml);
+                    beforeChangeHtml = currentHtml;
+                }, onchangeTimeout);
+            };
+        }
+
+        // -------- 绑定 onblur 事件 --------
+        var onblur = config$$1.onblur;
+        if (onblur && typeof onblur === 'function') {
+            this.onblur = function () {
+                var currentHtml = this.txt.html();
+                onblur(currentHtml);
+            };
+        }
+
+        // -------- 绑定 onfocus 事件 --------
+        var onfocus = config$$1.onfocus;
+        if (onfocus && typeof onfocus === 'function') {
+            this.onfocus = function () {
+                onfocus();
+            };
+        }
+    },
+
+    // 创建编辑器
+    create: function create() {
+        // 初始化配置信息
+        this._initConfig();
+
+        // 初始化 DOM
+        this._initDom();
+
+        // 封装 command API
+        this._initCommand();
+
+        // 封装 selection range API
+        this._initSelectionAPI();
+
+        // 添加 text
+        this._initText();
+
+        // 初始化菜单
+        this._initMenus();
+
+        // 添加 图片上传
+        this._initUploadImg();
+
+        // 初始化选区，将光标定位到内容尾部
+        this.initSelection(true);
+
+        // 绑定事件
+        this._bindEvent();
+    },
+
+    // 解绑所有事件（暂时不对外开放）
+    _offAllEvent: function _offAllEvent() {
+        $.offAll();
+    }
+};
+
+// 检验是否浏览器环境
+try {
+    document;
+} catch (ex) {
+    throw new Error('请在浏览器环境下运行');
+}
+
+// polyfill
+polyfill();
+
+// 这里的 `inlinecss` 将被替换成 css 代码的内容，详情可去 ./gulpfile.js 中搜索 `inlinecss` 关键字
+var inlinecss = '.w-e-toolbar,.w-e-text-container,.w-e-menu-panel {  padding: 0;  margin: 0;  box-sizing: border-box;}.w-e-toolbar *,.w-e-text-container *,.w-e-menu-panel * {  padding: 0;  margin: 0;  box-sizing: border-box;}.w-e-clear-fix:after {  content: "";  display: table;  clear: both;}.w-e-toolbar .w-e-droplist {  position: absolute;  left: 0;  top: 0;  background-color: #fff;  border: 1px solid #f1f1f1;  border-right-color: #ccc;  border-bottom-color: #ccc;}.w-e-toolbar .w-e-droplist .w-e-dp-title {  text-align: center;  color: #999;  line-height: 2;  border-bottom: 1px solid #f1f1f1;  font-size: 13px;}.w-e-toolbar .w-e-droplist ul.w-e-list {  list-style: none;  line-height: 1;}.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item {  color: #333;  padding: 5px 0;}.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover {  background-color: #f1f1f1;}.w-e-toolbar .w-e-droplist ul.w-e-block {  list-style: none;  text-align: left;  padding: 5px;}.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item {  display: inline-block;  *display: inline;  *zoom: 1;  padding: 3px 5px;}.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover {  background-color: #f1f1f1;}@font-face {  font-family: \'w-e-icon\';  src: url(data:application/x-font-woff;charset=utf-8;base64,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) format(\'truetype\');  font-weight: normal;  font-style: normal;}[class^="w-e-icon-"],[class*=" w-e-icon-"] {  /* use !important to prevent issues with browser extensions that change fonts */  font-family: \'w-e-icon\' !important;  speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  line-height: 1;  /* Better Font Rendering =========== */  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.w-e-icon-close:before {  content: "\\f00d";}.w-e-icon-upload2:before {  content: "\\e9c6";}.w-e-icon-trash-o:before {  content: "\\f014";}.w-e-icon-header:before {  content: "\\f1dc";}.w-e-icon-pencil2:before {  content: "\\e906";}.w-e-icon-paint-brush:before {  content: "\\f1fc";}.w-e-icon-image:before {  content: "\\e90d";}.w-e-icon-play:before {  content: "\\e912";}.w-e-icon-location:before {  content: "\\e947";}.w-e-icon-undo:before {  content: "\\e965";}.w-e-icon-redo:before {  content: "\\e966";}.w-e-icon-quotes-left:before {  content: "\\e977";}.w-e-icon-list-numbered:before {  content: "\\e9b9";}.w-e-icon-list2:before {  content: "\\e9bb";}.w-e-icon-link:before {  content: "\\e9cb";}.w-e-icon-happy:before {  content: "\\e9df";}.w-e-icon-bold:before {  content: "\\ea62";}.w-e-icon-underline:before {  content: "\\ea63";}.w-e-icon-italic:before {  content: "\\ea64";}.w-e-icon-strikethrough:before {  content: "\\ea65";}.w-e-icon-table2:before {  content: "\\ea71";}.w-e-icon-paragraph-left:before {  content: "\\ea77";}.w-e-icon-paragraph-center:before {  content: "\\ea78";}.w-e-icon-paragraph-right:before {  content: "\\ea79";}.w-e-icon-terminal:before {  content: "\\f120";}.w-e-icon-page-break:before {  content: "\\ea68";}.w-e-icon-cancel-circle:before {  content: "\\ea0d";}.w-e-toolbar {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  padding: 0 5px;  /* flex-wrap: wrap; */  /* 单个菜单 */}.w-e-toolbar .w-e-menu {  position: relative;  text-align: center;  padding: 5px 10px;  cursor: pointer;}.w-e-toolbar .w-e-menu i {  color: #999;}.w-e-toolbar .w-e-menu:hover i {  color: #333;}.w-e-toolbar .w-e-active i {  color: #1e88e5;}.w-e-toolbar .w-e-active:hover i {  color: #1e88e5;}.w-e-text-container .w-e-panel-container {  position: absolute;  top: 0;  left: 50%;  border: 1px solid #ccc;  border-top: 0;  box-shadow: 1px 1px 2px #ccc;  color: #333;  background-color: #fff;  /* 为 emotion panel 定制的样式 */  /* 上传图片的 panel 定制样式 */}.w-e-text-container .w-e-panel-container .w-e-panel-close {  position: absolute;  right: 0;  top: 0;  padding: 5px;  margin: 2px 5px 0 0;  cursor: pointer;  color: #999;}.w-e-text-container .w-e-panel-container .w-e-panel-close:hover {  color: #333;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-title {  list-style: none;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  font-size: 14px;  margin: 2px 10px 0 10px;  border-bottom: 1px solid #f1f1f1;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-item {  padding: 3px 5px;  color: #999;  cursor: pointer;  margin: 0 3px;  position: relative;  top: 1px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-active {  color: #333;  border-bottom: 1px solid #333;  cursor: default;  font-weight: 700;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content {  padding: 10px 15px 10px 15px;  font-size: 16px;  /* 输入框的样式 */  /* 按钮的样式 */}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input:focus,.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus,.w-e-text-container .w-e-panel-container .w-e-panel-tab-content button:focus {  outline: none;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea {  width: 100%;  border: 1px solid #ccc;  padding: 5px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus {  border-color: #1e88e5;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text] {  border: none;  border-bottom: 1px solid #ccc;  font-size: 14px;  height: 20px;  color: #333;  text-align: left;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].small {  width: 30px;  text-align: center;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].block {  display: block;  width: 100%;  margin: 10px 0;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus {  border-bottom: 2px solid #1e88e5;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button {  font-size: 14px;  color: #1e88e5;  border: none;  padding: 5px 10px;  background-color: #fff;  cursor: pointer;  border-radius: 3px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left {  float: left;  margin-right: 10px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right {  float: right;  margin-left: 10px;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray {  color: #999;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red {  color: #c24f4a;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover {  background-color: #f1f1f1;}.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after {  content: "";  display: table;  clear: both;}.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item {  cursor: pointer;  font-size: 18px;  padding: 0 3px;  display: inline-block;  *display: inline;  *zoom: 1;}.w-e-text-container .w-e-panel-container .w-e-up-img-container {  text-align: center;}.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn {  display: inline-block;  *display: inline;  *zoom: 1;  color: #999;  cursor: pointer;  font-size: 60px;  line-height: 1;}.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn:hover {  color: #333;}.w-e-text-container {  position: relative;}.w-e-text-container .w-e-progress {  position: absolute;  background-color: #1e88e5;  bottom: 0;  left: 0;  height: 1px;}.w-e-text {  padding: 0 10px;  overflow-y: scroll;}.w-e-text p,.w-e-text h1,.w-e-text h2,.w-e-text h3,.w-e-text h4,.w-e-text h5,.w-e-text table,.w-e-text pre {  margin: 10px 0;  line-height: 1.5;}.w-e-text ul,.w-e-text ol {  margin: 10px 0 10px 20px;}.w-e-text blockquote {  display: block;  border-left: 8px solid #d0e5f2;  padding: 5px 10px;  margin: 10px 0;  line-height: 1.4;  font-size: 100%;  background-color: #f1f1f1;}.w-e-text code {  display: inline-block;  *display: inline;  *zoom: 1;  background-color: #f1f1f1;  border-radius: 3px;  padding: 3px 5px;  margin: 0 3px;}.w-e-text pre code {  display: block;}.w-e-text table {  border-top: 1px solid #ccc;  border-left: 1px solid #ccc;}.w-e-text table td,.w-e-text table th {  border-bottom: 1px solid #ccc;  border-right: 1px solid #ccc;  padding: 3px 5px;}.w-e-text table th {  border-bottom: 2px solid #ccc;  text-align: center;}.w-e-text:focus {  outline: none;}.w-e-text img {  cursor: pointer;}.w-e-text img:hover {  box-shadow: 0 0 5px #333;}';
+
+// 将 css 代码添加到