Aloha編輯器自定義

Question

Aloha Editor是否可以配置爲僅顯示粗體，斜體和下劃線按鈕，並且整個工具欄不會大於所需的大小？

Answer 1

是，自定義工具欄來看看配置設置：

http://aloha-editor.org/guides/ui.html#configuration

如果你檢查GitHub上的演示應用程序有一個配置文件開始使用，您可以添加此設置。

https://github.com/alohaeditor/Aloha-Editor/blob/dev/src/demo/demo-app/app/js/demo-app-load.js

還爲這一個替代方案，您可以在演示/ 3col的源代碼檢查：

http://aloha-editor.org/demos/3col/

<script> 
    var Aloha = window.Aloha || (window.Aloha = {}); 

    Aloha.settings = { 
     locale: 'en', 
     plugins: { 
      format: { 
       config: [ 'b', 'i', 'p', 'sub', 'sup', 'del', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat' ], 
       editables : { 
        // no formatting allowed for title 
        '#title' : [ ] 
       } 
      }, 
      link: { 
       editables : { 
        // No links in the title. 
        '#title' : [ ] 
       } 
      }, 
      list: { 
       editables : { 
        // No lists in the title. 
        '#title' : [ ] 
       } 
      }, 
      abbr: { 
       editables : { 
        // No abbr in the title. 
        '#title' : [ ] 
       } 
      }, 
      image: { 
       'fixedAspectRatio': true, 
       'maxWidth': 1024, 
       'minWidth': 10, 
       'maxHeight': 786, 
       'minHeight': 10, 
       'globalselector': '.global', 
       'ui': { 
        'oneTab': false 
       }, 
       editables : { 
        // No images in the title. 
        '#title' : [ ] 
       } 
      } 
     }, 
     sidebar: { 
      disabled: true 
     }, 
     contentHandler: { 
      allows: { 
       elements: [ 
        'a', 'abbr', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col', 
        'colgroup', 'dd', 'del', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 
        'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong', 
        'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u', 
        'ul', 'span', 'hr', 'object', 'div' 
       ], 

       attributes: { 
        'a': ['href', 'title', 'id', 'class', 'target', 'data-gentics-aloha-repository', 'data-gentics-aloha-object-id'], 
        'div': [ 'id', 'class'], 
        'abbr': ['title'], 
        'blockquote': ['cite'], 
        'br': ['class'], 
        'col': ['span', 'width'], 
        'colgroup': ['span', 'width'], 
        'img': ['align', 'alt', 'height', 'src', 'title', 'width', 'class'], 
        'ol': ['start', 'type'], 
        'q': ['cite'], 
        'p': ['class'], 
        'table': ['summary', 'width'], 
        'td': ['abbr', 'axis', 'colspan', 'rowspan', 'width'], 
        'th': ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'], 
        'ul': ['type'], 
        'span': ['class','style','lang','xml:lang'] 
       }, 

       protocols: { 
        'a': {'href': ['ftp', 'http', 'https', 'mailto', '__relative__']}, 
        'blockquote': {'cite': ['http', 'https', '__relative__']}, 
        'img': {'src' : ['http', 'https', '__relative__']}, 
        'q': {'cite': ['http', 'https', '__relative__']} 
       } 
      } 
     } 
    }; 
</script> 

<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/aloha.js" 
      data-aloha-plugins="common/ui, 
           common/format, 
           common/table, 
           common/list, 
           common/link, 
           common/highlighteditables, 
           common/block, 
           common/undo, 
           common/image, 
           common/contenthandler, 
           common/paste, 
           common/commands, 
           common/abbr"></script> 

<!-- turn an element into editable Aloha continuous text --> 
<script type="text/javascript"> 
Aloha.ready(function() { 
    $('#title').aloha(); 
    $('#multicolumnElement').aloha(); 
}); 

</script> 

Answer 2

我花了一段時間才能找出即使在閱讀這個答案後，如何做同樣的事情。

這裏是我做過什麼：

• Aloha.settings被包括aloha.js
• plugins.format.config前的定義：

  <script language="javascript"> 
       Aloha = window.Aloha || {}; 
  
       Aloha.settings = { 
        plugins: { 
         format: { 
          config: [ 'b', 'i', 'u','del'] 
         } 
        }, 
        toolbar: { 
         exclude: ['formatBlock', '\n','subscript', 'superscript'] 
        }, 
        sidebar: { 
         disabled: true 
        } 
       }; 
  
       </script> 
       <script src="/src/aloha/lib/aloha.js" 
       data-aloha-plugins="common/ui,common/format"></script> 
  

  的關鍵點，從該代碼注意設置按鈕可用的格式插件

• toolbar.exclude擺脫我不想要的東西。
• 我的配置包括'刪除'，這是刪除線選項，而不是OP的請求選項的一部分。

我可能不需要刪除下標和上標，因爲它們不在配置中我不擔心，因爲這對我有用，我不在乎我是否有一些不需要的配置選項。