编辑器工具栏:类似word的编辑器

1.1.下载,兼容性

xhEditor官方网站地址为:http://xheditor.com/,打开右上角的免费下载 | 参数向导链接,即可找到最新版本的下载地址。

xhEditor是基于浏览器的HTML、CSS和Javascript环境开发的,因此原则上市场上绝大部分浏览器我们都能完美的运行,目前已测试的浏览器兼容列表如下:IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ (+号代表往后所有新版本)。xhEditor是完全基于浏览器环境的,因此不存在操作系统选择性,是完全跨平台的。xhEditor同时也可以应用在任何的服务端语言环境下,例如:PHP、ASP、ASP.NET、JAVA等,可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

1.2.入门使用

下载最新版本xhEditor:http://xheditor.com/download

上传其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin四个文件夹到网站相应文件夹中。

注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js

在需要调用xhEditor编辑器的网页head标签结束之前添加以下代码:

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/xheditor.min.js"></script>
<script type="text/javascript" src="/js/xheditor_lang/zh-cn.js"></script>

注:jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改

在需要实现可视化的文本框textarea属性中添加:

 class="xheditor"
例如:<textarea name="content" class="xheditor">test</textarea>

2.1. 进阶篇

xhEditor提供两种方式初始化编辑器:

  • 方法1:利用class属性来初始化和传递各种初始化参数,例:
class="xheditor {skin:'default'}"
  • 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例:
$('#elm1').xheditor();或者
$('#elm1').xheditor({tools:'mini'});

如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。

xhEditor卸载编辑器方法:

$('#elm1').xheditor(false);

  

xheditor的实例程序—类似word的编辑器的更多相关文章

  1. Delphi XE5教程3:实例程序

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...

  2. Node.js入门实例程序

    在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...

  3. C# 实现单实例程序

    在我们经常使用的软件中,当我们已经打开后,再次打开时,有的软件不会出现两个.例如有道词典,会将上次的界面显示出来,或者提示我们“该程序已经运行...”.我通过一个简单的C# WPF例子来说明. 首先我 ...

  4. tesseract ocr文字识别Android实例程序和训练工具全部源代码

    tesseract ocr是一个开源的文字识别引擎,Android系统中也可以使用.可以识别50多种语言,通过自己训练识别库的方式,可以大大提高识别的准确率. 为了节省大家的学习时间,现将自己近期的学 ...

  5. Android L Camera2 API 使用实例程序汇总

    在网上发现几个使用Camera API2开发的实例程序,总结一下方便后续参考: 1.Camera2 Basic : https://github.com/googlesamples/android-C ...

  6. C#网络编程TCP通信实例程序简单设计

    C#网络编程TCP通信实例程序简单设计 采用自带 TcpClient和TcpListener设计一个Tcp通信的例子 只实现了TCP通信 通信程序截图: 压力测试服务端截图: 俩个客户端链接服务端测试 ...

  7. 如何通过Java应用程序创建Word表格

    表格,又称为表,既是一种可视化交流模式,又是一种组织整理数据的手段.人们在通讯交流.科学研究以及数据分析活动当中广泛采用着形形色色的表格.那么如何通过Java应用程序创建Word表格呢?别担心,本文将 ...

  8. C#使用 SQLite 数据库 开发的配置过程及基本操作类,实例程序:工商银行贵金属行情查看小工具

    --首发于博客园, 转载请保留此链接  博客原文地址 本文运行环境: Win7 X64, VS2010 1. SQLite 的优点: SQLite 是一款轻型数据库,开发包只有十几M, 相对于 MSS ...

  9. 寒武纪加速平台(MLU200系列) 摸鱼指南(四)--- 边缘端实例程序分析

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

随机推荐

  1. [Xcode 实际操作]九、实用进阶-(26)对Storyboard(故事版)中的文字标签(Label)进行本地化处理

    目录:[Swift]Xcode实际操作 对Storyboard(故事版)中的文字标签(Label)进行本地化处理. 点击项目名称[DemoApp]进入项目信息面板. [Build Setting]-& ...

  2. IT兄弟连 JavaWeb教程 Servlet会话跟踪 设置Session存活时长

    方式一:修改所有的session默认时长,修改tomcat目录下的conf文件夹下的web.xml文件. <session-config> <session-timeout>希 ...

  3. django框架知识3

    1.Django安装: 1.安装版本Django1.11.11 2.安装方式:命令行安装   pycharm安装 2.创建Django项目 1.创建方式:cd到你要创建的目录下  然后输入 Djang ...

  4. perl 处理特殊字符

    如果大家想使用perl 来处理一些特殊字符,例如"del"这种字符,就需要使用到chr() 函数了 例如大家如果向一个文本中写入以下内容 aaaa0x1270x1bccccc 这时 ...

  5. 实现easyui combobox中textField字段的拼接

    开发过程中遇到这样的一个需求: 从后台得到的两个字段aa.bb拼接为一个字段aabb显示在easyui combobx的下拉选项中. 实现方法: 利用formatter属性定义如何呈现行: 页面代码: ...

  6. Java | 基础归纳 | trim()

    trim() 方法用于删除字符串的头尾空白符. 一般可以用来判断空白字符串的长度 String mName = “ ”: if(mName == null || mName.trim().length ...

  7. [译]Understanding ECMAScript6 迭代器与生成器(未完)

    迭代器在许多编程语言中被作为一种更易处理数据集合的方式被使用.在ECMAScript6中,JavaScript添加了迭代器,将其作为此语言的一个重要特征.当再加上新的方法和新的集合类型(比如集合与映射 ...

  8. C. Functions again DP + 分类讨论

    http://codeforces.com/contest/789/problem/C 首先按题目要求处理出dis数组. 那么对于任意一个区间,[L, R],是dis[L] - dis[L + 1] ...

  9. jdk下载安装配置环境变量

    因为学习原因要用到一些工具,jdk12的版本与那个工具不兼容,所以这里推荐使用的是jdk1.8的版本, 不知道是电脑原因还是啥原因,jdk 12的版本用不了配不好环境变量. 首先可以在官网下载jdk1 ...

  10. Java之内部类、包及代码块

    个人通俗理解: 1.内部类:有点类似于写在父类中的子类,根据位置不一样为不同的名字,和相应的访问方式不同:不过要访问外部类的话,需要充分运用好this(本类)的这个关键字:要是需要快速的创建子类对象的 ...