xheditor编辑器的使用

一个博客、cms网站都一定会用到一个html编辑器，刚好xmfdsh在做网站时候需要用到这类编辑器，在对比了之后，发现其实差不了多少，刚好一个不错的friend在用xheditor，想到后面有不懂的还可以请教下，所以选择了这个xheditor，那么这个html到底怎么使用呢？？摸索了一个晚上个人觉得对于初学者，xheditor的使用教程实在还应该加上一些注意的地方。好，废话不多说，这里就来说一下怎么去使用这个编辑器。

第一步：下载这个软件http://xheditor.com/download

第二步：下载解压好了后把其中xheditor-1.2.1.min.js，以及xheditor_emot、xheditor_lang、xheditor_plugins、xheditor_skin这几个文件夹一起弄到自己的网站下，最好保持在同一个路径啦，如果jquery的版本不一样，个人觉得最好还是把jquery文件夹里面的jquery也放进网站目录

第三步：在网站的<head></head>中引用三个文件，如下代码：

<script src="~/editor/jquery/jquery-1.4.4.min.js"></script>

    <script src="~/editor/xheditor-1.2.1.min.js"></script>

    <script src="~/editor/xheditor_lang/zh-cn.js"></script>

第四步：这时候就是初始化编辑器了，两个方法

在textarea上添加属性： class="xheditor"
例如：<textarea name="content" class="xheditor">test</textarea>

第二种就是用jquery初始化，个人比较偏向这个方法，可能xmfdsh刚刚用了easyui做东西所以对jquery有点热情吧，贴一下我初始化代码如下：

<script>

        $(function () {

            // 初始化在线编辑器

            $('#Content').xheditor({

                tools: 'full',

                width: '100%',

                height: '450',

                upBtnText: '上传',

            });

        });
</script>

上面的$('#Content')明显是id选择器，因此对应的下面xmfdsh网站有个<textarea id="Content" name="Content" placeholder="请输入内容"></textarea>

上面这些初始化参数其实没必要和xmfdsh的一样，大家可以有自己的一套，参数我这里就不说了，大家可以参考http://xheditor.com/manual，这个也是对大家自学能力的一种考验

注意：注意的地方来了，网上的一些教程也是这么说，但是不知道为什么xmfdsh弄出来的东西却没有那些工具栏呢：（如下）

实在没办法，先用着浏览器的调试来查看下到底发生了什么，然后发现下面的提示错误

一看，来时jquery没有导入，这就奇怪了，明明有导入jquery，于是xmfdsh突然焕然大悟，原来自己的jquery导入的时候放错地方了，一个不小心放在了xheditor的js后面，于是当xheditor的js要使用jquery的时候，我的jq文件还没导进去，看来还是我的问题，不知道大家有没有遇到这个问题，在这里标记下，给大家留个心。

关于当xheditor的js要使用jquery的时候，而jquery.js文件还没导进去,操作系统会不会切换cup，再去导入jquery.js文件呢？

按照指令顺序执行的原则，操作系统的信号机制原理，貌似会！，但是临界资源申请，以及使用，会遵守信号机制，先到先得。但是这里不会，因为在xheditor.js文件要使用jquery.js文件里的内容时，系统在环境里没有查找到，就会启动异常机制处理，异常机制通常会中断xheditor.js文件的导入，执行下一指令。。

xheditor编辑器的使用的更多相关文章

  1. ASP利用xhEditor编辑器实现图片上传的功能。

    本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...

  2. xhEditor编辑器上传图片到 OSS

    前段时间,公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思,想想 基本的用户图片上传到自己服务器,还有点小占地方: 后来....然后直接上传到阿里云 .接下 ...

  3. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  4. xheditor编辑器上传截图图片抓取远程图片代码

    xheditor是一款很不错的开源编辑器,用起来很方便也很强大. 分享一个xheditor直接上传截图的问题解决方法. 第一步.设置参数 localUrlTest:/^https?:\/\/[^\/] ...

  5. xheditor编辑器上传图片

    之前在用csdn的时候,觉得他们家的编辑器挺好用,精美,简洁,大方,功能强大.最近自己的项目也要用到编辑器,我就想起了xheditor. 好多大网站都用到它~好棒! 我把xheditor用于文章模块, ...

  6. ThinkPHP中Xheditor编辑器报错

    在使用Xheditor这个插件时..我按照他里面的domo中的方法放到自己的控制器中..出现如下问题 以下是我节选的错误提示 /index.php/admin/goods/upload/ 上传接口发生 ...

  7. mvc从xheditor编辑器中获取内容时存在潜在危险

    xmfdsh在使用xheditor提交要发布的文章等内容的时候出现了如下的错误: 从客户端(Content="<p style="text-align...")中检 ...

  8. xhEditor编辑器从word粘贴公式

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  9. 【转】xhEditor技术手册 网页编辑器基础教程

    1. xhEditor入门基础 1.1. 在线可视化HTML编辑器概述1.2. 获取xhEditor1.3. xhEditor运行环境1.4. xhEditor基本使用指南 1.1. 在线可视化HTM ...

随机推荐

  1. JavaScript的由来， 浏览器的20年

    在很久以前那时候还没有Yahoo,Google....人们还在用28.8kbit/s的"猫"上网, 用户注册或者登录的时候所有的验证都是在服务器验证的, 如果用户注册的时候用户名或 ...

  2. poj2631 树的直径

    设s-t是这棵树的直径,那么对于任意给予的一点,它能够到达的最远的点是s或者t. 这样我们可以通过2次bfs找到树的直径了. #include<cstdio> #include<qu ...

  3. KVC、KVO、NSNotification、delegate 总结及区别

    1.KVC,即是指 NSKeyValueCoding,一个非正式的Protocol,提供一种机制来间接访问对象的属性.而不是通过调用Setter.Getter方法访问.KVO 就是基于 KVC 实现的 ...

  4. Trinity min_kmer_cov

    A high min_kmer value was used to reduce noise in the assembly and to identify only transcripts that ...

  5. nhibernate 配置nvarchar(max)

     若你真的需要一个nvarchar(max)的sql存储空间时,记得增加 .CustomType("StringClob") Demo:Map(x => x.ContentM ...

  6. 【BZOJ-1507】Editor 块状链表

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 3397  Solved: 1360[Submit][Stat ...

  7. 【poj1741】 Tree

    http://poj.org/problem?id=1741 (题目链接) 题意 给出一个n个节点的带权树,求树上距离不超过K的所有点对的个数. solution  点分治裸题.所谓的点分治,就是对于 ...

  8. Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platform)

    catalog . 引言 . Windows 2000网络结构和OSI模型 . NDIS驱动 . NDIS微端口驱动编程实例 . NDIS中间层驱动编程实例 . NDIS协议层驱动编程实例 . TDI ...

  9. [JavaEE]如何唤醒Sleep中的线程

    主线程调用子线程的interrupt()方法,导致子线程抛出InterruptedException, 在子线程中catch这个Exception,不做任何事即可从Sleep状态唤醒线程,继续执行. ...

  10. PHP之：PHP编程效率的20个要点

    [导读] 用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则 不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数” 用单引号 ...