質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.08%

WEBページにおけるMarkdown エディタの不具合

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 574

math346613

score 24

 Markdownエディタが思い通りに動きません

WEBページにMarkdownエディタを実装するためにsimplemde-markdown-editorを導入しました

 発生している問題・エラーメッセージ

toobarのボタンを押すとそれに対応したものがtextareaに出力されます
例:Hボタンなら#,Bボタンなら****など

そしてプレビューボタンを押すとそれがmarkdown方式に従って変換されます

今回のエラー内容としては
ボタンを押すとtextareaに出力されるのですがプレビューボタンを押しても変換されないことです
Laravel中では上手く動作しないのですが静的なHTML上では動作します

試したこと

両者の違いとしてはボタンを押した後の入力位置です

上手く動作する静的なHTMLではHボタンを押した後には#と出力され、その後の入力位置は#の後になります(#に続く形)
しかし上手く動作しないLaravelではHボタンを押した後には#と出力され、その後の入力位置は#の前となります
B(太字)ボタンの場合は****と両者とも出力されますが同様に
静的なHTMLの場合
**

**
の間が入力位置となりますがLaravelの場合は一番左端からになります

またLaravelの場合はtextareaの全選択が出来ずに文頭に入力位置が移るという挙動をします

分かりにくい説明になりましたがご回答のほどよろしくお願いいたします。

コード

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @yield('meta')

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title')</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/jquery.tagsinput.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>


    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Fonts -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.tagsinput.min.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">

    <style>
    body {
        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'
    }
    </style>
</head>
<body>
    <div id="app">
        <header>
            @include('layouts.nav')
        </header>
        <main>
            @yield('content')
        </main>
        <footer>
            @include('layouts.footer')
        </footer>
    </div>
    @yield('script')
</body>
</html>
@extends('layouts.app')

@section('title')
記事投稿 
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    記事を投稿する
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('articles.store')}}">
                        @csrf
                        <div class="form-group row">
                            <label for="title" class="col-12 col-form-label">{{ __('Title') }}</label>

                            <div class="col-12">
                                <input id="title" type="text" name="title" value="{{ old('title') }}"
                                    class="form-control{{ $errors->has('title') ? ' is-invalid' : '' }}"
                                    required autofocus>

                                @if($errors->has('title'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('title')}}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="tags" class="col-12 col-form-label">{{ __('Tags') }}</label>

                            <div class="col-12">
                                <input id="tags" type="text" name="tags" value="{{ old('tags') }}"
                                    class="form-control{{ $errors->has('tags') ? ' is-invalid' : '' }}"
                                    required>

                                @if($errors->has('tags'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('tags') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-12 d-inline-flex justify-content-between">
                                <label for="body" class="col-form-label">本文</label>
                                <button type="button" name="button" class="btn btn-primary">テンプレート</button>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-12">
                                <textarea id="editor" name="body" rows="8" cols="80"></textarea>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg btn-block">
                                    投稿
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
var simplemde = new SimpleMDE({
  element: document.getElementById("editor"),
});
</script>
@endsection
<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->

    <title>Sample</title>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

    </script>

    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Fonts -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">

    <style>
    body {
        font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'
    }
    </style>
</head>
<body>
    <div id="app">
        <header>
        </header>
        <main>
          <textarea id="editor" name="name" rows="8" cols="80"></textarea>
        </main>
        <footer>
        </footer>
    </div>
</body>
<script>
var simplemde = new SimpleMDE({
  element: document.getElementById("editor"),
});
</script>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る