1999属什么记使⽤tui-editor添加⾃定义toolbar 使⽤：①
require('codemirror/lib/codemirror.css'); // codemirror
require('tui-editor/dist/tui-editor.css'); // editor ui
require('tui-editor/dist/tui-editor-contents.css'); // editor content
require('highlight.js/styles/github.css'); // code block highlight
var Editor = require('tui-editor');
...
var editor = new Editor({
el: document.querySelector('#editSection'),
initialEditType: 'markdown',
previewStyle: 'vertical',
普陀山景点
emoji什么意思height: '300px'
});
②：
$('#editSection').tuiEditor({
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '300px'
});
很多同学不知道能添加⾃定义按钮在此特意提出
var editor = new tui.Editor({
el: document.querySelector('#editSection'),
previewStyle: 'vertical',
height: '400px',
initialEditType: 'markdown',
toolbarItems: [
'heading',参差的意思
'bold',
'italic',
'strike',
'divider',
'hr',
'quote',
'divider',
'ul',
'ol',
'task',
'indent',
'outdent',
李皇后
'divider',
'table',
'image',
白水煮虾的做法
'link',
'divider',
青蛇图片
'code',
'codeblock',
'divider',
// ADD button method 1
{
type: 'button',
options: {
$el: $('<div class="our-button-class"><i class="fas fa-briefca-medical"></i></div>'), name: 'test2',
className: '',
command: 'Bold', // you can u "Bold"
tooltip: 'Bold'
}
}
]
});
// ADD button method 2
var toolbar = UI().getToolbar();
editor.eventManager.addEventType('Event1');
饺子的由来editor.eventManager.listen('Event1', function() {
alert('button click!');
// do some
});
toolbar.addButton({
name: 'customize',
className: 'fab fa-accessible-icon',
event: 'Event1',
tooltip: 'Apple',
$el: $('<div class="our-button-class"><i class="fab fa-apple"></i></div>')
}, 1);
说明：以上两种⽅式为官⽅⽂档写法
addButton(option,index）option 为设置项，index为插⼊位置，若不加index默认为尾部注：⾃定义的样式要改：因为tui的toolbar使⽤的是精灵图，要⾃⼰使⽤样式覆盖掉
