46日目 割烹芸人の開発6
ひたすら…… コードを……
今回はEditor.jsのカスタムインラインを作っていきます。
デフォルトでは、強調、斜体、リンクの3つが使えるようになってます。
これにあと、下線と取り消し線を追加していきます。
class UnderLine{
static get isInline(){
return true;
}
static get title(){
return 'Under Line';
}
constructor({api}){
this.api = api;
this.button = null;
this.tag = 'U';
}
render(){
this.button = document.createElement('button');
this.button.type = 'button';
this.button.textContent = 'u';
this.button.classList.add(this.api.styles.inlineToolButton);
return this.button;
}
static get sanitize() {
return {
u: {}
};
}
}
まずはUnderLineクラスを作って、isInlineをtrue, title指定、コンストラクタとレンダー、サニタイズを指定します。
終わったら、選択した時の処理を作っていきます。
surround(range) {
if (!range) {
return;
}
let termWrapper = this.api.selection.findParentTag(this.tag);
if (termWrapper) {
this.unwrap(termWrapper);
} else {
this.wrap(range);
}
}
wrap(range) {
let del = document.createElement(this.tag);
del.appendChild(range.extractContents());
range.insertNode(del);
this.api.selection.expandToTag(del);
}
unwrap(termWrapper) {
this.api.selection.expandToTag(termWrapper);
let sel = window.getSelection();
let range = sel.getRangeAt(0);
let unwrappedContent = range.extractContents();
termWrapper.parentNode.removeChild(termWrapper);
range.insertNode(unwrappedContent);
sel.removeAllRanges();
sel.addRange(range);
}
checkState() {
const termTag = this.api.selection.findParentTag(this.tag);
this.button.classList.toggle(this.api.styles.inlineToolButtonActive, !!termTag);
}
WrapとUnWrapでタグの付け外しができるようになります。
なお、このクラスのUタグをSタグに変えると取り消し線に使えます。
ということで完成版
class UnderLine{
static get isInline(){
return true;
}
static get title(){
return 'Under Line';
}
constructor({api}){
this.api = api;
this.button = null;
this.tag = 'U';
}
render(){
this.button = document.createElement('button');
this.button.type = 'button';
this.button.textContent = 'u';
this.button.classList.add(this.api.styles.inlineToolButton);
return this.button;
}
surround(range) {
if (!range) {
return;
}
let termWrapper = this.api.selection.findParentTag(this.tag);
if (termWrapper) {
this.unwrap(termWrapper);
} else {
this.wrap(range);
}
}
wrap(range) {
let del = document.createElement(this.tag);
del.appendChild(range.extractContents());
range.insertNode(del);
this.api.selection.expandToTag(del);
}
unwrap(termWrapper) {
this.api.selection.expandToTag(termWrapper);
let sel = window.getSelection();
let range = sel.getRangeAt(0);
let unwrappedContent = range.extractContents();
termWrapper.parentNode.removeChild(termWrapper);
range.insertNode(unwrappedContent);
sel.removeAllRanges();
sel.addRange(range);
}
checkState() {
const termTag = this.api.selection.findParentTag(this.tag);
this.button.classList.toggle(this.api.styles.inlineToolButtonActive, !!termTag);
}
static get sanitize() {
return {
u: {}
};
}
}
class Del{
static get isInline(){
return true;
}
static get title(){
return 'delete';
}
constructor({api}){
this.api = api;
this.button = null;
this.tag = 'S';
}
render(){
this.button = document.createElement('button');
this.button.type = 'button';
this.button.textContent = 's';
this.button.classList.add(this.api.styles.inlineToolButton);
return this.button;
}
surround(range) {
if (!range) {
return;
}
let termWrapper = this.api.selection.findParentTag(this.tag);
if (termWrapper) {
this.unwrap(termWrapper);
} else {
this.wrap(range);
}
}
wrap(range) {
let del = document.createElement(this.tag);
del.appendChild(range.extractContents());
range.insertNode(del);
this.api.selection.expandToTag(del);
}
unwrap(termWrapper) {
this.api.selection.expandToTag(termWrapper);
let sel = window.getSelection();
let range = sel.getRangeAt(0);
let unwrappedContent = range.extractContents();
termWrapper.parentNode.removeChild(termWrapper);
range.insertNode(unwrappedContent);
sel.removeAllRanges();
sel.addRange(range);
}
checkState() {
const termTag = this.api.selection.findParentTag(this.tag);
this.button.classList.toggle(this.api.styles.inlineToolButtonActive, !!termTag);
}
static get sanitize() {
return {
s: {}
};
}
}
あとはこれをEditor.js本体に読み込ませれば使えるようになります。
tools: {
u:{
class:UnderLine,
shortcut: 'CMD+U'
},
s:{
class:Del,
shortcut:'CMD+S'
}
}
ショートカットキーも指定しておきます。PCで書いている人はショートカットキーでも操作できるようになります。
ということでこれでインラインもできました。
ついでに装飾の方も追加してみました。
文字色、背景色、文字サイズを変更できます。
リンクを付ける場合は、先にリンクを追加してから装飾してください。
今のところ後からリンクを付けると装飾が無効になります。
じーーーー
