扩展 UI Kit

来对 UI Kit 进行扩展。 Custom Elements 标准。 Editor.UI.registerElement(tagName, prototype) 我们可以很轻松的注册自定义元素。这里 有一个简单的范例。

  1. Editor.UI.registerElement('foobar-label', {  template: `    <div class="text">Foobar</div>  `,  style: `    .text {      color: black;      padding: 2px 5px;      border-radius: 3px;      background: #09f;    }  `});

<foobar-label> 这个元素。 自定义界面元素定义参考。

内容分布

<content> 标签加以说明。 这个过程我们称作“内容分布”。 <foobar-label> 不只是显示 Foobar ，而是根据我们加入的内容进行显示，例如：

  1.   <foobar-label>Hello World</foobar-label>

这个时候就需要使用内容分发功能。我们可以对之前的范例做一个小小的更改：

  1.   template: `    <div class="text">      <content></content>    </div>  `

<content> 标签告诉样板，我们希望将用户内容放置在这个地方。

内容分布选择器

有些元素位于另外的标签中。这个时候就可以考虑使用内容分发选择器。考虑如下样例：

  1.   <foobar-label>    <div class="title">Hello World</div>    <div class="body">This is Foobar</div>  </foobar-label>

.title 和 .body 元素内容区分对待，我们可以做如下代码：

  1.   template: `    <div class="text title">      <content select=".title"></content>    </div>    <div class="text body">      <content select=".body"></content>    </div>  `

<content> 标签中加入 select 属性，我们可以利用选择器来分布内容。