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

  
  

Da wir nun das Aktionsobjekt haben, wie verwenden wir es? Dies hängt von der Funktion init() ab. Sie wählt nach bestimmten Regeln Elemente aus dem Aktionsobjekt aus, um ein Array zu bilden. Jedes Element im Array generiert eine Schaltfläche. „settings.actions“ im folgenden Code ist dieses Array, dessen Elemente jeweils einer in der Symbolleiste angezeigten Schaltfläche entsprechen. Die Generierungsregeln von Settings.actions werden später erläutert.

// 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)
})

Auf diese Weise generiert jedes Element im Array eine Schaltfläche in der Symbolleiste.

Initialisierungsfunktion init()

Wenn Sie den Pell-Editor verwenden möchten, rufen Sie einfach die Funktion init() auf, um einen Editor zu initialisieren. Es erhält ein Einstellungsobjekt als Parameter, das einige Eigenschaften wie diese enthält:

• element: das DOM-Element des Editors

• styleWithCSS: gesetzt auf Wenn wahr, werden anstelle von

• Aktionen verwendet

• onChange

• 
  

Das Wichtigste sind Aktionen, das ist ein Array enthält die Liste der Schaltflächen, die Sie in der Symbolleiste anzeigen möchten.

Das Aktionsarray kann die folgenden Elemente haben:

• 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))
  }
 },
 // ...
]

zu generieren Die Funktion init() kombiniert diesen Aktionsparameter mit dem in pell.js definierten Aktionsobjekt. Sie können das Aktionsobjekt als Standardeinstellung verwenden:

// 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])

Wenn die Parameterobjekteinstellung dies tut not Wenn das Actions-Array enthalten ist, wird das zuvor definierte Actions-Objekt standardmäßig initialisiert.

Ein wichtiger Teil der init()-Funktion besteht darin, einen bearbeitbaren Bereich zu erstellen. Dabei wird ein p-Element erstellt und dessen contentEditable-Attribut auf true gesetzt, sodass das zuvor erwähnte Dokument .execCommand verwendet werden kann ()-Befehl.

// 创建编辑区域的元素
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)

Prozessorganisation

Nehmen Sie abschließend „Link einfügen“ als Beispiel, um den gesamten Editorprozess zu sortieren:

1. Beim Aufruf der Funktion init() , Fügen Sie das folgende Element zum Aktionsarray des Parameterobjekts hinzu

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

2. Während des laufenden Prozesses von init() wird geprüft, ob das definierte Aktionsobjekt das Link-Attribut hat. Nach der Überprüfung existiert das Attribut tatsächlich

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

Da der eingehende Parameter das Ergebniselement enthält, wird das eingehende Ergebnis verwendet, um den Standardwert im Linkobjekt zu ersetzen, und dann wird das geänderte Linkobjekt im platziert Settings.actions-Array.

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!