Un moyen simple d'implémenter un éditeur de texte enrichi JavaScript

Je cherchais des informations sur les éditeurs de texte enrichi il y a quelque temps, puis j'ai découvert ce projet appelé Pell. Il s'agit d'un éditeur de texte WYSIWYG (What You See Is What You Get). Bien que sa fonction soit très simple, il. Étonnamment, sa taille n'est que de 1 Ko. Le fichier principal du projet, pell.js, ne comporte que 130 lignes. Même si d'autres parties sont ajoutées, le nombre total de js est inférieur à 200 lignes. Cet article présente principalement la méthode d'implémentation d'un éditeur de texte enrichi avec moins de 200 lignes de code JavaScript. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Le code principal du projet est dans le fichier pell.js. Sa structure est très simple. La mise en œuvre des fonctions principales dépend des parties suivantes

• actions. objet

• fonction exec()

• fonction init()
  

Document. execCommand()

Commençons par la partie la plus simple. La fonction exec() n'a que les trois lignes suivantes :

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

Elle enveloppe document.execCommand() de manière simple, Document. .execCommand() est le cœur de cet éditeur. Sa syntaxe est la suivante :

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

• aCommandName est une chaîne représentant la commande que vous souhaitez exécuter, telle que : bold 'bold. ', créez le lien 'createLink', changez la taille de la police 'fontSize' etc.

• aShowDefaultUI Indique s'il faut afficher l'interface utilisateur par défaut

• aValueArgument Certaines commandes nécessitent une saisie supplémentaire, comme insert L'adresse doit être donnée pour les images et les liens
  

Remarque : Après mes expériences, changer la valeur de aShowDefaultUI sous Chrome n'a aucun effet Ceci est mentionné dans cette question stackoverflow. Il s'agit d'un paramètre de l'ancienne version d'IE, il peut donc être défini sur false ici.

Objet actions

Un objet nommé actions est défini dans le fichier, qui correspond à la rangée de boutons de la barre d'outils dans la figure ci-dessous. Chaque sous-objet dans les actions enregistre une propriété de bouton. .

Partie du code :

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')
  },
  // …
}

Ce code affiche trois attributs d'objet nommés gras, italique et souligné, qui correspondent aux caractères gras, italique et souligné devant la barre d'outils. . Boutons, on constate que leurs structures sont les mêmes, avec les trois attributs suivants :

• icône : Comment afficher

• titre : C'est le titre

• résultat : une fonction qui sera assignée au bouton en tant qu'événement de clic et appellera la fonction exec() mentionnée précédemment pour faire fonctionner le texte

  
  

Maintenant que nous avons l'objet actions, comment l'utiliser ? Cela dépend de la fonction init(). Elle sélectionnera des éléments de l'objet actions pour former un tableau selon certaines règles. Chaque élément du tableau générera un bouton. settings.actions dans le code ci-dessous se trouve ce tableau dont chaque élément correspond à un bouton affiché sur la barre d'outils. Les règles de génération de settings.actions seront expliquées plus tard.

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

De cette façon, chaque élément du tableau génère un bouton sur la barre d'outils.

Fonction d'initialisation init()

Lorsque vous souhaitez utiliser l'éditeur pell, appelez simplement la fonction init() pour initialiser un éditeur. Il reçoit un objet de configuration en tant que paramètre, qui contient des propriétés comme celle-ci :

• element : l'élément DOM de l'éditeur

• styleWithCSS : défini sur Lorsque c'est vrai, sera utilisé à la place des actions

• onChange

• 
  

Le plus important, ce sont les actions, qui sont un array , contient la liste des boutons que vous souhaitez afficher dans la barre d'outils.

Le tableau actions peut avoir les éléments suivants :

• Une chaîne

• Un objet avec un attribut name

• Un objet sans attribut de nom, mais avec les attributs nécessaires icône, résultat, etc. pour générer un bouton

  
  

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

dans La fonction init () combinera ce paramètre d'actions avec l'objet d'actions défini dans pell.js. Vous pouvez utiliser l'objet d'actions comme paramètre par défaut :

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

Si le paramètre d'objet de paramètre le fait. not Si le tableau actions est inclus, l'objet actions précédemment défini sera initialisé par défaut.

Une partie importante de la fonction init() consiste à créer une zone modifiable Ici, un élément p est créé et son attribut contentEditable est défini sur true, afin que le document mentionné précédemment puisse être utilisé ici. () commande.

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

Organisation du processus

Enfin, prenez « Insérer un lien » comme exemple pour trier l'ensemble du processus de l'éditeur :

Lors de l'appel de la fonction init(). , Ajoutez l'élément suivant au tableau d'actions de l'objet paramètre

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

2. Pendant le processus d'exécution de init(), il vérifiera si l'objet d'actions défini a l'attribut de lien. Après vérification, l'attribut existe

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

Étant donné que le paramètre entrant contient l'élément de résultat, le résultat entrant est utilisé pour remplacer la valeur par défaut dans l'objet lien, puis l'objet lien modifié est placé dans le tableau settings.actions.

3. Parcourez le tableau settings.actions pour générer la barre d'outils. L'objet lien est utilisé comme l'un des éléments pour générer un bouton "Insérer un lien". La propriété result devient son événement click.

4. Après avoir cliqué sur le bouton "Insérer un lien", il vous sera demandé de saisir une URL, puis d'appeler exec('createLink', url) pour insérer le lien dans la zone d'édition.

Le processus fonctionnel des autres boutons de l'éditeur est également similaire.

De cette façon, la plupart du contenu de l'éditeur Pell a été expliqué, et vous devez encore regarder le code source pour les parties restantes. Après tout, le code du projet n’est pas long, c’est donc une bonne introduction à l’éditeur de texte.

Recommandations associées :

L'éditeur Baidu ajoute une fonction de filigrane d'image

Quatre éditeurs HTML en ligne gratuits et faciles à utiliser

Implémentation JavaScript de la syntaxe de l'éditeur de zone de saisie mettant en évidence les idées et les détails du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!