Editor 编辑器
Wysiwyg Editor
assets/js/jquery.hotkeys.js assets/js/bootstrap-wysiwyg.js
<div id="my-editor"><!-- custom html data --></div>
$('#my-editor').ace_wysiwyg();
Options
Wysiwyg
speech_button 语音输入按钮
toolbar工具栏按钮
toolbar_place可选配置功能的工具栏
$('#my-editor').ace_wysiwyg({
toolbar: {
'bold',
'italic',
null,
{
name: 'font',
title: 'Custom tooltip',
values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
}
}
});
工具栏按钮属性
Title
icon
className
工具栏按钮选项
Font 字体
{
name: 'font',
title: 'optional custom tooltip',
icon: 'fa-leaf', //some custom icon
values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
}
fontSize 字体大小
{
name: 'fontSize',
title: 'optional custom tooltip',
values:{1 : 'Size#1' , 2 : 'Size#2' , 3 : 'Size#3' , 4 : 'Size#4' , 5 : 'Size#5'}
}
Bold 加粗
'bold',
//or
{
name: 'bold',
title: 'optional custom tooltip',
icon: 'fa-leaf' //some custom icon
}
Italic
Strikethrough
Underline
Insertunorderedlist
Insertorderedlist
Outdent
indent
justifyleft
justifycenter
justifyright
justifyfull
createLink
{
name: 'createLink',
title: 'optional custom tooltip',
placeholder: 'link input placeholder',
button_class: 'btn-purple',//insert button's class
button_text: 'Add Link'//insert button's text
}
Unlink
insertImage
{
name: 'createLink',
title: 'optional custom tooltip',
placeholder: 'image url input placeholder',
button_insert_class: 'btn-purple',//insert button's class
button_insert: 'Add Link',//insert button's text
choose_file: true,//'Whether there should be a "Choose File" button
button_class: 'btn-success',//choose button's class
button_text: 'Choose an Image'//choose button's text
}
foreColor 、backColor
{
name: 'foreColor',
title: 'optional custom tooltip',
values: ['red', 'blue', '#FF7721']
}
Undo
Redo
viewSource
$('#editor2').css({'height':'200px'}).ace_wysiwyg({
toolbar_place: function(toolbar) {
//for example put the toolbar inside '.widget-header'
return $(this).closest('.widget-box')
.find('.widget-header').prepend(toolbar)
.find('.wysiwyg-toolbar').addClass('inline');
}
});
$('#editor2').ace_wysiwyg().prev().addClass('wysiwyg-style2');
Notes
发送编辑内容到服务器
$('#myform').on('submit', function() {
var hidden_input =
$('<input type="hidden" name="my-html-content" />')
.appendTo('#myform');
var html_content = $('#myeditor').html();
hidden_input.val( html_content );
//put the editor's HTML into hidden_input and it will be sent to server
});
Markdown Editor
assets/js/markdown/markdown.js assets/js/markdown/bootstrap-markdown.js
assets/js/bootbox.js
<div class="widget-box widget-color-blue">
<div class="widget-header widget-header-small"></div>
<div class="widget-body">
<div class="widget-main no-padding">
<textarea name="content" data-provide="markdown" rows="10"></textarea>
</div>
</div>
</div>