自作WYSIWYGエディタのboldボタンが上手く動かない

いつもお世話になっています。

表題の通り、WYSIWYGエディタを自作しており、boldボタンを押したときに文字を太字にしたいのですが、上手くいきません。

やりたいこと

https://codepen.io/Shokeen/pen/pgryyN?editors=1010

上記のリンクの様に、Bボタンを押したときに文字を太字にしたい。

エラーの状況

consoleで確認したところ、エラーの表記はありませんでした。

コード

#index.html

<html>
<head>
  <title>WYSIWYGの練習</title>
  <meta http-equiv="content-type" charset="utf-8">
  <script type="text/javascript" src="wysiwyg.js"></script>
</head>
<body>
  <div id="toolbar">
    <a href="#" data-command="bold">B</a>
    <div id="editor" contenteditable>
      <p>This is WYSIWYG</p>
    </div>
  </div>
</body>
</html>

js
1#wysiwyg.js
2
3function startWYSIWYG(){
4  function wysiwygGet(element){
5    let command = element.getAttribute('data-command');
6    document.execCommand(command,false,null);
7   };
8
9  let editorTags = document.querySelectorAll('#toolbar a');
10  for(let i = 0; i < editorTags.length; i++){
11    editorTags[i].addEventListener('click',wysiwygGet,false);
12  };
13};
14
15 document.addEventListener('load',startWYSIWYG,false);

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

自己解決できました。

function startWYSIWYG(){

let editorTags = document.querySelectorAll('#toolbar a');
for(let i = 0; i < editorTags.length; i++){
editorTags[i].addEventListener('click',wysiwygGet,false);
};
};

function wysiwygGet(){
  let command = this.getAttribute('data-command');
  document.execCommand(command,false,null);
};

window.addEventListener('load',startWYSIWYG,false);

修正した個所は、

・wysiwygGet関数をlet command = this.getAttribute('data-command');に代えた。

・documentではなく、window.addEventListener('load',startWYSIWYG,false);に修正

しました。

投稿2018/09/02 05:56

退会済みユーザー

総合スコア0