一不小心接触到Simditor,瞬间被它优美极简的界面所吸引。Simditor是Tower开源的所见即所得的在线富文本编辑器。

Simditor的理念是保持简单,避免过度的功能,每一个特性都追求极致的用户体验。

使用方法

1、在你的html页面中引用如下文件

<link media="all" rel="stylesheet" type="text/css" href="simditor/styles/font-awesome.css" />

<link media="all" rel="stylesheet" type="text/css" href="simditor/styles/simditor.css" />

<script type="text/javascript" src="simditor/scripts/jquery.min.js"></script>

<script type="text/javascript" src="simditor/scripts/module.js"></script>

<script type="text/javascript" src="simditor/scripts/uploader.js"></script>

<script type="text/javascript" src="simditor/scripts/simditor.js"></script>

2、在使用Simditor的HTML页面里添加textarea文本框,例如 

<textarea id="editor" placeholder="这里输入内容" autofocus></textarea>

3、在script中初始化编辑器： 

var editor = new Simditor({

   textarea: $('#editor')

});

效果如下：

如果不幸工具栏按钮出现如下样式  则只需去掉html头部<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

中的PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"即可

JSP同理

作者：itmyhome

参考：Simditor官网

Simditor使用方法的更多相关文章

  1. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  2. Simditor 富文本编辑器多选图片上传、视频连接插入

    simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...

  3. Simditor学习--vuejs集成simditor

    唠叨 因为项目需要我自己研究了和集成在vue方便以后再使用,详情官方文档在这里.希望大家有好的建议提出让我继续改进. simditor介绍 Simditor 是团队协作工具 Tower 使用的富文本编 ...

  4. react构建前端项目方法汇总

    react简介: 一.使用react 创建一个PC端的项目 (a):使用 yemon 创建一个 webpack 的 react 的项目 控制台安装并且产看 yemon 的版本 yo -v (b): 全 ...

  5. ava StringTokenizer 类使用方法

    菜鸟教程 -- 学的不仅是技术,更是梦想! 首页 笔记首页 Android 互联网 程序员人生 程序员笑话 编程技术 红包 知识店铺 --> 首页 Android 鸡汤 逗乐 Search Ja ...

  6. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  7. 【.net 深呼吸】细说CodeDom（6）：方法参数

    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...

  8. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  9. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

随机推荐

  1. Tomcat剖析（二）：一个简单的Servlet服务器

    Tomcat剖析(二):一个简单的Servlet服务器 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三) ...

  2. 通讯录C++console application

    #include<iostream> #include<fstream> #include<string> #include<cstring> #inc ...

  3. Oracle 免费的数据库

    Oracle 免费的数据库--Database 快捷版 11g 安装使用与"SOD框架"对Oracle的CodeFirst支持 一.Oracle XE 数据库与连接工具安装使用 O ...

  4. 刚学unity3d，跟着仿作了flappy bird，记下一些琐碎的心得！

    1.关于场景,即scene. 一个正常的游戏至少要有三个场景,即菜单(或者文件夹)场景.游戏关卡场景.游戏结束场景.它们一般统一放在project文件夹下scene文件夹(自己创建)中,方便管理. 1 ...

  5. 使用collectd与visage收集kvm虚拟机性能实时图形

    软件功能: 通过collectd软件来监控收集kvm虚拟机的性能数据,包含cpu,memory.磁盘IO.网络流量等 通过visage软件将收集到的数据绘制图形. 安装: 系统环境:ubuntu12. ...

  6. javascript4

    javascript使用Unicode字符集编写的.javaScript是区分大小写的语言. 标示符就是一个名字.在javascript中用标示符来对变量和函数进行命名或者用做javascript代码 ...

  7. Appium Android Bootstrap源码分析之简介

    在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...

  8. Android Studio如何设置自己主动提示代码

    同Eclipse时间,您可以设置,无论你是设置输入不管什么信,可以提示码,在Android Studio也可以 设置.并且比Eclipse设置来的简单. 当然假设你认为代码自己主动提示会减少你的代码水 ...

  9. 初探async await 实现多线程处理

    初探async await 实现多线程处理 这是微软关于Async的介绍:http://msdn.microsoft.com/en-us/library/hh156513.aspx 这是await : ...

  10. 使用Windows2003创建DHCP服务器 - 进阶者系列 - 学习者系列文章

    Windows 2003提供的DHCP服务还是挺强大的.下面大概介绍下DHCP服务器的配置. 1.  通过控制面板安装DHCP服务 2.  打开DHCP配置项 3.  选择 新建作用域 4.  输入名 ...