码迷,mamicode.com
首页 > 其他好文 > 详细

富文本编辑器

时间:2018-05-23 02:12:22      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:oca   ace   初始化   option   add   var   需要   esc   cat   

官方文档: 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);
        }
    });
});

富文本编辑器

标签:oca   ace   初始化   option   add   var   需要   esc   cat   

原文地址:https://www.cnblogs.com/lajiao/p/9074684.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!