因为一个人，爱上一座城。
+毕业之后，因为一个故事来到了帝都。
+博铭：三十功名尘与土，八千里路云和月
可通过如下方式联系到我
+QQ:876784235
+Email:zengzhiwei_hfut@163.com
+Github:zengzhiwei12138 +
+Gitee:zzwazj
+本站建于2018年9月，主要记录技术分享，交流，生活心得，吐槽等...
+本站所用技术
+前端：art-template html5&css3 es6 wow tagCould esc
+后端：springmvc spring mybatis dubbo esc
+数据库：mariadb
原创优先技术优先经常宕机不合法规插边球站红标报毒
+本站信息如下：
+名称：AZJ
+ +图标：https://wx3.sinaimg.cn/small/007aGNoFly1fvysv6bn70g305k05k3yy.gif
+描述：AZJ @ 二人世界
+注意：本站开放自主填写友情链接权限，如自主添加后，请自觉将本站加为友联，本站会不定时清理违规友联
+ 网名：AZJ
+职业：Java后端攻城狮
+籍贯：河南-信阳
+邮箱：876784235@qq.com
三十功名尘与土,八千里路云和月
我也是有底线的!
"; + +let pageNum = 1; +let articleRender = template.compile(article); +let exist = false; + +//定义分类，标签，搜索 +let is_classify_id = 0; +let is_search_keywords = ""; +let is_label_id = ""; + +$(function () { + getPageArticle(pageNum); + let classifyRender = template.compile(classify); + $.ajax({ + url: '/classify/getClassify.action', + type: 'POST', + success: function (res) { + let classifyData = { + classifyList: res.data + }; + let classifyHtml = classifyRender(classifyData); + $('#classify').html(classifyHtml); + //分类的点击事件 + $('#classify>li').each(function () { + $(this).click(function () { + let classifyId = $(this).attr('name'); + + getArticleByClassify(classifyId); + }); + }); + } + }); + + let hotArticleRender = template.compile(hot_article); + $.ajax({ + url: '/article/hotArticle.action', + type: 'POST', + success: function (res) { + let hotArticleData = { + hotArticleList: res.data + }; + let hotArticleHtml = hotArticleRender(hotArticleData); + $('#hot_article').html(hotArticleHtml); + } + }); + + $.ajax({ + url: '/article/topArticle.action', + type: 'POST', + success: function (res) { + let topArticleData = { + hotArticleList: res.data + }; + let topArticleHtml = hotArticleRender(topArticleData); + $('#top_article').html(topArticleHtml); + } + }); + + let labelRender = template.compile(label); + $.ajax({ + url: '/label/getLabel.action', + type: 'POST', + success: function (res) { + let labelData = { + labelList: res.data + }; + let labelHtml = labelRender(labelData); + $('#tag_cloud_widget').html(labelHtml); + tagCloud(); + $('#tag_cloud_widget>span').each(function () { + $(this).click(function () { + // 清楚分类和搜索的标记 + is_classify_id = 0; + is_search_keywords = ""; + pageNum = 1; + exist = false; + // 获取labelId + let labelId = $(this).attr('name'); + is_label_id = labelId; + getPageArticle(pageNum); + $('body,html').animate({scrollTop: 0}, 300); + }); + }); + } + }); + + if (document.body.offsetWidth <= 500) { + $('.left1').click(function () { + let hot_article = $("li[name='hot_article']"); + let article_label = $("li[name='article_label']"); + let classify = $('#classifyBox'); + if ($('.left1').text() == '<') { + $('#overLay').removeAttr('hidden'); + $('.left1').text('>'); + if (article_label.hasClass('label_mobile_open')) { + article_label.removeAttr('style'); + article_label.removeClass('fadeInUp'); + article_label.addClass('fadeOutDown'); + $('.left2').text('<'); + } + if (classify.hasClass('classify_mobile_open')) { + classify.removeAttr('style'); + classify.removeClass('bounceInDown'); + classify.addClass('bounceOutDown'); + } + if (hot_article.hasClass('hot_mobile_open')) { + hot_article.removeAttr('style'); + hot_article.addClass('fadeInRight'); + hot_article.removeClass('fadeOutRight'); + } else { + hot_article.addClass('hot_mobile_open'); + hot_article.removeClass('mobile_close'); + } + } else { + hot_article.removeAttr('style'); + hot_article.removeClass('fadeInRight'); + hot_article.addClass('fadeOutRight'); + $('#overLay').attr('hidden', 'hidden'); + $('.left1').text('<'); + } + + $('#overLay').click(function () { + hot_article.removeAttr('style'); + hot_article.removeClass('fadeInRight'); + hot_article.addClass('fadeOutRight'); + $('#overLay').attr('hidden', 'hidden'); + $('.left1').text('<'); + }); + }); + + $('.left2').click(function () { + let hot_article = $("li[name='hot_article']"); + let article_label = $("li[name='article_label']"); + let classify = $('#classifyBox'); + if (hot_article.hasClass('hot_mobile_open')) { + hot_article.removeAttr('style'); + hot_article.removeClass('fadeInRight'); + hot_article.addClass('fadeOutRight'); + $('.left1').text('<'); + } + if (classify.hasClass('classify_mobile_open')) { + classify.removeAttr('style'); + classify.removeClass('bounceInDown'); + classify.addClass('bounceOutDown'); + } + if ($('.left2').text() == '<') { + $('#overLay').removeAttr('hidden'); + $('.left2').text('>'); + if (article_label.hasClass('label_mobile_open')) { + article_label.removeAttr('style'); + article_label.addClass('fadeInUp'); + article_label.removeClass('fadeOutDown'); + } else { + article_label.addClass('label_mobile_open'); + article_label.removeClass('mobile_close'); + } + } else { + article_label.removeAttr('style'); + article_label.removeClass('fadeInUp'); + article_label.addClass('fadeOutDown'); + $('#overLay').attr('hidden', 'hidden'); + $('.left2').text('<'); + } + + $('#overLay').click(function () { + article_label.removeAttr('style'); + article_label.removeClass('fadeInUp'); + article_label.addClass('fadeOutDown'); + $('#overLay').attr('hidden', 'hidden'); + $('.left2').text('<'); + }); + }); + + $('.top1').click(function () { + let hot_article = $("li[name='hot_article']"); + let article_label = $("li[name='article_label']"); + let classify = $('#classifyBox'); + if (hot_article.hasClass('hot_mobile_open')) { + hot_article.removeAttr('style'); + hot_article.removeClass('fadeInRight'); + hot_article.addClass('fadeOutRight'); + $('.left1').text('<'); + } + if (article_label.hasClass('label_mobile_open')) { + article_label.removeAttr('style'); + article_label.removeClass('fadeInUp'); + article_label.addClass('fadeOutDown'); + $('.left2').text('<'); + } + $('#overLay').removeAttr('hidden'); + if (classify.hasClass('classify_mobile_open')) { + if (classify.hasClass('bounceInDown')) { + classify.removeAttr('style'); + classify.removeClass('bounceInDown'); + classify.addClass('bounceOutDown'); + $('#overLay').attr('hidden', 'hidden'); + } else { + classify.removeAttr('style'); + classify.addClass('bounceInDown'); + classify.removeClass('bounceOutDown'); + } + } else { + classify.removeAttr('style'); + classify.removeClass('flipInY'); + classify.addClass('bounceInDown'); + classify.addClass('classify_mobile_open'); + classify.removeClass('mobile_close'); + } + $('#overLay').click(function () { + classify.removeAttr('style'); + classify.removeClass('bounceInDown'); + classify.addClass('bounceOutDown'); + $('#overLay').attr('hidden', 'hidden'); + }); + }); + } + + $('#allClassify').click(function () { + is_search_keywords = ""; + is_classify_id = 0; + is_label_id = ""; + exist = false; + pageNum = 1; + getPageArticle(pageNum); + $('body,html').animate({scrollTop: 0}, 300); + }); + + $(".searchBox>input[type='text']").click(function () { + $(document).keyup(function (event) { + if (event.keyCode == 13) { + searchArticle(); + } + }); + }); + + $('.searchBox>i').click(function () { + searchArticle(); + }); + +}); + +function searchArticle() { + is_label_id = ""; + is_classify_id = 0; + pageNum = 1; + exist = false; + is_search_keywords = $(".searchBox>input[type='text']").val(); + if (is_search_keywords == "") { + swal("请输入查询关键字！", { + button: false, + timer: 2000 + }); + } + getPageArticle(pageNum); + $('body,html').animate({scrollTop: 0}, 300); +} + +function getArticleByClassify(classifyId) { + // 清空标签和搜索的分页条件 + is_search_keywords = ""; + is_label_id = ""; + exist = false; + pageNum = 1; + is_classify_id = classifyId; + getPageArticle(pageNum); + $('body,html').animate({scrollTop: 0}, 300); +} + +//获取滚动条当前的位置 +function getScrollTop() { + let scrollTop = 0; + if (document.documentElement && document.documentElement.scrollTop) { + scrollTop = document.documentElement.scrollTop; + } else if (document.body) { + scrollTop = document.body.scrollTop; + } + return scrollTop; +} + +//获取当前可视范围的高度 +function getClientHeight() { + let clientHeight = 0; + if (document.body.clientHeight && document.documentElement.clientHeight) { + clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); + } else { + clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); + } + return clientHeight; +} + +//获取文档完整的高度 +function getScrollHeight() { + return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); +} + +//滚动事件触发 +window.onscroll = function () { + if (getScrollTop() + getClientHeight() > getScrollHeight() - 110) { + pageNum++; + getPageArticle(pageNum); + } +}; + +function getPageArticle(pageNum) { + if (!exist) { + $.ajax({ + url: '/article/getPageArticle.action', + data: { + pageNum: pageNum, + labelId: is_label_id, + classifyId: is_classify_id, + keywords: is_search_keywords + }, + type: 'POST', + success: function (res) { + if (document.body.offsetWidth <= 500){ + let hot_article = $("li[name='hot_article']"); + let article_label = $("li[name='article_label']"); + let classify = $('#classifyBox'); + if (article_label.hasClass('label_mobile_open')) { + article_label.removeAttr('style'); + article_label.removeClass('fadeInUp'); + article_label.addClass('fadeOutDown'); + $('.left2').text('<'); + } + if (classify.hasClass('classify_mobile_open')) { + classify.removeAttr('style'); + classify.removeClass('bounceInDown'); + classify.addClass('bounceOutDown'); + } + if (hot_article.hasClass('hot_mobile_open')) { + hot_article.removeAttr('style'); + hot_article.removeClass('fadeInRight'); + hot_article.addClass('fadeOutRight'); + $('.left1').text('<'); + } + $('#overLay').attr('hidden', 'hidden'); + } + if (res.data.length > 0) { + var articleData = { + articleList: res.data + }; + let articleHtml = articleRender(articleData); + if (pageNum == 1) { + $('#blog_content').html(articleHtml); + } else { + $('#blog_content').append(articleHtml); + } + $('.article_classify').each(function () { + $(this).click(function () { + let classifyId = $(this).attr('name'); + getArticleByClassify(classifyId); + }); + }); + if (res.data.length < 20){ + $('#blog_content').append(line); + exist = true; + } + } else { + if (pageNum == 1) { + $('#blog_content').html(line); + exist = true; + } else if (!exist) { + $('#blog_content').append(line); + exist = true; + } + } + } + }); + } +} diff --git a/js/base.js b/js/base.js new file mode 100644 index 0000000..55208b3 --- /dev/null +++ b/js/base.js @@ -0,0 +1,135 @@ +// 富文本编辑器表情管理 +const emoji = []; +const toot = []; +const cute = []; +const mogutou = []; + +getImg(emoji,"emoji",96); +getImg(toot,"toot",16); +getImg(cute,'cute',8); +getImg(mogutou,'mogutou',15); + +function getImg(arr,name,max) { + if (max < 10){ + for(let i = 1; i< max; i++){ + arr.push({alt:"0"+i,src:"https://www.zzwazj.online/images/emoticon/"+name+"/0"+i+".gif"}); + } + }else { + for(let i = 1; i < 10; i++){ + arr.push({alt:"0"+i,src:"https://www.zzwazj.online/images/emoticon/"+name+"/0"+i+".gif"}); + } + for (let j = 10; j <= max; j++){ + arr.push({alt:j,src:"https://www.zzwazj.online/images/emoticon/"+name+"/"+j+".gif"}); + } + } +} + +$(function () { + console.log("如果你喜欢本站模板,欢迎发邮件给876784235@qq.com,免费分享本站静态模板哦~"); + console.log("欢迎加群进行学习交流哦~"); + // 刷新回到顶部 防止wow.js的动画失效 + $('body,html').animate({scrollTop: 0},700); + // 初始化wow + new WOW().init(); + + // 鼠标点击事件 + var i = 0; + $('html').click(function (element) { + let arr = ["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"]; + let dom = $("").text(arr[i]); + i = (i+1) % arr.length; + let x = element.pageX; + let y = element.pageY; + dom.css({ + "z-index": 99999, + "top": y - 20, + "left": x, + "position": "absolute", + "font-weight": "bold", + "color": "#ff6651" + }); + $('body').append(dom); + dom.animate({ + "top": y-180, + "opacity":0 + },1500,function () { + dom.remove(); + }); + }); + // toTop事件 + $('#toTop').click(function () { + $('html,body').animate({scrollTop:0},500); + }); + + // 上一次滚轮的位置 + var last_position = 0; + // 监听滚轮事件 + $(window).scroll(function () { + let offset = 500; + let pageY = $(window).scrollTop(); + pageY > offset ? $('#toTop').removeAttr('hidden') : $('#toTop').attr('hidden','hidden'); + if (document.body.offsetWidth > 500){ + if (pageY > 1000){ + $("#classifyBox").removeAttr('style'); + $("#classifyBox").addClass('box_bounceInDown_fixed'); + }else { + $("#classifyBox").removeClass('box_bounceInDown_fixed'); + } + if (pageY>700){ + $('.about_me').removeAttr('style'); + $('.about_me').addClass('box_bounceInDown_fixed'); + }else { + $('.about_me').removeClass('box_bounceInDown_fixed'); + } + if (pageY>600){ + $('#message_search').removeAttr('hidden','hidden'); + $("#message_search").removeAttr('style'); + $("#message_search").addClass('box_bounceInUp_fixed'); + }else{ + $('#message_search').attr('hidden','hidden'); + $("#message_search").removeClass('box_bounceInUp_fixed'); + } + } + // 获取当前位置 + let position = window.scrollY; + if(position - last_position > 0) { + let menuId = $('#menu'); + let nav = $('#nav'); + if (menuId.hasClass("menu_open")) { + nav.removeClass('bounceInRight'); + nav.removeAttr('style'); + nav.addClass('bounceOutRight'); + menuId.removeClass('menu_open'); + menuId.addClass('menu_close'); + } + } + last_position = position; + }); +}); + + + +function getEditorConfig(editor) { + editor.customConfig.emotions = [ + { + title: '默认', + type: 'image', + content: emoji + }, + { + title: '蒙嘟嘟', + type: 'image', + content: toot + }, + { + title: '乖巧宝宝', + type: 'image', + content: cute + }, + { + title: '骚气蘑菇头', + type: 'image', + content: mogutou + } + ]; +} \ No newline at end of file diff --git a/js/detail.js b/js/detail.js new file mode 100644 index 0000000..a5c4267 --- /dev/null +++ b/js/detail.js @@ -0,0 +1,671 @@ +let detail = `+ {{each labelList label index}} + ${{label.labelName}} + {{/each}} +
+微信打赏
+
+ 支付宝打赏
+
+ 手机版可截图扫描相册二维码打赏
+{{comment.commentTime}}回复
+ +{{reply.replyTime}}回复
+ +{{reply.replyTime}}回复
+ +{{comment.commentTime}}回复
") != -1) {
+ pageFun.highLight();
+ }
+ $('html,body').animate({
+ scrollTop: $('#commentBox').offset().top
+ }, 200);
+ },
+ error : function () {
+ pageFun.showCommentMsg('error','评论发布失败，请联系站长！',true , true);
+ }
+ })
+ }
+ })
+});
+
+function replyClick() {
+ $('.reply').each(function () {
+ $(this).unbind('click');
+ $(this).click(function () {
+ let text = $(this).text();
+ let commentId = "";
+ let replyId = "";
+ // 判断是否是评论还是回复
+ if ($(this).parent().parent().hasClass('comment')) {
+ // 是要回复评论
+ commentId = $(this).attr('name');
+ } else {
+ commentId = $(this).parent().parent().parent().parent().attr('name');
+ replyId = $(this).attr('name');
+ }
+ let commentName = $(this).parent().prev().prev().text();
+ if (text == '回复') {
+ $(this).text('取消回复');
+ let num = $('.reply_comment').length;
+ if (num > 0) {
+ $('.reply_comment').parent().prev().find('.reply').text('回复');
+ $('.reply_comment').parent().html("");
+ }
+ $(this).parent().next().html(replyHtml);
+ reply_editor.create();
+ $('#replyName').focus(function () {
+ pageFun.showCommentMsg('success','新功能：在昵称框输入qq号可快速获取昵称，邮箱和头像!',true , false);
+ });
+ $('#replyName').blur(function () {
+ let qq = $('#replyName').val();
+ if (/^[1-9]\d{4,12}$/.test(qq)) {
+ $.ajax({
+ url: 'https://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=' + qq,
+ dataType: "jsonp",
+ jsonpCallback: "portraitCallBack",
+ scriptCharset: "gbk",
+ beforeSend: function () {
+ $('#replyName').val('');
+ $('#replyName').attr('placeholder', '获取中...')
+ },
+ success: function (res) {
+ if (res[qq] && res[qq][6]) {
+ $('#replyName').val(res[qq][6]);
+ $('#replyEmail').val(qq + '@qq.com');
+ $('#replyName').removeAttr('placeholder');
+ $('#replyHeadImage').attr('src','https://q1.qlogo.cn/g?b=qq&nk='+qq+'&s=100');
+ }else {
+ pageFun.showCommentMsg('error', 'QQ信息获取失败！', true , false);
+ $('#replyName').val(qq);
+ }
+ }
+ });
+ }
+ });
+ $('#replyHeadImage').click(function () {
+ $('.headImg').removeAttr('hidden');
+ replyOrComment = 'reply'
+ });
+ $('.reply_commit').click(function () {
+ let replyHeadImage = $('#replyHeadImage').attr('src');
+ let reply = $('#reply_text>div');
+ let replyHtml = reply.html();
+ // 验证表单内容 主要验证邮箱和评论不能为空
+ if (validateForm($('#replyName').val(), $('#replyEmail').val(), replyHtml , false)) {
+ $("input[name='replyId']").val(replyId);
+ $("#reply_form input[name='commentName']").val(commentName);
+ $("input[name='replyHeadImage']").val(replyHeadImage);
+ $("textarea[name='replyComment']").val(replyHtml);
+ $("input[name='commentId']").val(commentId);
+ $("#reply_form input[name='articleId']").val(articleId);
+ // 获取本文章的浏览量
+ let commentNum = $('.detail_info>span:last-child').text();
+ $("#reply_form input[name='commentNum']").val(commentNum);
+ $.ajax({
+ url: '/article/addReply.action',
+ data: $('#reply_form').serialize(),
+ type: 'POST',
+ beforeSend : function(res){
+ pageFun.showCommentMsg('wait','让回复飞一会儿～',false , false);
+ },
+ success: function (res) {
+ if (res.status == 200) {
+ let replyContentRender = template.compile(replyContent);
+ let replyContentData = {
+ reply: res.data,
+ };
+ let replyContentHtml = replyContentRender(replyContentData);
+ // 情况reply form的数据
+ $('#replyHeadImage').attr('src','https://wx1.sinaimg.cn/square/007aGNoFly1fvys0zjwv7j301o01o0si.jpg');
+ $('#replyName').val("");
+ $('#replyEmail').val("");
+ $('#email_reply').prop('checked', false);
+ reply.html("");
+ pageFun.showCommentMsg('success','回复发布成功！',true , false);
+ // 隐藏回复框
+ $('.reply_comment').parent().prev().find('.reply').text('回复');
+ $('.reply_comment').parent().html("");
+ // 更新文章评论量
+ $('.detail_info>span:last-child').text(res.data.commentNum);
+ let dom = $("li[name=" + commentId + "]");
+ $('html,body').animate({
+ scrollTop: dom.innerHeight() + dom.offset().top - 200
+ }, 200);
+ dom.append(replyContentHtml);
+ if (replyContentHtml.indexOf("") != -1) {
+ pageFun.highLight();
+ }
+ replyClick();
+ }
+ },
+ error : function () {
+ pageFun.showCommentMsg('success','回复发布失败，请联系站长！',true , false);
+ }
+ })
+ }
+ ;
+ })
+ } else {
+ $(this).text('回复');
+ $(this).parent().next().html("");
+ }
+ })
+ })
+}
+
+function getScrollTop() {
+ let scrollTop = 0;
+ if (document.documentElement && document.documentElement.scrollTop) {
+ scrollTop = document.documentElement.scrollTop
+ } else if (document.body) {
+ scrollTop = document.body.scrollTop
+ }
+ return scrollTop;
+}
+
+function getClientHeight() {
+ let clientHeight = 0;
+ if (document.body.clientHeight && document.documentElement.clientHeight) {
+ clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
+ } else {
+ clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
+ }
+ return clientHeight;
+}
+
+function getScrollHeight() {
+ return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+}
+
+window.onscroll = function () {
+ if (getScrollTop() + getClientHeight() > getScrollHeight() - 110) {
+ pageNum++;
+ getPageComment(pageNum, articleId);
+ }
+};
+
+function getPageComment(pageNum, articleId) {
+ if (!exist) {
+ $.ajax({
+ url: '/article/detail.action',
+ type: 'POST',
+ data: {
+ pageNum: pageNum,
+ articleId: articleId
+ },
+ success: function (res) {
+ if (pageNum == 1) {
+ let detailData = {
+ article: res.data.article,
+ labelList: res.data.labelList
+ };
+ let detailHtml = detailRender(detailData);
+ $('#detail').html(detailHtml);
+ var menu = "";
+ // 右边导航栏
+ $('.detail_content h2 , .detail_content h3').each(function (index) {
+ // 获取标题文本
+ let text = $(this).text();
+ text = text.replace('$','');
+ $(this).attr('id',"title"+index);
+ menu += $(this).prop('tagName') == 'H2' ? "设置标题
'), + type: 'list', // droplist 以列表形式展示 + list: [{$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
来设置标题，设置之后会成为字号
'), + type: 'list', // droplist 以列表形式展示 + list: [{ + $elem: $('x-small'), + value: '1' + }, {$elem: $('small'), value: '2'}, { + $elem: $('normal'), + value: '3' + }, { + $elem: $('large'), + value: '4' + }, { + $elem: $('x-large'), + value: '5' + }, {$elem: $('xx-large'), value: '6'}], + onClick: function onClick(value) { + // 注意 this 是指向当前的 FontSize 对象 + _this._command(value); + } + }); + } + +// 原型 + FontSize.prototype = { + constructor: FontSize, + + // 执行命令 + _command: function _command(value) { + var editor = this.editor; + editor.cmd.do('fontSize', value); + } + }; + + /* + menu - fontName +*/ + +// 构造函数 + function FontName(editor) { + var _this = this; + + this.editor = editor; + this.$elem = $(''); + this.type = 'droplist'; + + // 当前是否 active 状态 + this._active = false; + + // 获取配置的字体 + var config = editor.config; + var fontNames = config.fontNames || []; + + // 初始化 droplist + this.droplist = new DropList(this, { + width: 100, + $title: $('字体
'), + type: 'list', // droplist 以列表形式展示 + list: fontNames.map(function (fontName) { + return { + $elem: $('' + fontName + ''), + value: fontName + }; + }), + onClick: function onClick(value) { + // 注意 this 是指向当前的 FontName 对象 + _this._command(value); + } + }); + } + +// 原型 + FontName.prototype = { + constructor: FontName, + + _command: function _command(value) { + var editor = this.editor; + editor.cmd.do('fontName', value); + } + }; + + /* + 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 = $('设置列表
'), + 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 = $(''); + 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 = $(''); + 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 langId = getRandom('langId'); + var textId = getRandom('texxt'); + var btnId = getRandom('btn'); + + var panel = new Panel(this, { + width: 500, + // 一个 Panel 包含多个 tab + tabs: [{ + // 标题 + title: '插入代码', + // 模板 + tpl: '\n \n \n', + // 事件绑定 + events: [ + // 插入代码 + { + selector: '#' + btnId, + type: 'click', + fn: function fn() { + var $lang = $('#' + langId); + var $text = $('#' + textId); + var lang = $lang.val(); + var text = $text.val() || $text.html(); + text = replaceHtmlSymbol(text); + if (type === 'new') { + // 新插入 + _this._insertCode(text,lang); + } 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,lang) { + 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 = $(''); + 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 += '
'; + } + }); + } + + 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', + // 事件绑定 + 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 = '\n \u521B\u5EFA\n \n \u884C\n \n \u5217\u7684\u8868\u683C\n
\n \n'; + for (r = 0; r < rowNum; r++) { + html += '
'; + if (r === 0) { + for (c = 0; c < colNum; c++) { + html += ' '; + } + html += ''; + } + } else { + for (c = 0; c < colNum; c++) { + 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 ', + // 事件绑定 + 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', + // 事件绑定 + 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 ', + 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', + 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 \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.fontSize = FontSize; + + MenuConstructors.fontName = FontName; + + 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, ignoreImg) { + 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('
发表评论
+ +