使用しているもの・環境
laravel 8 markdown.js jQuery
実装したいこと
1.ブラウザ上にテキストを表示(divタグで表示)
2.1をクリックすると、textareaが表示され、テキストの編集ができる(1で書かれていたテキストがそのままtextareaに表示される。divタグがtextareaタグに置き換わったイメージ)
3.textarea上部にマークダウンを付与できるボタン(太字・斜体・下線・右寄せなど)を表示し、任意のボタンを押すとマークダウンベースのテキストがtextareaに反映される。(markdown.jsで実装)
textareaに反映されるマークダウンテキスト↓ 太字→## ここにテキストを入れてください 斜体→_ここにテキストを入れてください_ 下線→<u>ここにテキストを入れてください</u> リンク→[ここにテキストを入れてください](URLを入れてください)
4.textarea以外の部分をクリックすると、1の状態に戻る(foucusoutで実装)
ソースコード
**blade** <div class="textarea_wrap"> <div id="textarea-view"> textareaに入力したテキストが表示されます。 </div> </div>
**jquery** $('.textarea_wrap').each(function(){ // クリック時、テキスト部分がtextareaに変更される $(document).on('click', '#textarea-view', function (e) { let inputElement = $('<textarea id="textarea-input" class="cms-f-edit-textarea">' + '</textarea>'); //#textarea-viewは非表示にする $("#textarea-view").addClass('cms-none'); $("#textarea-view").prepend(inputElement); inputElement.focus(); // マークダウンテキスト付与ボタン let text_editer = '<div class="text_editer">'; text_editer += '<div class="flex">'; text_editer += '<div class="editer_bold">太字</div>'; text_editer += '<div class="editer_italic">斜体</div>'; text_editer += '<div class="editer_underline">下線</div>'; text_editer += '<div class="editer_rightAlign">右寄せ</div>'; text_editer += '<div class="editer_link">リンク</div>'; text_editer += '</div>'; text_editer += '</div>'; $(this).append(text_editer); // 太字ボタンを押したときの挙動 $(document).on('click', '.editer_bold', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '## ここにテキストを入れてください' + foot; $(inputElement).val(newValue); }); // 斜体を押したときの挙動 $(document).on('click', '.editer_italic', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '_ここにテキストを入れてください_' + foot; $(inputElement).val(newValue); }); // 下線を押したときの挙動 $(document).on('click', '.editer_underline', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '<u>ここにテキストを入れてください</u>' + foot; $(inputElement).val(newValue); }); // 右寄せ $(document).on('click', '.editer_rightAlign', function(){ $('.section_textarea').css('text-align','right'); }); // リンク $(document).on('click', '.editer_link', function(){ let elm = $(inputElement)[0]; let value = $(inputElement).val(); let head = value.slice(0,elm.selectionStart); let foot = value.slice(elm.selectionEnd); let newValue = head + '[ここにテキストを入れてください](URLを入れてください)' + foot; $(inputElement).val(newValue); }); }); // 入力欄にフォーカスイン時、フォーカスアウトのイベントを埋め込む $(document).on('focusin', '#textarea-input', function (e) { let element = $(e.target); element.on('focusout', function (e) { // マークダウンされた結果を反映 var html = marked.parse($(this).val()); $('#textarea-input').html(html); $('.text_editer').remove(); textFocusOut('#textarea-view', '#textarea-input'); }); }); }); **textFocusOut 関数** function textFocusOut(viewId, inputId) { let viewObj = $('#' + viewId); let inputObj = $('#' + inputId); let inputValue = inputObj.val(); viewObj.off('focusout'); let saveBlockObj = {}; saveBlockObj.sectionId = inputObj.data('section'); saveBlockObj.sectionPartsId = inputObj.data('sectionparts'); saveBlockObj.sectionPartsType = inputObj.data('partstype'); saveBlockObj.sectionContent = inputValue; }
困っていること・知りたいこと
マークダウン付与ボタンのクリックイベントが発火しないため、textareaに入力されず、foucusoutされてしまい、1の状態になってしまう。
(console.logをクリックイベントに付けたが、表示されなかった)
・foucusoutを無くすとマークダウン付与ボタンによる入力はできるが、
1の状態に戻すことができず、テキストがマークダウン化されているか分からない。
実装部品の状態
1.「.text_editer」はposition: absolute; を付与して、「#textarea-input」上部に表示される
2.「#textarea-input」にposition: relative;を付与しても「.text_editer」の親要素にできないため、「.textarea_wrap」を親要素にしている。
「.textarea_wrap」を親要素にしているから、foucusoutが発火してしまうと思うのですが、ここじゃないと「.text_editer」が表示できないし…と、うまくできなくて悩んでいます。
マークダウン付与ボタンのクリックイベントをfoucusoutに邪魔させず発火させるには、
どうしたら良いのか、教えて頂きたいです。
よろしくお願いします。
あなたの回答
tips
プレビュー