• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > TinyEditor 简洁且易用的html所见即所得编辑器

TinyEditor 简洁且易用的html所见即所得编辑器

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含CSS3,技术运用等相关知识,佚名 希望在学习及工作中可以帮助到您

TinyEditor

前几日曾给大家介绍过一款国产的xhtml编辑器,今天要给大家推荐的TinyEditor,是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。

TinyEditor有以下特点

  • 它使用Javascript编写,不依赖于其它类库
  • 这是一个轻量级的编辑器,要调用的文件仅有8kb
  • 它可以处理大多数的html格式化需求,并且内置的功能使得生成的标记尽量简洁
  • 编辑器中用到的小图标使用了CSS Sprite技术,减少了http连接
  • 在主流浏览器中测试通过
  • 可个人或商业项目中使用,遵循creative commons license

下面来看如何使用:

  1. 在网页文件中引用TinyEditor提供的js文件和css文件
  2. 在网页文件中添加编辑器所需要的标签,其实就是个textarea,如下
    <textarea id="input" style="width:400px; height:200px"></textarea>

    注意textarea中定义的长宽也就是编辑器的大小。

  3. 通过脚本初始化编辑器,并配置各种参数,如下:
    new TINY.editor.edit('editor',{
    	id:'input', 
    // (必须)上面第二步中定义的textarea的id
    	width:584, 
    // (选填) 编辑器宽度
    	height:175,
     // (选填) 编辑器高度
    	cssclass:'te',
     // (选填) 编辑器的class,用来通过css控制样式
    	controlclass:'tecontrol',
     // (选填) 编辑器上按钮的class
    	rowclass:'teheader',
     // (选填) 编辑器按钮行的class
    	dividerclass:'tedivider', 
    // (选填) 编辑器按钮间分割线的样式
    	controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'],
     // (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线,'n'代表按钮行间的分割线
    	footer:true, 
    // (选填) 是否显示编辑器底部
    	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  
    // (选填) 编辑器中可选择的字体
    	xhtml:true, 
    // (选填) 编辑器生成xhtml还是html标记
    	cssfile:'style.
      
    
    
     

您可能想查找下面的文章:

  • CSS3文本阴影text-shadow属性详解
  • html+css3太阳系行星运转动画效果的实现代码
  • IE9beta版本浏览器对HTML5/CSS3的支持
  • TinyEditor 简洁且易用的html所见即所得编辑器

相关文章

  • 2017-08-05html,xhtml,xml的区别介绍
  • 2017-08-05html tbody 用法
  • 2017-08-05超链接图标规范:提升文章的可阅读性
  • 2017-08-05HTML简单购物数量小程序
  • 2017-08-05当td为空时怎样显示其边框
  • 2017-08-05W3C教程(13):W3C WSDL 活动
  • 2017-08-05关于分割线 hr 在各浏览器中的差异
  • 2017-08-05在网页上调用桌面exe程序的简单方法
  • 2017-08-05html 网页中的锚点(命名锚记)的使用介绍
  • 2017-08-05meta标签详解(meta标签的作用)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML教程:收集的常用的HTML标签(4)
    • HTML嵌入WMP 兼容chrome和ie的写法详细介绍
    • iframe标签用法详解(属性、透明、自适应高度)
    • 表单文件选择框样式自定义示例
    • Html长文本超出标记宽度后自动截取实现代码
    • 后台管理UI
    • 网页表单设计实例技巧五则
    • img usemap属性 中国地图链接
    • html在消息按钮上增加数量角标的实现代码
    • 顶部固定div可设置半透明效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有