From 8ac41121ed6ee7e1fe0e08ad2b4f88af6cf79212 Mon Sep 17 00:00:00 2001 From: sofish Date: Tue, 4 Nov 2014 21:57:53 +0800 Subject: [PATCH] add `insertimage`, fixed #118 --- index.html | 11 ++++++----- src/pen.css | 1 + src/pen.js | 53 +++++++++++++++++++++++++++++++++++++---------------- 3 files changed, 44 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 38addf9..adbedc7 100644 --- a/index.html +++ b/index.html @@ -81,16 +81,17 @@

Enjoy live editing (+markdown)

// config var options = { editor: document.querySelector('[data-toggle="pen"]'), - debug: true + debug: true, + list: [ + 'insertimage', 'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule', + 'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink' + ] }; // create editor var pen = window.pen = new Pen(options); - // setTimeout(function () { - pen.focus(); - // }, 100); - + pen.focus(); // toggle editor mode document.querySelector('#mode').addEventListener('click', function() { diff --git a/src/pen.css b/src/pen.css index ce92753..a30b62e 100644 --- a/src/pen.css +++ b/src/pen.css @@ -116,6 +116,7 @@ .pen-menu .icon-h5:before { content: 'H5'; } .pen-menu .icon-h6:before { content: 'H6'; } .pen-menu .icon-p:before { content: 'P'; } +.pen-menu .icon-insertimage:before { width:1.8em;margin:0;position:relative;top:-2px;content:'IMG';font-size:12px;border:1px solid #fff;padding:2px;border-radius:2px; } .pen { position: relative; diff --git a/src/pen.js b/src/pen.js index f6dcd1d..68dc9b2 100644 --- a/src/pen.js +++ b/src/pen.js @@ -9,8 +9,8 @@ var commandsReg = { block: /^(?:p|h[1-6]|blockquote|pre)$/, inline: /^(?:bold|italic|underline|insertorderedlist|insertunorderedlist|indent|outdent)$/, - source: /^(?:insertimage|createlink|unlink)$/, - insert: /^(?:inserthorizontalrule|insert)$/, + source: /^(?:createlink|unlink)$/, + insert: /^(?:inserthorizontalrule|insertimage|insert)$/, wrap: /^(?:code)$/ }; @@ -85,7 +85,7 @@ textarea: '', list: [ 'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule', - 'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink' + 'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink', 'insertimage' ], cleanAttrs: ['id', 'class', 'style', 'name'], cleanTags: ['script'] @@ -105,19 +105,27 @@ function commandOverall(ctx, cmd, val) { var message = ' to exec 「' + cmd + '」 command' + (val ? (' with value: ' + val) : ''); - if (doc.execCommand(cmd, false, val)) { - utils.log('success' + message); - } else { - utils.log('fail' + message, true); + + try { + doc.execCommand(cmd, false, val); + } catch(err) { + // TODO: there's an error when insert a image to document, bug not a bug + return utils.log('fail' + message, true); } + + utils.log('success' + message); } - function commandInsert(ctx, name) { + function commandInsert(ctx, name, val) { var node = getNode(ctx); if (!node) return; ctx._range.selectNode(node); ctx._range.collapse(false); - return commandOverall(ctx, name); + + // hide menu when a image was inserted + if(name === 'insertimage') ctx._menu.style.display = 'none'; + + return commandOverall(ctx, name, val); } function commandBlock(ctx, name) { @@ -126,9 +134,13 @@ return commandOverall(ctx, 'formatblock', name); } - function commandWrap(ctx, tag) { - var val = '<' + tag + '>' + selection + ''; - return commandOverall(ctx, 'insertHTML', val); + function commandWrap(ctx, tag, value) { + if(tag === 'insertimage') { + value = '' + selection.toString(); + } else { + value = '<' + tag + '>' + value + ''; + } + return commandOverall(ctx, 'insertHTML', value); } // placeholder @@ -145,7 +157,7 @@ utils.forEach(ctx.config.list, function (name) { var klass = 'pen-icon icon-' + name; icons += ''; - if ((name === 'createlink')) icons += ''; + if (/(?:createlink)|(?:insertimage)/.test(name)) icons += ''; }, true); ctx._menu = doc.createElement('div'); @@ -230,7 +242,8 @@ var action = e.target.getAttribute('data-action'); if (!action) return; - if (action !== 'createlink') return menuApply(action); + if (!/(?:createlink)|(?:insertimage)/.test(action)) return menuApply(action); + // create link var input = menu.getElementsByTagName('input')[0]; @@ -239,13 +252,16 @@ var createlink = function(input) { input.style.display = 'none'; + if (input.value) { var inputValue = input.value .replace(strReg.whiteSpace, '') .replace(strReg.mailTo, 'mailto:$1') .replace(strReg.http, 'http://$1'); + return menuApply(action, inputValue); } + action = 'unlink'; menuApply(action); }; @@ -522,14 +538,15 @@ } name = name.toLowerCase(); this.setRange(); + if (commandsReg.block.test(name)) { commandBlock(this, name); } else if (commandsReg.inline.test(name) || commandsReg.source.test(name)) { commandOverall(this, name, value); } else if (commandsReg.insert.test(name)) { - commandInsert(this, name); + commandInsert(this, name, value); } else if (commandsReg.wrap.test(name)) { - commandWrap(this, name); + commandWrap(this, name, value); } else { utils.log('can not find command function for name: ' + name + (value ? (', value: ' + value) : ''), true); } @@ -598,6 +615,10 @@ menu.querySelector('input').value = item.getAttribute('href'); tag = 'createlink'; break; + case 'img': + menu.querySelector('input').value = item.getAttribute('src'); + tag = 'insertimage'; + break; case 'i': tag = 'italic'; break;