新增neditor富文本编辑器
宇天
parent
263a55b260
commit
6b59093321
|
|
@ -0,0 +1,57 @@
|
||||||
|
/**
|
||||||
|
* 未来版表单组件
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/07/04 12:03:09
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
export default class DoInput extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
|
||||||
|
console.log('0000')
|
||||||
|
this.root = this.attachShadow({ mode: 'open' })
|
||||||
|
this.root.innerHTML = `
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display:flex;
|
||||||
|
border: 1px solid #e7e8eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
input {flex:1;padding:0 8px;border: 0;border-radius: 4px;outline:none}
|
||||||
|
</style>
|
||||||
|
<input type="text">
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ['type']
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this.__INPUT__.value
|
||||||
|
}
|
||||||
|
|
||||||
|
set value(val) {
|
||||||
|
this.__INPUT__.value = val
|
||||||
|
}
|
||||||
|
|
||||||
|
set type(val) {
|
||||||
|
// console.log('type', val)
|
||||||
|
this.__INPUT__.setAttribute('type', val)
|
||||||
|
this.setAttribute('type', val)
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
// console.log('----------', this, this.root.children)
|
||||||
|
this.__INPUT__ = this.root.children[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
attributeChangedCallback(...args) {
|
||||||
|
// console.log('======', args)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('do-input', DoInput)
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,75 @@
|
||||||
|
/**
|
||||||
|
* icon字典
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/07/08 17:39:11
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
key: 'font',
|
||||||
|
path:
|
||||||
|
'M123.68639053 456.52662723l332.84023669 0 0 110.94674556-110.94674556 0 0 332.84023669-110.94674557 0 0-332.84023669-110.94674556 0zM900.31360947 234.6331361l-218.20118344 0 0 665.68047338-118.31360947 0 0-665.68047338-218.20118342 0 0-110.94674556 554.7337278 0z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'color',
|
||||||
|
path:
|
||||||
|
'M470.975 137l-214.462 562.5h102l44.513-131.25h217.949l48.038 131.25h102.002l-214.501-562.5h-85.5zM512 256.55l78.525 233.175h-160.538l82.013-233.212zM212 774.5v112.5h599.999v-112.5h-599.999z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'bold',
|
||||||
|
path:
|
||||||
|
'M584.81777778 724.57443555H414.91000889v-145.63555556H584.81777778c40.29212445 0 72.81777778 32.52565333 72.81777777 72.81777778 0 40.29326222-32.52565333 72.81777778-72.81777777 72.81777778m-169.90776889-436.90666667h145.63555556c40.29212445 0 72.81777778 32.52565333 72.81777777 72.81777778 0 40.29326222-32.52565333 72.81777778-72.81777777 72.81777778h-145.63555556m271.85265778 62.62328889C733.85187555 462.91626666 766.86222222 409.03111111 766.86222222 360.48554666c0-109.71136-84.95445333-194.17998222-194.18112-194.17998222H269.27445333V845.93777777H611.03217778c101.94488889 0 180.10225778-82.52643555 180.10225777-183.98663111 0-73.78830222-41.74848-136.89742222-104.37176888-166.02453333z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'image',
|
||||||
|
path:
|
||||||
|
'M552.0003125 392h219.999375L552.0003125 171.9996875V392M272 111.9996875h319.9996875l240 240v480c0 44.000625-36 80.000625-79.9996875 80.000625H272c-44.4 0-79.9996875-36-79.9996875-80.000625V192.0003125A79.723125 79.723125 0 0 1 272 111.9996875m0 720h480V512L591.9996875 672.0003125 512 591.9996875l-240 240M351.9996875 392C308 392 272 428 272 471.9996875c0 44.000625 36 80.000625 79.9996875 80.000625 44.000625 0 80.000625-36 80.000625-80.000625 0-43.9996875-36-79.9996875-80.000625-79.9996875z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'left',
|
||||||
|
path:
|
||||||
|
'M128 128h768v85.333H128V128m0 170.667h512V384H128v-85.333m0 170.666h768v85.334H128v-85.334M128 640h512v85.333H128V640m0 170.667h768V896H128v-85.333z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'link',
|
||||||
|
path:
|
||||||
|
'M879.2 131.6c-103-95.5-264.1-88-361.4 11.2L474.7 184c-13.1 13.1-3.7 35.6 13.1 37.5 26.2 1.9 52.4 7.5 78.7 15 7.5 1.9 16.9 0 22.5-5.6l9.4-9.4c54.3-54.3 142.3-59.9 198.5-11.2 63.7 54.3 65.5 151.7 7.5 209.7L662 562.3c-18.7 18.7-41.2 30-63.7 37.5-30 7.5-61.8 5.6-89.9-5.6-16.9-7.5-33.7-16.9-48.7-31.8-7.5-7.5-13.1-15-18.7-24.3-7.5-13.1-24.3-15-33.7-3.7l-52.4 52.4c-7.5 7.5-7.5 18.7-1.9 28.1 7.5 11.2 16.9 20.6 26.2 30 13.1 13.1 30 26.2 44.9 35.6 26.2 16.9 56.2 28.1 86.1 33.7 58.1 11.2 121.7 1.9 174.2-26.2 20.6-11.2 41.2-26.2 58.1-43.1l142.3-142.3c104.9-103.2 101.2-271.8-5.6-371zM534.7 803.9l-39.3-5.6s-26.2-5.6-39.3-11.2c-7.5-1.9-16.9 0-22.5 5.6l-9.4 9.4c-54.3 54.3-142.3 59.9-198.5 11.2-63.7-54.3-65.5-151.7-7.5-209.7l142.3-142.3c18.7-18.7 41.2-30 63.7-37.5 30-7.5 61.8-5.6 89.9 5.6 16.9 7.5 33.7 16.9 48.7 31.8 7.5 7.5 13.1 15 18.7 24.3 7.5 13.1 24.3 15 33.7 3.7l52.4-52.4c7.5-7.5 7.5-18.7 1.9-28.1-7.5-11.2-16.9-20.6-26.2-30-13.1-13.1-28.1-26.2-44.9-35.6-26.2-16.9-56.2-28.1-88-33.7-58.1-11.2-121.7-1.9-174.2 26.2-20.6 11.2-41.2 26.2-58.1 43.1L141.4 515.5c-99.3 99.3-106.7 260.3-11.2 361.4C229.5 985.5 398 987.4 501 884.4l46.8-46.8c13.1-9.4 3.7-31.9-13.1-33.7z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ordered',
|
||||||
|
path:
|
||||||
|
'M298.667 554.667H896v-85.334H298.667m0 341.334H896v-85.334H298.667m0-426.666H896v-85.334H298.667m-213.334 256h76.8l-76.8 89.6v38.4h128v-42.666h-76.8l76.8-89.6v-38.4h-128M128 341.333h42.667V170.667H85.333v42.666H128m-42.667 512h85.334v21.334H128v42.666h42.667v21.334H85.333v42.666h128V682.667h-128v42.666z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'italic',
|
||||||
|
path:
|
||||||
|
'M414.91000889 163.63889777v145.63555555h107.28448L356.16995555 697.63555555H220.72888889v145.63555555h388.36110222V697.63555555H501.80551111l166.02453334-388.36110222H803.27111111v-145.63555556H414.91000889z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'delete',
|
||||||
|
path:
|
||||||
|
'M898.719 512v70.312H744.383c35.156 75.235 33.398 281.25-219.024 281.25-292.851 1.758-281.601-228.515-281.601-228.515l139.57 1.758c1.055 118.476 111.094 118.476 132.89 117.07 22.5-1.758 106.524-1.406 113.204-83.672 2.812-38.32-35.86-67.5-78.047-87.89H125.281V512H898.72M772.508 367.508l-139.922-1.055s5.976-97.383-115.313-97.734c-121.289-0.703-110.742 77.343-110.742 87.187 1.407 9.844 11.953 58.36 105.469 81.563H290.867S168.172 200.867 467.703 160.437c306.211-42.187 305.508 207.774 304.805 207.07z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'under',
|
||||||
|
path:
|
||||||
|
'M232 872h560v-80H232v80m280-160c132.4 0 240-107.6 240-240V152H652v320c0 77.2-62.8 140-140 140s-140-62.8-140-140V152H272v320c0 132.4 107.6 240 240 240z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'center',
|
||||||
|
path:
|
||||||
|
'M128 128h768v85.333H128V128m170.667 170.667h426.666V384H298.667v-85.333M128 469.333h768v85.334H128v-85.334M298.667 640h426.666v85.333H298.667V640M128 810.667h768V896H128v-85.333z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'unordered',
|
||||||
|
path:
|
||||||
|
'M298.667 213.333v85.334H896v-85.334M298.667 554.667H896v-85.334H298.667m0 341.334H896v-85.334H298.667m-128-14.08c-31.574 0-56.747 25.6-56.747 56.747s25.6 56.747 56.747 56.747c31.146 0 56.746-25.6 56.746-56.747s-25.173-56.747-56.746-56.747m0-519.253c-35.414 0-64 28.587-64 64s28.586 64 64 64c35.413 0 64-28.587 64-64s-28.587-64-64-64m0 256c-35.414 0-64 28.587-64 64s28.586 64 64 64c35.413 0 64-28.587 64-64s-28.587-64-64-64z'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'right',
|
||||||
|
path:
|
||||||
|
'M128 128h768v85.333H128V128m256 170.667h512V384H384v-85.333M128 469.333h768v85.334H128v-85.334M384 640h512v85.333H384V640M128 810.667h768V896H128v-85.333z'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,479 @@
|
||||||
|
/**
|
||||||
|
* neditor
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/07/05 13:44:10
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
const log = console.log
|
||||||
|
|
||||||
|
import iconList from './icon'
|
||||||
|
|
||||||
|
const ACTTION = {
|
||||||
|
bold: 'bold',
|
||||||
|
italic: 'italic',
|
||||||
|
under: 'underline',
|
||||||
|
delete: 'strikeThrough',
|
||||||
|
left: 'justifyLeft',
|
||||||
|
center: 'justifyCenter',
|
||||||
|
right: 'justifyRight',
|
||||||
|
image: 'insertImage',
|
||||||
|
font: 'fontSize',
|
||||||
|
color: 'foreColor',
|
||||||
|
link: 'createLink',
|
||||||
|
ordered: 'insertOrderedList',
|
||||||
|
unordered: 'insertUnorderedList'
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_TOOLS = [
|
||||||
|
'font',
|
||||||
|
'color',
|
||||||
|
'bold',
|
||||||
|
'italic',
|
||||||
|
'under',
|
||||||
|
'delete',
|
||||||
|
'ordered',
|
||||||
|
'unordered',
|
||||||
|
'left',
|
||||||
|
'center',
|
||||||
|
'right',
|
||||||
|
'link',
|
||||||
|
'image'
|
||||||
|
]
|
||||||
|
|
||||||
|
export default class Nedtior extends HTMLElement {
|
||||||
|
// 监听属性变化
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ['toolbar', 'value']
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.root = this.attachShadow({ mode: 'open' })
|
||||||
|
|
||||||
|
this.render()
|
||||||
|
this.__TOOLBAR__ = this.root.children[2]
|
||||||
|
this.__FONT__ = this.root.children[3]
|
||||||
|
this.__COLOR__ = this.root.children[4]
|
||||||
|
this.__LINK__ = this.root.children[5]
|
||||||
|
this.__LINK_BTN__ = this.__LINK__.querySelector('span')
|
||||||
|
this.__EDITOR__ = this.root.lastElementChild
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.root.innerHTML = `
|
||||||
|
<style>
|
||||||
|
* {box-sizing: border-box;}
|
||||||
|
:host {
|
||||||
|
position: relative;
|
||||||
|
display:flex;
|
||||||
|
flex-flow: column wrap;
|
||||||
|
min-width: 200px;
|
||||||
|
min-height: 100px;
|
||||||
|
border: 1px solid #e7e8eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.tool-bar {
|
||||||
|
display: flex;
|
||||||
|
height: 34px;
|
||||||
|
padding: 5px;
|
||||||
|
line-height: 24px;
|
||||||
|
border-bottom: 1px solid #e7e8eb;
|
||||||
|
}
|
||||||
|
.tool-bar span {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 0 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.tool-bar span:hover {background: #f7f8fb}
|
||||||
|
.tool-bar span input {position: absolute;width: 100%;
|
||||||
|
height: 100%;opacity:0}
|
||||||
|
|
||||||
|
.tool-bar .icon {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
fill: currentColor;
|
||||||
|
color: #62778d
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
flex: 1;
|
||||||
|
overflow:hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height:360px;
|
||||||
|
padding:5px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.editor img {max-width: 100%;}
|
||||||
|
|
||||||
|
.font-layer, .color-layer, .link-layer {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index:99;
|
||||||
|
width: 80px;
|
||||||
|
padding: 5px 0;
|
||||||
|
line-height:25px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 8px rgba(0,0,0,.2);
|
||||||
|
font-size: 13px;
|
||||||
|
user-select: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition:all ease-in-out .2s;
|
||||||
|
}
|
||||||
|
.font-layer.fadein {visibility: visible;top: 34px;opacity: 1;}
|
||||||
|
.font-layer span {display: block;padding:0 8px;}
|
||||||
|
.font-layer span:hover {background: #f7f8fb;}
|
||||||
|
|
||||||
|
.color-layer {display: flex;flex-flow:row wrap;left: 30px;;width: 96px;}
|
||||||
|
.color-layer.fadein {visibility: visible;top: 34px;opacity: 1;}
|
||||||
|
.color-layer span {width:20px;height:20px;margin:2px;background: #f30;}
|
||||||
|
.color-layer span:nth-child(1){background: #f3f5fb}
|
||||||
|
.color-layer span:nth-child(2){background: #dae1e9}
|
||||||
|
.color-layer span:nth-child(3){background: #62778d}
|
||||||
|
.color-layer span:nth-child(4){background: #58d68d}
|
||||||
|
.color-layer span:nth-child(5){background: #3fc2a7}
|
||||||
|
.color-layer span:nth-child(6){background: #52a3de}
|
||||||
|
.color-layer span:nth-child(7){background: #ac61ce}
|
||||||
|
.color-layer span:nth-child(8){background: #ffb618}
|
||||||
|
.color-layer span:nth-child(9){background: #e67e22}
|
||||||
|
.color-layer span:nth-child(10){background: #ff5061}
|
||||||
|
.color-layer span:nth-child(11){background: #ff0000}
|
||||||
|
.color-layer span:nth-child(12){background: #000000}
|
||||||
|
|
||||||
|
.link-layer {display:flex;align-items:center;left:330px;width:180px;padding:8px;}
|
||||||
|
.link-layer input {width:120px;height:20px;margin-right: 8px;padding:0 5px;border: 1px solid #e7e8eb;outline: none;}
|
||||||
|
.link-layer span {height:20px;padding:0 5px;;line-height:20px;border-radius:4px;background:#dae1e9;text-align: center;font-size: 12px;}
|
||||||
|
|
||||||
|
.link-layer.fadein {visibility: visible;top: 34px;opacity: 1;}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<svg aria-hidden="true" style="overflow:hidden;position: absolute;width:0;height:0">
|
||||||
|
${iconList
|
||||||
|
.map(
|
||||||
|
_ =>
|
||||||
|
`<symbol id="icon-${_.key}" viewBox="0 0 1024 1024"><path d="${
|
||||||
|
_.path
|
||||||
|
}" /></symbol>`
|
||||||
|
)
|
||||||
|
.join('')}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<section class="tool-bar">
|
||||||
|
${this._parseTools()}
|
||||||
|
</section>
|
||||||
|
<div class="font-layer">
|
||||||
|
<span data-size="6">大号字体</span>
|
||||||
|
<span data-size="5">中号字体</span>
|
||||||
|
<span data-size="3">小号字体</span>
|
||||||
|
</div>
|
||||||
|
<div class="color-layer">
|
||||||
|
<span data-color="#f3f5fb"></span>
|
||||||
|
<span data-color="#dae1e9"></span>
|
||||||
|
<span data-color="#62778d"></span>
|
||||||
|
<span data-color="#58d68d"></span>
|
||||||
|
<span data-color="#3fc2a7"></span>
|
||||||
|
<span data-color="#52a3de"></span>
|
||||||
|
<span data-color="#ac61ce"></span>
|
||||||
|
<span data-color="#ffb618"></span>
|
||||||
|
<span data-color="#e67e22"></span>
|
||||||
|
<span data-color="#ff5061"></span>
|
||||||
|
<span data-color="#ff0000"></span>
|
||||||
|
<span data-color="#000000"></span>
|
||||||
|
</div>
|
||||||
|
<div class="link-layer">
|
||||||
|
<input placeholder="请输入链接地址">
|
||||||
|
<span>插入</span>
|
||||||
|
</div>
|
||||||
|
<div contenteditable="true" class="editor" spellcheck="false"></div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析工具栏
|
||||||
|
_parseTools() {
|
||||||
|
const tools = this.tools || DEFAULT_TOOLS
|
||||||
|
|
||||||
|
return tools
|
||||||
|
.map(
|
||||||
|
it =>
|
||||||
|
`<span data-act="${it}"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-${it}"/></svg>${
|
||||||
|
it === 'image' ? '<input type="file">' : ''
|
||||||
|
}</span>`
|
||||||
|
)
|
||||||
|
.join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this.__EDITOR__.innerHTML
|
||||||
|
}
|
||||||
|
|
||||||
|
set value(val) {
|
||||||
|
if (this.__EDITOR__ && this.__EDITOR__.innerHTML !== val) {
|
||||||
|
this.__EDITOR__.innerHTML = val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
set toolbar(val) {
|
||||||
|
if (val && Array.isArray(val)) {
|
||||||
|
this.tools = val
|
||||||
|
if (this.__TOOLBAR__) {
|
||||||
|
if (this.tools.length) {
|
||||||
|
this.__TOOLBAR__.style.display = 'flex'
|
||||||
|
this.__TOOLBAR__.innerHTML = this._parseTools()
|
||||||
|
} else {
|
||||||
|
this.__TOOLBAR__.style.display = 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存选中
|
||||||
|
saveSelection() {
|
||||||
|
var gs = this.root.getSelection()
|
||||||
|
if (gs.getRangeAt && gs.rangeCount) {
|
||||||
|
this.__SELECT__ = gs.getRangeAt(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除选中并重置选中
|
||||||
|
restoreSelection() {
|
||||||
|
var gs = this.root.getSelection()
|
||||||
|
if (this.__SELECT__) {
|
||||||
|
try {
|
||||||
|
gs.removeAllRanges()
|
||||||
|
} catch (err) {}
|
||||||
|
gs.addRange(this.__SELECT__)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 执行命令
|
||||||
|
exec(cmd, val = '') {
|
||||||
|
document.execCommand(cmd, false, val)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理图片
|
||||||
|
_handleImage(file) {
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('upload', {
|
||||||
|
detail: {
|
||||||
|
file,
|
||||||
|
send: link => {
|
||||||
|
this.__EDITOR__.focus()
|
||||||
|
this.restoreSelection()
|
||||||
|
this.exec(ACTTION.image, link)
|
||||||
|
this.saveSelection()
|
||||||
|
// 修正插入的图片,宽度不得超出容器
|
||||||
|
this.__EDITOR__.querySelectorAll('img').forEach(_ => {
|
||||||
|
_.style.maxWidth = '100%'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
const LINK_INPUT = this.__LINK__.querySelector('input')
|
||||||
|
const FILE_INPUT = this.__TOOLBAR__.querySelector('input')
|
||||||
|
|
||||||
|
document.execCommand('styleWithCSS', null, true)
|
||||||
|
|
||||||
|
// 这里有一个彩蛋
|
||||||
|
if (FILE_INPUT) {
|
||||||
|
FILE_INPUT.addEventListener(
|
||||||
|
'change',
|
||||||
|
ev => {
|
||||||
|
this._handleImage(FILE_INPUT.files[0])
|
||||||
|
},
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 工具栏点击事件
|
||||||
|
this.__toolFn = ev => {
|
||||||
|
if (ev.target === ev.currentTarget) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let target = ev.target
|
||||||
|
while (target.tagName !== 'SPAN') {
|
||||||
|
target = target.parentNode
|
||||||
|
}
|
||||||
|
var act = target.dataset.act
|
||||||
|
var val = ''
|
||||||
|
|
||||||
|
switch (act) {
|
||||||
|
case 'font':
|
||||||
|
this.__COLOR__.classList.remove('fadein')
|
||||||
|
this.__LINK__.classList.remove('fadein')
|
||||||
|
|
||||||
|
if (this.__FONT__.classList.contains('fadein')) {
|
||||||
|
this.__FONT__.classList.remove('fadein')
|
||||||
|
} else {
|
||||||
|
this.__FONT__.classList.add('fadein')
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'color':
|
||||||
|
this.__LINK__.classList.remove('fadein')
|
||||||
|
this.__FONT__.classList.remove('fadein')
|
||||||
|
if (this.__COLOR__.classList.contains('fadein')) {
|
||||||
|
this.__COLOR__.classList.remove('fadein')
|
||||||
|
} else {
|
||||||
|
this.__COLOR__.classList.add('fadein')
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'link':
|
||||||
|
this.__COLOR__.classList.remove('fadein')
|
||||||
|
this.__FONT__.classList.remove('fadein')
|
||||||
|
if (this.__LINK__.classList.contains('fadein')) {
|
||||||
|
this.__LINK__.classList.remove('fadein')
|
||||||
|
} else {
|
||||||
|
this.__LINK__.classList.add('fadein')
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'image':
|
||||||
|
// 这里不作任何处理
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
this.__EDITOR__.focus()
|
||||||
|
this.restoreSelection()
|
||||||
|
this.exec(ACTTION[act])
|
||||||
|
this.saveSelection()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 字体大小设置
|
||||||
|
this.__fontFn = ev => {
|
||||||
|
if (ev.target === ev.currentTarget) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.__FONT__.classList.remove('fadein')
|
||||||
|
this.__EDITOR__.focus()
|
||||||
|
this.restoreSelection()
|
||||||
|
this.exec(ACTTION.font, ev.target.dataset.size)
|
||||||
|
this.saveSelection()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 颜色
|
||||||
|
this.__colorFn = ev => {
|
||||||
|
if (ev.target === ev.currentTarget) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.__COLOR__.classList.remove('fadein')
|
||||||
|
this.__EDITOR__.focus()
|
||||||
|
this.restoreSelection()
|
||||||
|
this.exec(ACTTION.color, ev.target.dataset.color)
|
||||||
|
this.saveSelection()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 超链接
|
||||||
|
this.__linkFn = ev => {
|
||||||
|
if (LINK_INPUT.value) {
|
||||||
|
this.__LINK__.classList.remove('fadein')
|
||||||
|
this.__EDITOR__.focus()
|
||||||
|
this.restoreSelection()
|
||||||
|
this.exec(ACTTION.link, LINK_INPUT.value)
|
||||||
|
this.saveSelection()
|
||||||
|
LINK_INPUT.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//监听鼠标事件的,以缓存选中状态
|
||||||
|
this.__mouseFn = ev => {
|
||||||
|
this.__FONT__.classList.remove('fadein')
|
||||||
|
this.__COLOR__.classList.remove('fadein')
|
||||||
|
this.__LINK__.classList.remove('fadein')
|
||||||
|
this.saveSelection()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 粘贴板事件
|
||||||
|
this.__pasteFn = ev => {
|
||||||
|
ev.preventDefault()
|
||||||
|
|
||||||
|
var txt = ev.clipboardData.getData('text/plain')
|
||||||
|
var items = ev.clipboardData.items
|
||||||
|
|
||||||
|
if (txt) {
|
||||||
|
return this.exec('insertText', txt)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items && items.length) {
|
||||||
|
let blob = null
|
||||||
|
for (let it of items) {
|
||||||
|
if (it.type.indexOf('image') > -1) {
|
||||||
|
blob = it.getAsFile()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this._handleImage(blob)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.__TOOLBAR__.addEventListener('click', this.__toolFn, false)
|
||||||
|
this.__FONT__.addEventListener('click', this.__fontFn, false)
|
||||||
|
this.__COLOR__.addEventListener('click', this.__colorFn, false)
|
||||||
|
this.__LINK_BTN__.addEventListener('click', this.__linkFn, false)
|
||||||
|
this.__EDITOR__.addEventListener('mouseup', this.__mouseFn, false)
|
||||||
|
this.__EDITOR__.addEventListener('paste', this.__pasteFn, false)
|
||||||
|
|
||||||
|
this.__observer = new MutationObserver(_ => {
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('updated', {
|
||||||
|
detail: this.value
|
||||||
|
})
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.__observer.observe(this.__EDITOR__, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
characterData: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
this.__TOOLBAR__.removeEventListener('click', this.__toolFn)
|
||||||
|
this.__FONT__.removeEventListener('click', this.__fontFn)
|
||||||
|
this.__COLOR__.removeEventListener('click', this.__colorFn)
|
||||||
|
this.__LINK_BTN__.removeEventListener('click', this.__linkFn)
|
||||||
|
this.__EDITOR__.removeEventListener('mouseup', this.__mouseFn)
|
||||||
|
this.__EDITOR__.removeEventListener('paste', this.__pasteFn)
|
||||||
|
|
||||||
|
this.__observer.disconnect()
|
||||||
|
}
|
||||||
|
|
||||||
|
attributeChangedCallback(name, old, val) {
|
||||||
|
switch (name) {
|
||||||
|
case 'toolbar':
|
||||||
|
if (typeof val === 'string') {
|
||||||
|
try {
|
||||||
|
val = val.split(',')
|
||||||
|
} catch (err) {}
|
||||||
|
}
|
||||||
|
this.toolbar = val
|
||||||
|
break
|
||||||
|
|
||||||
|
case 'value':
|
||||||
|
this.value = val
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('do-neditor', Nedtior)
|
||||||
Reference in New Issue