一不小心接触到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使用方法的更多相关文章
-
javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
-
Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
-
Simditor学习--vuejs集成simditor
唠叨 因为项目需要我自己研究了和集成在vue方便以后再使用,详情官方文档在这里.希望大家有好的建议提出让我继续改进. simditor介绍 Simditor 是团队协作工具 Tower 使用的富文本编 ...
-
react构建前端项目方法汇总
react简介: 一.使用react 创建一个PC端的项目 (a):使用 yemon 创建一个 webpack 的 react 的项目 控制台安装并且产看 yemon 的版本 yo -v (b): 全 ...
-
ava StringTokenizer 类使用方法
菜鸟教程 -- 学的不仅是技术,更是梦想! 首页 笔记首页 Android 互联网 程序员人生 程序员笑话 编程技术 红包 知识店铺 --> 首页 Android 鸡汤 逗乐 Search Ja ...
-
mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
-
【.net 深呼吸】细说CodeDom（6）：方法参数
本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
-
IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
-
多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
随机推荐
-
Oracle常用函数
前一段时间学习Oracle 时做的学习笔记,整理了一下,下面是分享的Oracle常用函数的部分笔记,以后还会分享其他部分的笔记,请大家批评指正. 1.Oracle 数据库中的to_date()函数的使 ...
-
详解Bootstrap导航组件
在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码: LESS: navs.less SASS: _navs.scss 标签形导航,也称选项卡导航 标签形 ...
-
jsp页面添加一个集合数组到action（用序列化提交）
页面的js //点击a标签增加删除 var i=0; $("#a").on("click",function(){ var $newtr = $("& ...
-
VIM安装 NERDTREE,SOLARIZED 插件
实验系统版本及VIM版本 系统:CentOS6.3 VIM:7.2 插件介绍 (附上一张效果图) nerdtree(在窗口左侧用于浏览目录结构的插件) solarized(一个自己认为比较护眼的vim ...
-
使用bind()扩充作用域
window.color = "blue"; var o = {color :"red"}; function sayColor(){ alert(this.c ...
-
python设计模式第二十四天【命令模式】
1.使用场景 (1)调用过程比较繁琐,需要封装 (2)调用参数需要进行处理封装 (3)需要添加额外的功能,例如,日志,缓存,操作记录等 2.代码实现 #!/usr/bin/env python #! ...
-
Introduction to Dynamic SQL
The idea of using dynamic SQL is to execute SQL that will potentially generate and execute another S ...
-
Rancher 容器管理平台-免费视频培训-链接及内容-第三季
Rancher 容器管理平台-免费视频培训-链接及内容 第三季 第5期-2018年05月10日-持续集成的容器化实践回放网址:http://www.itdks.com/liveevent/detail ...
-
ucos ii 46个系统API函数解析
源: ucos ii 46个系统API函数解析
-
[UI] Elastic Stack &; scrollReveal.js
Elastic Stack & scrollReveal.js Elastic Stack http://freebiesbug.com/code-stuff/elastistack-js-d ...