Skip to content

Commit 790574f

Browse files
wangfupeng1988wangfupeng1988
committed
add video menu
1 parent 2f624e3 commit 790574f

9 files changed

Lines changed: 244 additions & 21 deletions

File tree

‎ISSUE.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
- 删除掉`./release`之后，执行`npm run release`会报错，原因是`fonts`文件没拷贝全，就要去替换`css`中的字体文件为`base64`格式，导致找不到文件。
44
- 针对编辑区域的`max-height`和`min-height`做一些处理，而且和全屏还不能通用
55
- 先点击'B'再输入内容这种形式，前期先支持 webkit 和 IE，火狐的支持后面再加上
6-
- **插入代码**功能不易用，需要改进
6+
- Panel 的样式需要优化，现在太丑

‎release/wangEditor.js‎

Lines changed: 112 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -454,7 +454,7 @@ function $(selector) {
454454
*/
455455

456456
var config = {
457-
menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'table', 'code', 'undo', 'redo']
457+
menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'table', 'video', 'code', 'undo', 'redo']
458458
};
459459

460460
/*
@@ -819,13 +819,14 @@ Panel.prototype = {
819819
$textContainerElem.append($container);
820820

821821
// 绑定 opt 的事件，只有添加到 DOM 之后才能绑定成功
822-
tabs.forEach(function (tab) {
822+
tabs.forEach(function (tab, index) {
823823
var events = tab.events || [];
824824
events.forEach(function (event) {
825825
var selector = event.selector;
826826
var type = event.type;
827827
var fn = event.fn || emptyFn;
828-
$container.find(selector).on(type, function (e) {
828+
var $content = tabContentArr[index];
829+
$content.find(selector).on(type, function (e) {
829830
e.stopPropagation();
830831
var needToHide = fn(e);
831832
// 执行完事件之后，是否要关闭 panel
@@ -1565,10 +1566,20 @@ Emoticon.prototype = {
15651566
var _this = this;
15661567

15671568
// 拼接表情字符串
1568-
var html = '';
1569-
var str = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐';
1570-
str.split(/\s/).forEach(function (item) {
1571-
html += '<span class="w-e-item">' + item + '</span>';
1569+
var faceHtml = '';
1570+
var faceStr = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐';
1571+
faceStr.split(/\s/).forEach(function (item) {
1572+
if (item) {
1573+
faceHtml += '<span class="w-e-item">' + item + '</span>';
1574+
}
1575+
});
1576+
1577+
var handHtml = '';
1578+
var handStr = '🙌 👏 👋 👍 👎 👊 ✊ ️👌 ✋ 👐 💪 🙏 ️👆 👇 👈 👉 🖕 🖐 🤘 🖖';
1579+
handStr.split(/\s/).forEach(function (item) {
1580+
if (item) {
1581+
handHtml += '<span class="w-e-item">' + item + '</span>';
1582+
}
15721583
});
15731584

15741585
var panel = new Panel(this, {
@@ -1579,7 +1590,7 @@ Emoticon.prototype = {
15791590
// 标题
15801591
title: '表情',
15811592
// 模板
1582-
tpl: '<div class="w-e-emoticon-container">' + html + '</div>',
1593+
tpl: '<div class="w-e-emoticon-container">' + faceHtml + '</div>',
15831594
// 事件绑定
15841595
events: [{
15851596
selector: 'span.w-e-item',
@@ -1591,7 +1602,24 @@ Emoticon.prototype = {
15911602
return true;
15921603
}
15931604
}]
1594-
} // first tab end
1605+
}, // first tab end
1606+
{
1607+
// 标题
1608+
title: '手势',
1609+
// 模板
1610+
tpl: '<div class="w-e-emoticon-container">' + handHtml + '</div>',
1611+
// 事件绑定
1612+
events: [{
1613+
selector: 'span.w-e-item',
1614+
type: 'click',
1615+
fn: function fn(e) {
1616+
var target = e.target;
1617+
_this._insert(target.innerHTML);
1618+
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
1619+
return true;
1620+
}
1621+
}]
1622+
} // second tab end
15951623
] // tabs end
15961624
});
15971625
// 显示 panel
@@ -1936,6 +1964,79 @@ Table.prototype = {
19361964
}
19371965
};
19381966

1967+
/*
1968+
menu - video
1969+
*/
1970+
// 构造函数
1971+
function Video(editor) {
1972+
this.editor = editor;
1973+
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"><i/></div>');
1974+
this.type = 'panel';
1975+
1976+
// 当前是否 active 状态
1977+
this._active = false;
1978+
}
1979+
1980+
// 原型
1981+
Video.prototype = {
1982+
constructor: Video,
1983+
1984+
onClick: function onClick() {
1985+
this._createPanel();
1986+
},
1987+
1988+
_createPanel: function _createPanel() {
1989+
var _this = this;
1990+
1991+
// 创建 id
1992+
var textValId = getRandom('text-val');
1993+
var btnId = getRandom('btn');
1994+
1995+
// 创建 panel
1996+
var panel = new Panel(this, {
1997+
width: 350,
1998+
height: 120,
1999+
// 一个 panel 多个 tab
2000+
tabs: [{
2001+
// 标题
2002+
title: '插入视频',
2003+
// 模板
2004+
tpl: '<div>\n <div>\n <input id="' + textValId + '" type="text" style="display:block;width:100%;" placeholder="\u683C\u5F0F\u5982\uFF1A<iframe src=... ></iframe>"/>\n </div>\n <div class="w-e-button-container w-e-clear-fix">\n <button id="' + btnId + '" class="default left">\u63D2\u5165</button>\n </div>\n </div>',
2005+
// 事件绑定
2006+
events: [{
2007+
selector: '#' + btnId,
2008+
type: 'click',
2009+
fn: function fn() {
2010+
var $text = $('#' + textValId);
2011+
var val = $text.val().trim();
2012+
2013+
// 测试用视频地址
2014+
// <iframe height=498 width=510 src='http://player.youku.com/embed/XMjcwMzc3MzM3Mg==' frameborder=0 'allowfullscreen'></iframe>
2015+
2016+
if (val) {
2017+
// 插入视频
2018+
_this._insert(val);
2019+
}
2020+
2021+
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
2022+
return true;
2023+
}
2024+
}]
2025+
} // first tab end
2026+
] // tabs end
2027+
}); // panel end
2028+
2029+
// 显示 panel
2030+
panel.show();
2031+
},
2032+
2033+
// 插入视频
2034+
_insert: function _insert(val) {
2035+
var editor = this.editor;
2036+
editor.cmd.do('insertHTML', val);
2037+
}
2038+
};
2039+
19392040
/*
19402041
所有菜单的汇总
19412042
*/
@@ -1975,6 +2076,8 @@ MenuConstructors.emoticon = Emoticon;
19752076

19762077
MenuConstructors.table = Table;
19772078

2079+
MenuConstructors.video = Video;
2080+
19782081
/*
19792082
菜单集合
19802083
*/

‎release/wangEditor.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎release/wangEditor.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const config = {
1717
'quote',
1818
'emoticon',
1919
'table',
20+
'video',
2021
'code',
2122
'undo',
2223
'redo'

‎src/js/menus/emoticon/index.js‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,20 @@ Emoticon.prototype = {
2828

2929
_createPanel: function () {
3030
// 拼接表情字符串
31-
let html = ''
32-
const str = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐'
33-
str.split(/\s/).forEach(item => {
34-
html += '<span class="w-e-item">' + item + '</span>'
31+
let faceHtml = ''
32+
const faceStr = '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😜 😝 😛 🤑 🤗 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😤 😠 😡 😶 😐 😑 😯 😦 😧 😮 😲 😵 😳 😱 😨 😰 😢 😥 😭 😓 😪 😴 🙄 🤔 😬 🤐'
33+
faceStr.split(/\s/).forEach(item => {
34+
if (item) {
35+
faceHtml += '<span class="w-e-item">' + item + '</span>'
36+
}
37+
})
38+
39+
let handHtml = ''
40+
const handStr = '🙌 👏 👋 👍 👎 👊 ✊ ️👌 ✋ 👐 💪 🙏 ️👆 👇 👈 👉 🖕 🖐 🤘 🖖'
41+
handStr.split(/\s/).forEach(item => {
42+
if (item) {
43+
handHtml += '<span class="w-e-item">' + item + '</span>'
44+
}
3545
})
3646

3747
const panel = new Panel(this, {
@@ -43,7 +53,26 @@ Emoticon.prototype = {
4353
// 标题
4454
title: '表情',
4555
// 模板
46-
tpl: `<div class="w-e-emoticon-container">${html}</div>`,
56+
tpl: `<div class="w-e-emoticon-container">${faceHtml}</div>`,
57+
// 事件绑定
58+
events: [
59+
{
60+
selector: 'span.w-e-item',
61+
type: 'click',
62+
fn: (e) => {
63+
const target = e.target
64+
this._insert(target.innerHTML)
65+
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
66+
return true
67+
}
68+
}
69+
]
70+
}, // first tab end
71+
{
72+
// 标题
73+
title: '手势',
74+
// 模板
75+
tpl: `<div class="w-e-emoticon-container">${handHtml}</div>`,
4776
// 事件绑定
4877
events: [
4978
{
@@ -57,7 +86,7 @@ Emoticon.prototype = {
5786
}
5887
}
5988
]
60-
} // first tab end
89+
} // second tab end
6190
] // tabs end
6291
})
6392
// 显示 panel

‎src/js/menus/menu-list.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,8 @@ MenuConstructors.emoticon = Emoticon
5353
import Table from './table/index.js'
5454
MenuConstructors.table = Table
5555

56+
import Video from './video/index.js'
57+
MenuConstructors.video = Video
58+
5659
// 吐出所有菜单集合
5760
export default MenuConstructors

‎src/js/menus/panel.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,14 @@ Panel.prototype = {
103103
$textContainerElem.append($container)
104104

105105
// 绑定 opt 的事件，只有添加到 DOM 之后才能绑定成功
106-
tabs.forEach((tab) => {
106+
tabs.forEach((tab, index) => {
107107
const events = tab.events || []
108108
events.forEach(event => {
109109
const selector = event.selector
110110
const type = event.type
111111
const fn = event.fn || emptyFn
112-
$container.find(selector).on(type, (e) => {
112+
const $content = tabContentArr[index]
113+
$content.find(selector).on(type, (e) => {
113114
e.stopPropagation()
114115
const needToHide = fn(e)
115116
// 执行完事件之后，是否要关闭 panel

‎src/js/menus/video/index.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/*
2+
menu - video
3+
*/
4+
import $ from '../../util/dom-core.js'
5+
import { getRandom } from '../../util/util.js'
6+
import Panel from '../panel.js'
7+
8+
// 构造函数
9+
function Video(editor) {
10+
this.editor = editor
11+
this.$elem = $('<div class="w-e-menu"><i class="w-e-icon-play"><i/></div>')
12+
this.type = 'panel'
13+
14+
// 当前是否 active 状态
15+
this._active = false
16+
}
17+
18+
// 原型
19+
Video.prototype = {
20+
constructor: Video,
21+
22+
onClick: function () {
23+
this._createPanel()
24+
},
25+
26+
_createPanel: function () {
27+
// 创建 id
28+
const textValId = getRandom('text-val')
29+
const btnId = getRandom('btn')
30+
31+
// 创建 panel
32+
const panel = new Panel(this, {
33+
width: 350,
34+
height: 120,
35+
// 一个 panel 多个 tab
36+
tabs: [
37+
{
38+
// 标题
39+
title: '插入视频',
40+
// 模板
41+
tpl: `<div>
42+
<div>
43+
<input id="${textValId}" type="text" style="display:block;width:100%;" placeholder="格式如：<iframe src=... ><\/iframe>"/>
44+
</div>
45+
<div class="w-e-button-container w-e-clear-fix">
46+
<button id="${btnId}" class="default left">插入</button>
47+
</div>
48+
</div>`,
49+
// 事件绑定
50+
events: [
51+
{
52+
selector: '#' + btnId,
53+
type: 'click',
54+
fn: () => {
55+
const $text = $('#' + textValId)
56+
const val = $text.val().trim()
57+
58+
// 测试用视频地址
59+
// <iframe height=498 width=510 src='http://player.youku.com/embed/XMjcwMzc3MzM3Mg==' frameborder=0 'allowfullscreen'></iframe>
60+
61+
if (val) {
62+
// 插入视频
63+
this._insert(val)
64+
}
65+
66+
// 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
67+
return true
68+
}
69+
}
70+
]
71+
} // first tab end
72+
] // tabs end
73+
}) // panel end
74+
75+
// 显示 panel
76+
panel.show()
77+
},
78+
79+
// 插入视频
80+
_insert: function (val) {
81+
const editor = this.editor
82+
editor.cmd.do('insertHTML', val)
83+
}
84+
}
85+
86+
export default Video

0 commit comments

Comments
 (0)