app/Plugin/TabaHtmlEditor2/Resource/template/admin/snippet/editor.twig line 1

Open in your IDE?
  1. {#
  2. Copyright (C) SPREAD WORKS Inc. All Rights Reserved.
  3. For the full copyright and license information, please view the LICENSE
  4. file that was distributed with this source code.
  5. #}
  6. {% set const = TabaHtmlEditor2Constants %}
  7. {% set bind_prefix = constant('ADMIN_BIND_PREFIX',const) %}
  8. {% set trans_prefix = constant('PLUGIN_CODE_LC',const)~'.admin' %}
  9. {% set userConfig = TabaHtmlEditor2UserConfig %}
  11. <script src="{{ path(bind_prefix~'_assets',{file:'js/sw-html-editor.js'}) }}"></script>
  13. {# オリジナルプラグイン読み込み #}
  14. <script src="{{ path(bind_prefix~'_assets',{file:'js/trumbowyg.blocktemplate.js'}) }}"></script>
  15. <script src="{{ path(bind_prefix~'_assets',{file:'js/trumbowyg.formattingset.js'}) }}"></script>
  18. <script>
  19. $(function() {
  20.     {% for selector in selectors %}
  21.         if ($("{{ (selector.name is defined ? selector.name : selector)|raw }}")[0]) {
  22.             $("{{ (selector.name is defined ? selector.name : selector)|raw }}").trumbowyg({
  23.                 lang: 'ja',
  24.                 btns: [
  25.                     ['viewHTML'],
  26.                     ['undo', 'redo'], // Only supported in Blink browsers
  27.                     //['formatting'],
  28.                     ['originalformattingset'], //【オリジナル】オリジナルフォーマット・カスタムHTML
  29.                     ['blocktemplate'],//【オリジナル】ブロックテンプレート追加
  30.                     ['strong', 'em', 'del'],
  31.                     ['superscript', 'subscript'],
  32.                     ['link'],
  33.                     ["insertImage","swfilemanager"],//画像とファイル管理
  34.                     ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
  35.                     ['unorderedList', 'orderedList'],
  36.                     ['horizontalRule'],
  37.                     ['removeformat'],
  38.                     ['fullscreen'],
  39.                 ],
  40.                 plugins: {
  41.                     
  42.                     //【オリジナル】オリジナルフォーマット・カスタムHTML
  43.                     originalformattingset: true,
  45.                     //【オリジナル】ブロックテンプレート
  46.                     blocktemplates: [
  47.                         {
  48.                             name: '左画像右テキスト',
  49.                             html: '<div class="mediaset img-small img-left "><div class="imgbox"><img src="/html/template/kinkodo/assets/assets/images/dummy.jpg" alt=""></div><div class="txtbox"><p class="title">小見出し</p><div class="text"><p>テキストが入ります。テキストが入ります。テキストが入ります。<a href="/">リンク</a><strong>強調</strong><span class="big">大文字</span></p></div><div class="btn"><a href="/">リンクテキスト</a></div></div></div>'
  50.                         },
  51.                         {
  52.                             name: '右画像左テキスト',
  53.                             html: '<div class="mediaset img-small img-right "><div class="imgbox"><img src="/html/template/kinkodo/assets/assets/images/dummy.jpg" alt=""></div><div class="txtbox"><p class="title">小見出し</p><div class="text"><p>テキストが入ります。テキストが入ります。テキストが入ります。<a href="/">リンク</a><strong>強調</strong><span class="big">大文字</span></p></div><div class="btn"><a href="/">リンクテキスト</a></div></div></div>'
  54.                         },
  55.                         {
  56.                             name: '表ブロック',
  57.                             html: '<div class="tableset type-normal"><table><tbody><tr><th>項目が入ります</th><td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td></tr><tr><th>項目が入ります</th><td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td></tr><tr><th>項目が入ります</th><td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td></tr><tr><th>項目が入ります</th><td>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</td></tr></tbody></table></div>'
  58.                         }
  59.                     ]
  60.                 },
  61.                 {% if userConfig.get('editor') is empty or userConfig.get('editor').semantic is not defined %}
  62.                     semantic: {'div':'div','i':'i'},
  63.                 {% else %}
  64.                     {% if userConfig.get('editor').semantic is iterable %}
  65.                         semantic: {
  66.                             {% for row in userConfig.get('editor').semantic %}{% for key in row|keys %}
  67.                                 '{{ key }}': '{{ attribute(row,key) }}',
  68.                             {% endfor %}{% endfor %}
  69.                         },
  70.                     {% elseif userConfig.get('editor').semantic == true %}
  71.                         semantic: true,
  72.                     {% else %}
  73.                         semantic: {'div':'div','i':'i'},
  74.                     {% endif %}
  75.                 {% endif %}
  76.                 {% if userConfig.get('editor') is empty or (userConfig.get('editor').script is not defined or (userConfig.get('editor').script is not empty and userConfig.get('editor').script == true)) %}tagsToRemove: ['script'],{% endif %}
  77.            }){% if selector.config.WYSIWYG is defined and selector.config.WYSIWYG == false %}.trumbowyg('toggle'){% endif %};
  80.         }
  81.     {% endfor %}
  82. });
  83. </script>
  85.         <style>
  86.             
  87.             /*TabaHTMLエディタ用エディタメニュー調整*/
  88.             .trumbowyg-button-pane button.trumbowyg-blocktemplate-button {
  89.                 color: transparent;
  90.             }
  91.             .trumbowyg-button-pane button.trumbowyg-blocktemplate-button:before {
  92.                 color: #000;
  93.                 content: "ブロック追加";
  94.             }
  95.             .trumbowyg-button-pane button.trumbowyg-blocktemplate-button.trumbowyg-open-dropdown.trumbowyg-textual-button::after {
  96.                 top: 27px;
  97.                 right: 3px;
  98.             }
  100. .trumbowyg-button-pane button.trumbowyg-originalformattingset-button:before {
  101.     font-family: Font Awesome\ 5 Free;
  102.     content: "\f1dd";
  103.     font-weight: 900;
  104. }
  112.             /*横並び画像テキスト mediaset*/
  113.             .trumbowyg-editor-box .mediaset {
  114.                 display: flex;
  115.             }
  116.             .trumbowyg-editor-box .mediaset .imgbox {
  117.                 width: 200px;
  118.             }
  119.             .trumbowyg-editor-box .mediaset .imgbox img {
  120.                 width: 100%;
  121.             }
  122.             .trumbowyg-editor-box .mediaset .txtbox .title {
  123.                 font-weight: bold;
  124.                 margin-bottom: 5px;
  125.             }
  126.             .trumbowyg-editor-box .mediaset .txtbox .btn a {
  127.                 display: inline-block;
  128.                 padding: 0 5px;
  129.                 border: solid 1px #333;
  130.             }
  131.             .trumbowyg-editor-box .mediaset.img-right .imgbox {
  132.                 order: 1;
  133.             }
  135.             /*表ブロック tableset*/
  136.             .tableset th,
  137.             .tableset td {
  138.                 padding: 3px;
  139.                 border: solid 1px #333;
  140.             }
  142.             /*フォーマット追加・見出し*/
  143.             .heading1,.heading2,.heading3,.heading4 {
  144.             
  145.             }
  146.             .heading1 h2 {        
  147.                 font-size: 1.5rem;
  148.                 font-weight: bold;
  149.             }
  150.             .heading2 p {        
  151.                 font-size: 1.3rem;
  152.                 font-weight: bold;
  153.             }
  154.             .heading3 p {                
  155.                 font-size: 1.2rem;
  156.                 font-weight: bold;
  157.             }
  158.             .heading4 p {
  159.                 font-size: 1.1rem;
  160.                 font-weight: bold;
  161.             }
  162.         </style>