精华内容
下载资源
问答
  •  做富文本编辑器时候遇到一个奇葩问题   经过本人多(丧)番(心)对(病)比(狂)调查 终于发现。是游览器内核的问题。 实验结果在   版本光标高度是有问题的, 再    光标表现正常   ...
        function getBrowserInfo() {
            var agent = navigator.userAgent.toLowerCase();
            var regStr_ie = /msie [\d.]+;/gi;
            var regStr_ff = /firefox\/[\d.]+/gi
            var regStr_chrome = /chrome\/[\d.]+/gi;
            var regStr_saf = /safari\/[\d.]+/gi;
    //IE
            if (agent.indexOf("msie") > 0) {
                return agent.match(regStr_ie);
            }
    
    //firefox
            if (agent.indexOf("firefox") > 0) {
                return agent.match(regStr_ff);
            }
    
    //Chrome
            if (agent.indexOf("chrome") > 0) {
                return agent.match(regStr_chrome);
            }
    
    //Safari
            if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
                return agent.match(regStr_saf);
            }
    
        }
    
        var browser = getBrowserInfo() ;
        alert(browser);
    View Code

     做富文本编辑器时候遇到一个奇葩问题

     

    经过本人多(丧)番(心)对(病)比(狂)调查 终于发现。是游览器内核的问题。

    实验结果在

     

    版本光标高度是有问题的,

      光标表现正常

     

    转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6761156.html

    展开全文
  • 用户:2306776537@qq.com2018年04月18日HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。但是如何将html编辑器嵌入到web页中和怎么...

    用户:2306776537@qq.com

    2018年04月18日

    HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。

    但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢?!

    首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中,文件名是gledit.htm。

    HTML在线编辑器有两种基本调用方法

    一、使用object调用:

    1、怎么在web页中嵌入html编辑器: 我们在需要嵌入得位置加入以下html代码:

    其中object标签里面得data后面接得数据就是我们所要调用得在线编辑器页得路径,id就是我们调用object得id,后面取编辑器中得数据时就要用到这个id。Width和height就是编辑器得高度和宽度了。

    2、怎么取得html编辑器中的数据:所有需要提交的内容我们都是放在一个表单里面,同样利用object调用的编辑器也放在这个表单里面,同时我们可以设置一个隐藏的文本区域(或)用以在提交的时候临时保存html在线编辑器的数据,因为在asp或者jsp,php中不能直接获取表单中的object的内容,所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:

    function CheckForm()

    {

    document.form1.content.value=document.form1.doc_html.value;

    }

    这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。

    3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中:首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口,我们利用自己写的程序来实现上传本机图片到服务器上,然后我们需要记录图片的路径,然后通过html在线编辑器的值中加入显示图片的html标签。详细说明及代码如下:

    在编辑器中我们在插入图片的按钮上加入事件οnclick="window.open('img_upload.asp.html','img_upload','width=481 height=190')">在'img_upload.asp.html'中我们将提交的图片上传到服务器制定目录然后记录图片路径

    var src='';

    opener.form1. doc_html.value +="+src+";

    window.close();

    这样就实现了简单的将上传的图片插入到编辑器中。

    4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据:当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容,例如,要注意这里我们用隐藏的textarea而不能用隐藏的input,因为数据里面可能包含了回车换行,所以如果我们使用">很可能因为有换行而出现HTML错误(value=后面接的数据必须保证是在一行,否则出错)。然后按照前面介绍的方法使用object调用HTML在线编辑器,方法和代码同上,现在我们要做的其实就是提交时候的逆过程,我们只要将隐藏文本区域的内容复制到HTML在线编辑器就可以了,在这里我们在body里面加上

    ,这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了,提交过程和上面介绍的一样,在此就不赘述了。

    二、使用iframe调用(有些和object调用重复的地方就简单描述一下)

    1、 怎么在web页中嵌入:我们在需要嵌入得位置加入以下html代码:其中"src="后面接得数据就是我们所要调用得在线编辑器页得路径,id就是我们调用IFRAME得id,Width和height就是编辑器得高度和宽度了。

    2、 怎么取得html编辑器中的数据:同样所有需要提交的内容我们都是放在一个表单里面,同时我们可以设置一个隐藏的文本区域(或)用以在提交的时候临时保存html在线编辑器的数据,我们借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:

    function subchk(cmd)

    {

    document.form1.content.value= window.content_html.getHTML();

    }

    在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。

    2、怎么取得html编辑器中的数据:所有需要提交的内容我们都是放在一个表单里面,同样利用object调用的编辑器也放在这个表单里面,同时我们可以设置一个隐藏的文本区域(或)用以在提交的时候临时保存html在线编辑器的数据,因为在asp或者jsp,php中不能直接获取表单中的object的内容,所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:

    function CheckForm()

    {

    document.form1.content.value=document.form1.doc_html.value;

    }

    这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。

    3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中:首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口,我们利用自己写的程序来实现上传本机图片到服务器上,然后我们需要记录图片的路径,然后通过在调用html在线编辑器的web页中写一个函数在光标的位置插入显示图片的html标签。详细说明及代码如下:

    在编辑器中我们在插入图片的按钮上加入事件οnclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在调用编辑器的页面中我们定义好插入html代码到编辑器的函数

    function insertHtml(HtmlCode)

    {

    var win=window.content_html.idEditbox.document;

    window.content_html.idEditbox.focus();//是编辑器获得焦点,放置代码插入在编辑器外地方

    win.selection.createRange().pasteHTML(HtmlCode)//在光标的位置插入html代码

    }

    在处理上传图片的文件中,我们调用父窗口的函数插入html代码

    var src='';

    var htmlcodes;

    htmlcodes = "<%=theForm("alt")%>";

    opener.insertHtml(htmlcodes)

    window.close();

    这样就实现了简单的将上传的图片插入到编辑器中。

    4、 怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据:当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容,例如,在这里我们在调用编辑器的iframe里面加上,这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了,提交过程和上面介绍的一样,在此就不赘述了。

    这里只是简单的向大家介绍了一下如何来调用html在线编辑器,具体代码并未一一列出,整理过程中,如果大家对文章中的内容有任何问题和建议请和我联系。

    展开全文
  • 最近接到项目需求:移动端原生写一个富文本编辑器。 ( ⊙ o ⊙ )从没遇到过富文本要用原生写的,然后就查阅各种资料。然后结合自己的思路:其实安卓的富文本编辑器就是一个 “容器”。那么接下来我就带给大家说一说...

    最近接到项目需求:移动端原生写一个富文本编辑器。        ( ⊙ o ⊙ )从没遇到过富文本要用原生写的,然后就查阅各种资料。然后结合自己的思路:其实安卓的富文本编辑器就是一个 “容器”。

    那么接下来我就带给大家说一说我自定义这个富文本编辑器的思路与实现过程。

    ·经过查阅资料之后发现:安卓的富文本编辑器就是一个容器,在用户对这个编辑器中的子控件进行操作的时候对这么多的子控件进行控制。 这就是一个简易的富文本编辑器。

    1.安卓有一个控件叫做scrollview,这个控件是一个自动扩容并且可以滑动的控件,既然是富文本编辑器,肯定少不了这个。(编辑器中所有的操作都用在这个容器中)

    2.紧接着,根据需求得知:我们原生的富文本编辑器里需要输入文字和插入图片,逻辑仅此而已。但是,图片的右上角需要有一个小叉号,用于删除此张图片。那么就先来封装这个小控件。

    f49a19eda39404239430ddc5cf266348.png

    正如大家所见:封装一个相对布局,图片居中显示,自适应大小,然后在布局的右上角有一个叉号, 那么这个叉号的点击事件就用来处理这个控件的增加和删除。

    3.准备工作做好了,接下来就开始封装和处理逻辑。

    在封装之前,我们想想需要处理的逻辑和可能遇到的情况:

    在初始化这个编辑器之前,我们需要有一个默认的输入框,让用户可以编辑。

    用户编辑的过程中需要注意两个地方,用户编辑完一段文字后需要添加一张图片,正常在容器中添加即可;如果用户将光标指在一段文本的中间,那么则需要判断这个光标的位置,然后将文本框中的文字分离,紧接着在分离的文字中间插入图片,然后在图片下面再插入一个文本框,并且将分离完的后半部分文字添加在输入框中。这么以来就完成了图片添加的部分逻辑。

    再来说,图片删除的逻辑: 如果用户点击右上角删除图片,那就将整个封装的控件删除;再次判断如果图片上下都是输入框,就合并这两个输入框。

    清楚了大致逻辑之后,我们开始封装这个所谓的富文本编辑器。

    一、继承scrollview,封装一个自定义组件,并且将需要的组件与变量初始化。(直接上代码)

    初始化变量及其构造方法。

    2cbee079629801dea8f346fe18e65972.png

    在其构造方法中加入出初始化控件时所有需要的子控件,还有子控件的初始化及其监听。

    302c3d6a88e79d7b9775b3f9bf96351b.png

    437f56f02eb08322c81d368525bce4c3.png

    41da6d3a7ac4a42fe7c14e583cd87890.png

    以上就是初始化控件之后的一些基本操作,大致意思如下:

    1)创建编辑器中的第一个文本输入框Edittext,并且设置其属性,还有监听。这个监听有两个,一个是获取焦点的监听,一个是输入文本内容的监听。

    在输入框获取到焦点的时候,需要将默认文字设置成空(产品需求);还有另一个需求就是文本框内不允许输入表情,对于表情android有一套算法,这个算法大概是判断这个文本的占字节数,如果输入的文本中有发现类似的敏感字,就直接删除这个表情,并且提示用户“暂不支持输入表情”。再有就是监听当前光标的位置,然后对退格键进行监听。在代码中都有注释写到的。后续会粘贴出来代码。

    2)然后就是对动画的一个初始化,如果用户删除掉图片之后,直接让图片消失会显得很突然,所以我们在其中加入一个动画,来让用户感觉这一个过程不是那么突然,那么粗暴。

    -----------------------------------------------------------来一条分割线------------------------------------------------------------

    以上是一个简单的初始化,你们一定觉得有点乱,我也觉得有点乱。因为这个容器里面需要做的操作太多了。[流泪]

    二、来解析一下当中的逻辑

    1)首先看看插入图片的逻辑

    首先初始化好这个图片的布局,并且给图片相应的资源。为了后面取值,每一个图片给一个tag标签,这个标签的值就是这个图片加载的url地址。

    ff102b8dab9fe2271a24397d7502a0ba.png

    其次,要确定这个图片插入的位置,如下代码:

    4f72f4f991bde7633ad20a5e07097fff.png

    容器是从上往下添加的,那么添加的时候需要注意光标的位置;如果输入框的内容为空,或者光标顶在了输入框的最前面,那就直接添加一个输入框和一张图片;这么以来,就有了一个大编辑器的感觉。  如果这个光标不是在最前面,并且里面还有内容,那就截取光标前后的内容,将光标后面的内容,设置到下面的输入框中,然后再在这两个输入框中间添加图片。  结束完这个操作之后,要判断默认的提示文字要不要显示并且隐藏键盘。(后续会讲解这个默认文字要不要显示的方法)

    在这里贴上添加Edittext的方法:

    29064f34a78525777ffb9719c659345d.png

    最难的逻辑已经分析完了,,,接下来开始处理这个默认文字的显示与隐藏。

    2)默认文字的显示与隐藏

    这个问题也苦苦调了一段时间,因为如果用户一进来就添加图片,这个时候默认文字也还会显示,这个原因是:android EditText中的属性是判断这个输入框中有没有内容,如果有内容才会消失这个默认文字,在这个过程中还遇到一个问题:如果默认文字太多,他自行换行了,那么就会填充这个输入框的高度,用户体验自然就不好了。  那么在默认文字的处理中,如下:

    8b69b86ba4d284601ae22faaf5817f27.png

    先给第一个输入框一个tag,这个是第一个默认的,这个也有可能被顶下去,然后可能被删除。   焦点监听:如果有焦点了,就直接把他的默认文字给去掉;如果没有焦点,判断这个容器中是否只有这么一个控件,如果是的话就继续判断 :有焦点就去掉默认提示文字,没有焦点就设置相关默认提示文字; 如果还有其他控件,就走方法里的判断。代码如下:

    53a440331df7f76f518688cdc1fc8581.png

    如果只有一个控件的话,就判断是不是第一个默认的输入框,是的话就不作处理,不是的话就对其做焦点监听。如果还有其他控件的话,就直接把所有的输入框的 默认提示文字给设置为空。这样一来所有子控件全部正常了。

    每次处理完退格的时候都必须这么判断一下,因为要监听容器中的最后一个输入框的状态,才能判断这个默认文字显示还是隐藏。

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------

    这个富文本编辑器的主要逻辑大致就这么多。以下再来一小段代码截图:输出数据的方法。

    2ba94fbfe0ac37371b705d9307b619bf.png

    将数据存到对象,然后存到集合中。 因为调试数据需要html代码,然后进行转换输出:

    516b6d518e39ac0129cc8e6ce7ac2015.png

    代码基本上就这么多。。。逻辑也梳理完了, 虽然比较乱吧,,但是都是必经的过程,如果有更好的修改意见,欢迎提出。

    最后将View代码附上。

    这几显示可能有点乱,大家可以复制到AS或者eclipse上格式化后查看。本文章是修改了网上流行了某个富文本编辑器的改进版,如果侵犯请说明。 因为链接我忘了,,,

    展开全文
  • 编辑器内容获得

    2010-10-08 10:59:00
    CodeHTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。  但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢?!  ...
    Code

    展开全文
  • xheditor可视化富文本编辑器

    千次阅读 2018-11-05 09:27:17
    简洁易用的基于jQuery的富文本编辑器xheditor从CSDN上已经改版退出了,新版的Markdown编辑器将原版的编辑文章相关SEO的设置也设为自动获取了,总的感觉现在的编辑器没有原来那么方便了。本文来自...
  • 应用场景一般都是这种编辑器的比较多。 下面的例子是这样的。 如果我先在input框里输入几个日日日,然后在中间点了一下。最后把添加的内容写在第二个框里。点击添加。 你在第二个框里输入的内容就插到你刚才...
  • vim编辑器

    2019-10-28 06:33:13
    在普通模式中,用的编辑器命令,比如移动光标,删除文本等等。这也是Vim启动后的默认模式。这正好和许多新用户期待的操作方式相反(大多数编辑器默认模式为插入模式)。 Vim强大的编辑能来自于其普通模式命令...
  • wangEditor编辑器使用

    千次阅读 2019-04-25 12:40:03
    wangEditor 编辑器的使用 通过 https://github.com/wangfupeng1988/wangEditor/releases 下载wangEditor文档 引入到项目中。 通过 <script type=”text/ script ” src=”/wangEditor.js”> 引入wangEditor....
  • 玩转Vim编辑器

    2018-12-17 10:20:31
    目录 一:VIM快速入门 二:Vim文档编辑 ...几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数的编辑器使用了与Vim截然不同的方式:命令目录(鼠标或者键盘驱动),组合键(通常通过control键...
  • 使用 CodeMirror 打造在线代码编辑器

    万次阅读 2019-03-12 18:40:10
    写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么做的,这里我把公司项目里用到的那部分抽出来,单独写篇博客...
  • 通常我们使用富文本编辑器都是在H5端实现,但是如果你遇到在移动端发表文章的功能,那么richeditor-android这套框架可以轻松为你实现,不需要再使用大量的控件进行拼凑! 功能表如下图所示: 引入richeditor-...
  • 玩转VIM编辑器

    千次阅读 2016-04-23 22:25:49
    几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数的编辑器使用了与Vim截然不同的方式:命令目录(鼠标或者键盘驱动),组合键(通常通过control键(CTRL)和alt键(ALT)组成)或者鼠标输入。Vim和vi一样...
  • Vim编辑器

    2018-08-07 09:31:23
    Vim编辑器 ——vim是Linux系统上最常用的命令行交互式文本编辑器。 1. vi与vim  vi,Virsual Interface,Linux/Unix中默认的文本编辑器  vim,Vi Improved,是vi编辑器的增强版本(支持区分代码颜色等)推荐...
  • HTML在线编辑器有两种基本调用方法一、使用object调用1、怎么在web页中嵌入html编辑器: 我们在需要嵌入得位置加入以下html...Width和height就是编辑器高度和宽度了。2、怎么取得html编辑器中的数据:所有需要提...
  • Android 富文本编辑器 图文混排

    万次阅读 多人点赞 2016-02-27 23:43:35
    Android 富文本编辑器 图文混排
  • Emacs和Vim都是程序员专用编辑器,Emacs被称为神的编辑器,Vim则是编辑器之神。至于两者到底哪个更好用,网络上两大派系至今还争论不休。不过,相比之下,Emacs更加复杂,已经不能算是一个编辑器了,有人这么说:...
  • 在Vue中使用CKEditor5富文本编辑器

    千次阅读 2019-10-14 18:20:19
    在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴。 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor。ckeditor document build 版本默认是...
  • touch c.txt rm 删除文件 rm c.txt help 帮助 help cd Vim编辑py文件 什么是vim VIM (Unix及类Unix系统文本编辑器) Vim 是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性...
  • vim编辑器教程

    千次阅读 2018-08-15 21:21:46
    在普通模式中,用的编辑器命令,比如移动光标,删除文本等等。这也是Vim启动后的默认模式。这正好和许多新用户期待的操作方式相反(大多数编辑器默认模式为插入模式)。 Vim强大的编辑能来自于其普通模式...
  • 代码编辑器的选择,可以说是开发者社区中一个经久不衰的话题,现今编辑器的数量数不胜数,vim,sublime Text,Emacs,Atom等等,那么对于一个开发者而言,挑选一个合适的编辑器是可以有效的提高编程效率; 选择编辑器...
  • 学习链接: vim命令大全 http://blog.csdn.net/scaleqiao/article/details/45153379 vim命令小技巧 ... 关于Vim vim是我最喜欢的编辑器,也是linux下第二强大的编辑器。 虽然emacs是公认的世界第一,我认为使用emacs并
  • vim编辑器操作命令大全-绝对全

    万次阅读 多人点赞 2016-11-10 16:50:18
    学习链接: vim命令大全 http://blog.csdn.net/scaleqiao/article/details/45153379 vim命令小技巧 ... 1. 关于Vim vim是我最喜欢的编辑器,也是linux下第二强大的编辑器。 虽然em
  • 1.首先下载相匹配的下载PHP版本utf版富文本编辑器 ...官方网文档说明 ...把它放到Public的目录下。 2.我们在视图view上,要用到富文本编辑器的时候,一般都是在表单加入textarea, <div clas...
  • Vim是Vi进阶的版本 打开创建文件 vim [/文件路径/]filename1 [filename2 filename...] vim +n 打开文件,并定位第n行 vim + 打开文件,定位至最后一行 ...i 将内容插入到目前光标之前 a 将内容插入到目...
  • xhEditor富文本编辑器的使用说明

    千次阅读 2016-01-25 16:14:44
    1.1. 在线可视化HTML编辑器概述1.2. 获取xhEditor1.3. xhEditor运行环境1.4. xhEditor基本使用指南   1.1. 在线可视化HTML编辑器概述 在Web程序应用中,最常见的一种行为是信息和言论的发布和交流。而在信息...
  • Vim编辑器使用

    2013-10-06 22:45:55
    nano、vi(Visual Interface)、vim(Vi IMproved)行编辑器: sedVim模式:命令模式、编辑模式、输入模式、末行模式获取帮助:1、vimtutor2、vim下输入help模式转换(默认为编辑模式):i[nsert]当前光标所在字符处...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,853
精华内容 3,941
关键字:

获取编辑器光标高度