jQuery可视化HTML编辑器插件xhedit

所属分类:输入-丰富的输入

 74794  368  查看评论 (12)
分享到微信朋友圈
X
jQuery可视化HTML编辑器插件xhedit ie兼容6

在线可视化HTML编辑器概述

在Web程序应用中,最常见的一种行为是信息和言论的发布和交流。而在信息发布的同时,往往会有对信息发布的格式、类型和功能上的需求,比如:加粗、下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率。在这个需求的背景下,HTML在线编辑器就应运而生了。


顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一。在线HTML编辑器可以实现对编辑内容添加各种丰富多彩的文字效果,以及提供各种方便快捷的操作功能,最大的提高编辑工作效率。在线HTML编辑器是任何网站不可或缺的重要功能组件,是互联网用户得心应手的驰骋网络的有力工具。

xhEditor运行环境

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、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

xhEditor基本使用指南

您只需按照以下简单步骤即可学会使用xhEditor:

将下载的压缩文件解压缩,上传其中的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>

经过以上步骤,你就已经成功的将xhEditor编辑器安装在你的网页中。若需要学习更多xhEditor编辑器的使用技术,请参阅:website进阶使用。


相关插件-丰富的输入

实现打字机效果

封装好的方法实现打字机效果兼容ie6
  丰富的输入
 23867  355

jQuery电子签名

很多APP中用到的签署协议后或消费后需使用者签字后保存图片
  丰富的输入
 42513  413

web聊天UI界面效果及其特效设计(原创)

html+js,web聊天UI界面效果及其特效设计
  丰富的输入
 33388  327

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 53015  432

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    罗晨威 0
    2022/4/17 21:39:53
    上传图片有点麻烦,加了下划线后删不了 回复
    杨永强 0
    2022/4/14 23:43:43
    解压后没有xheditor.min.js以及xheditor_lang文件夹啊 回复
    仰望星空 0
    2021/11/3 17:08:57
    不能上传本地图片吗 回复
    ゆBlUeS.㈨ 0
    2019/8/6 11:15:06
    如何用js获取编辑器里面的内容
        杨永强0
        2022/4/14 23:44:04
        😥
    回复
    零度ㄈ 0
    2018/8/29 17:49:59
    不能上传本地图片吗 回复
    KAI_men 0
    2018/7/26 11:06:03
    报错:Cannot read property 'version' of undefined
        KAI_men0
        2018/7/26 11:18:17
        引入项目内自带的jquery-1.8.0.js行了
    回复
    碧椤红豆 0
    2018/2/28 9:41:22
    引用jquery-1.8.3版本以上的不行,jquery-1.4.4 ~ jquery-1.8.3版本的可以
        碧椤红豆0
        2018/2/28 9:45:36
        重新下载最新版本的xhedit
    回复
    赵瑞广-外汇通 0
    2017/9/1 8:50:00
    Unique 0
    2017/4/20 10:14:13
    解压后没有xheditor.min.js以及xheditor_lang文件夹啊 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复