富文本编辑器

Posted 2020-11-07 naniandiam

官方文档： http://simditor.tower.im/docs/doc-usage.html

link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

注意

Simditor基于jQuery和module.js。
hotkeys.js用于绑定热键。
uploader.js与上传文件有关。如果您不需要上传功能，则不需要导入此文件。
在您的项目中使用Simditor
要使用Simditor，首先，你需要一个textarea像这样的元素：

初始化Simditor：

var editor = new Simditor({
textarea: $(‘#editor‘)
//optional options
});

自定义：

// 初始化simditor的函数
$(function() {
var editor,toolbar;
toolbar = [‘title‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘fontScale‘, ‘color‘, ‘|‘, ‘ol‘, ‘ul‘, ‘blockquote‘, ‘code‘, ‘table‘, ‘|‘, ‘link‘, ‘image‘, ‘hr‘, ‘|‘, ‘indent‘, ‘outdent‘, ‘alignment‘];
Simditor.locale = ‘zh-CN‘;
editor = new Simditor({
textarea: $(‘#simditor‘),
toolbar: toolbar,
pasteImage: true
});
// 加到window上去,其他地方才能访问到editor这个变量
window.editor = editor;
});

// 添加文章的执行函数
$(function() {
$(‘#submit-article-btn‘).click(function() {
// 获取元素
var titleElement = $(‘#title-input‘);
var categoryElement = $(‘#category-select‘);
var descElement = $(‘#desc-input‘);
var thumbnailElement = $(‘#thumbnail-input‘);
var tagElements = $(‘.tag-checkbox‘);

    // 获取数据
    var title = titleElement.val();
    var category = categoryElement.val();
    var desc = descElement.val();
    var thumbnail = thumbnailElement.val();
    var tags = [];
    tagElements.each(function() {
        if($(this).is(‘:checked‘)){
            var tagId = $(this).val();
            tags.push(tagId);
        }
    });
    var content_html = editor.getValue();
    var data = {
        ‘title‘: title,
        ‘category‘: category,
        ‘desc‘: desc,
        ‘thumbnail‘: thumbnail,
        ‘tags‘: tags,
        ‘content_html‘: content_html
    };
    
    // 通过ajax发布到服务器
    myajax.post({
        ‘url‘: ‘/cms/add_article/‘,
        ‘data‘: data,
        ‘success‘:function(result) {
            if (result[‘code‘] == 200) {
                $(‘#submit-success-modal‘).modal(‘show‘);
                titleElement.val(‘‘);
                descElement.val(‘‘);
                thumbnailElement.val(‘‘);
                tagElements.removeAttr(‘checked‘);
                editor.setValue(‘‘);
            }else{
                alert(result[‘message‘]);
            }
        },
        ‘error‘: function(err) {
            console.log(err);
        }
    });
});