Eine einfache Möglichkeit, einen JavaScript-Rich-Text-Editor zu implementieren

Ich habe vor einiger Zeit nach Informationen zu Rich-Text-Editoren gesucht und dann dieses Projekt namens „What You See Is What You Get“ (WYSIWYG) entdeckt Überraschenderweise ist es nur 1 KB groß. Die Kerndatei des Projekts, pell.js, hat nur 130 Zeilen. Selbst wenn andere Teile hinzugefügt werden, beträgt die Gesamtzahl der js weniger als 200 Zeilen. In diesem Artikel wird hauptsächlich die Methode zur Implementierung eines Rich-Text-Editors mit weniger als 200 Zeilen JavaScript-Code vorgestellt. Ich hoffe, dass er allen helfen kann.

Der Hauptcode des Projekts befindet sich in der Datei pell.js. Die Implementierung der Hauptfunktionen hängt von den folgenden Teilen ab:

• Aktionen Objekt

• exec()-Funktion

• init()-Funktion
  

Dokument. execCommand()

Beginnen wir mit dem einfachsten Teil. Die Funktion exec() hat nur die folgenden drei Zeilen:

export const exec = (command, value =null) => {
  document.execCommand(command, false, value);
};

Sie umschließt document.execCommand() auf einfache Weise, Document .execCommand( ) ist der Kern dieses Editors. Seine Syntax ist wie folgt:

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

• aCommandName ist eine Zeichenfolge, die den Befehl darstellt, den Sie ausführen möchten, wie zum Beispiel: fett 'bold ', Link erstellen 'createLink', Schriftgröße ändern 'fontSize' usw.

• aShowDefaultUI Ob die Standardbenutzeroberfläche angezeigt werden soll

• aValueArgument Einige Befehle erfordern zusätzliche Eingaben, wie zum Beispiel „Einfügen“. Für Bilder und Links muss die Adresse angegeben werden
  

Hinweis: Nach meinen Experimenten hat das Ändern des Werts von aShowDefaultUI unter Chrome keine Auswirkung . Dies wird in dieser Stackoverflow-Frage erwähnt. Es handelt sich um einen Parameter aus der alten Version von IE, daher kann er hier auf den Standardwert „false“ gesetzt werden.

actions-Objekt

In der Datei ist ein Objekt mit dem Namen „actions“ definiert, das der Schaltflächenreihe in der Abbildung unten entspricht. Jedes Unterobjekt in „actions“ speichert eine Schaltflächeneigenschaft .

Teil des Codes:

const actions = {
  bold: {
    icon: '<b>B</b>',
    title: 'Bold',
    result: ()=> exec('bold')
  },
  italic: {
    icon: '<i>I</i>',
    title: 'Italic',
    result: ()=> exec('italic')
  },
  underline: {
    icon: '<u>U</u>',
    title: 'Underline',
    result: ()=> exec('underline')
  },
  // …
}

Dieser Code zeigt drei Objektattribute mit den Namen Fett, Kursiv und Unterstrichen an, die den Fett-, Kursiv- und Unterstreichungen vorne in der Symbolleiste entsprechen . Schaltflächen, es ist ersichtlich, dass ihre Strukturen gleich sind, mit den folgenden drei Attributen:

• Symbol: So zeigen Sie

• Titel: Es ist der Titel

• Ergebnis: eine Funktion, die der Schaltfläche als Klickereignis zugewiesen wird und die zuvor erwähnte exec()-Funktion aufruft, um den Text zu bedienen

  
  

// pell.js 中的 init() 函数
settings.actions.forEach(action=> {
  // 新建一个按钮元素
  const button = document.createElement('button')
  // 给按钮加上 css 样式
  button.className = settings.classes.button
  // 把 icon 属性作为内容显示出来
  button.innerHTML = action.icon
  button.title = action.title
  // 把 result 属性赋给按钮作为点击事件
  button.onclick = action.result
  // 将创建的按钮添加到工具栏上
  actionbar.appendChild(button)
})

• element: das DOM-Element des Editors

• styleWithCSS: gesetzt auf Wenn wahr, werden anstelle von

• Aktionen verwendet

• onChange

• 
  

• Eine Zeichenfolge

• Ein Objekt mit einem Namensattribut

• Ein Objekt ohne Namensattribut, aber mit den notwendigen Attributen Symbol, Ergebnis usw., um eine Schaltfläche

  
  

actions: [
 'bold',
 'underline',
 'italic',
 {
  name: 'image',
  result: ()=> {
   const url = window.prompt('Enter the image URL')
   if (url) window.pell.exec('insertImage', ensureHTTP(url))
  }
 },
 // ...
]

// pell.js 中的 init() 函数
settings.actions = settings.actions
  ? settings.actions.map(action=> {
    if (typeof action === 'string') return actions[action]
    // 如果参数中传入的 action 已经在默认设置中存在，用传入的参数覆盖默认设置
    else if (actions[action.name]) {
      return { ...actions[action.name], ...action }
    }
    return action
  })
  : Object.keys(actions).map(action=> actions[action])

// 创建编辑区域的元素
settings.element.content = document.createElement('p')
// 让 p 成为可编辑状态
settings.element.content.contentEditable = true
settings.element.content.className = settings.classes.content
// 当用户输入时，更新页面的相应部分
settings.element.content.oninput = event=> 
  settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)

{
  name: 'link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) window.pell.exec('createLink', ensureHTTP(url))
  }
}

link: {
  icon: '',
  title: 'Link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) exec('createLink', url)
  }
}

3. Durchlaufen Sie das Array „settings.actions“, um die Symbolleiste zu generieren. Das Linkobjekt wird als eines der Elemente zum Generieren einer Schaltfläche „Link einfügen“ verwendet. Die Ergebniseigenschaft wird zu ihrem Klickereignis.

4. Nachdem Sie auf die Schaltfläche „Link einfügen“ geklickt haben, werden Sie aufgefordert, eine URL einzugeben und dann exec('createLink', url) aufzurufen, um den Link in den Bearbeitungsbereich einzufügen.

Auch der Funktionsablauf anderer Buttons im Editor ist ähnlich.

Auf diese Weise wurde der größte Teil des Inhalts des Pell-Editors erklärt, und Sie müssen sich für die restlichen Teile noch den Quellcode ansehen. Schließlich ist der Code des Projekts nicht lang und bietet daher eine gute Einführung in den Texteditor.

Verwandte Empfehlungen:

Baidu-Editor fügt Bildwasserzeichenfunktion hinzu

Vier benutzerfreundliche kostenlose Online-HTML-Editoren

JavaScript-Implementierung der Syntax des Eingabefeld-Editors, die Ideen und Codedetails hervorhebt

Das obige ist der detaillierte Inhalt vonEine einfache Möglichkeit, einen JavaScript-Rich-Text-Editor zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!