xheditor的实例程序—类似word的编辑器
编辑器工具栏:类似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的编辑器的更多相关文章
- Delphi XE5教程3:实例程序
内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...
- Node.js入门实例程序
在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...
- C# 实现单实例程序
在我们经常使用的软件中,当我们已经打开后,再次打开时,有的软件不会出现两个.例如有道词典,会将上次的界面显示出来,或者提示我们“该程序已经运行...”.我通过一个简单的C# WPF例子来说明. 首先我 ...
- tesseract ocr文字识别Android实例程序和训练工具全部源代码
tesseract ocr是一个开源的文字识别引擎,Android系统中也可以使用.可以识别50多种语言,通过自己训练识别库的方式,可以大大提高识别的准确率. 为了节省大家的学习时间,现将自己近期的学 ...
- Android L Camera2 API 使用实例程序汇总
在网上发现几个使用Camera API2开发的实例程序,总结一下方便后续参考: 1.Camera2 Basic : https://github.com/googlesamples/android-C ...
- C#网络编程TCP通信实例程序简单设计
C#网络编程TCP通信实例程序简单设计 采用自带 TcpClient和TcpListener设计一个Tcp通信的例子 只实现了TCP通信 通信程序截图: 压力测试服务端截图: 俩个客户端链接服务端测试 ...
- 如何通过Java应用程序创建Word表格
表格,又称为表,既是一种可视化交流模式,又是一种组织整理数据的手段.人们在通讯交流.科学研究以及数据分析活动当中广泛采用着形形色色的表格.那么如何通过Java应用程序创建Word表格呢?别担心,本文将 ...
- C#使用 SQLite 数据库 开发的配置过程及基本操作类,实例程序:工商银行贵金属行情查看小工具
--首发于博客园, 转载请保留此链接 博客原文地址 本文运行环境: Win7 X64, VS2010 1. SQLite 的优点: SQLite 是一款轻型数据库,开发包只有十几M, 相对于 MSS ...
- 寒武纪加速平台(MLU200系列) 摸鱼指南(四)--- 边缘端实例程序分析
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
随机推荐
- 进击python第三篇:基础
基础拾遗 序列解包 例: >>>x,y,z=1,2,3 >>>print x,y,z 1 2 3 交换变量也是没问题 >>>x,y=y,x > ...
- 网络编程WebSocket 和socket、HTTP的区别和联系
一.WebSocket 是什么? WebSocket是HTML5规范提出的一种协议:目前除了完犊子的IE浏览器,其他浏览器都基本支持.他是一种协议,万变不离其宗,也是基于TCP协议的:和HTTP协议是 ...
- PostgreSQL-12-数据导入与导出
1.数据导入 - COPY FROM CREATE DATABASE c04_datacleaning; \c c04_datacleaning 创建新的数据库 COPY table_name [ ( ...
- Tourists Codeforces - 487E
https://codeforces.com/contest/487/problem/E http://uoj.ac/problem/30 显然割点走过去就走不回来了...可以看出题目跟点双有关 有一 ...
- odoo8 报表页面修改和字体设置
版本8.0, 想要发票修改报表页眉的内容,去公司设置下修改,返现无论如何也不生效. 放狗后得知: You probably already know that you can customise th ...
- .NET Core 1.0 CentOS7 尝试(二、VSCode安装)
晚上继续摸索~~ 一.VSCode安装 下载VSCode,地址:https://code.visualstudio.com/Docs/?dv=linux64_rpm 直接双击安装或者使用rpm -i ...
- HTTP/1.1 持久连接 persistent connection
首先:HTTP的长连接和短连接本质上是TCP长连接和短连接. 1. 在HTTP1.0中,默认的是短连接,没有正式规定 Connection:Keep-alive 操作:在HTTP1.1中所有连接都是K ...
- cf580E. Kefa and Watch(线段树维护字符串hash)
题意 $n$个数的序列,$m + k$种操作 1.$l , r, k$把$l - r$赋值为$k$ 2.$l, r, d$询问$l - r$是否有长度为$d$的循环节 Sol 首先有个神仙结论:若询问 ...
- 涉及到弹出层的opacity样式问题
最近遇到一个弹出层在Chrome中重复的问题,观察发现是opacity引起的以下是代码及现象<!DOCTYPE html><html> <head> ...
- Java 堆内存和栈内存
看了一些别人总结的博客,感觉对堆内存和栈内存有了一个初步的认识.所以来写写自己对堆内存和栈内存的理解. Java把内存分成两种,一种叫做栈内存,一种叫做堆内存. 在函数中定义的一些基本类型的变量和对象 ...