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

  
  

// 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 : l'élément DOM de l'éditeur

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

• onChange

• 
  

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

// 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. 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!