• 富文本编辑器


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

    link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />
    
    <script type="text/javascript" src="[script path]/jquery.min.js"></script>
    <script type="text/javascript" src="[script path]/module.js"></script>
    <script type="text/javascript" src="[script path]/hotkeys.js"></script>
    <script type="text/javascript" src="[script path]/uploader.js"></script>
    <script type="text/javascript" src="[script path]/simditor.js"></script>
    

    注意

    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);
    		}
    	});
    });
  • 相关阅读:
    HDFS、YARN、Mapreduce简介
    List<object> 转 List<T>
    CTR+A组合键 以及终止按键事件传递
    BackgroundWorker 的输入、输出参数、进度条与文字刷新、取消机制、返回事件
    读取Excel文件的两种方法比较 以及用NPOI写入Excel
    浅复制不能传递,重新赋值就重新浅复制
    gridControl添加右键菜单
    C#设置Excel行高、列宽
    任意字符串(包括空串)都包含空白字符串
    JAVA 在程序中存储和修改信息
  • 原文地址:https://www.cnblogs.com/lajiao/p/9074684.html
Copyright © 2020-2023  润新知