精华内容
下载资源
问答
  • 了将近两年的在线PPT,从最初调研到深入扩展,感觉选quill一个不错的道路,最初选择quilljs因为他的扩展性和star量以及相对不错的文档内容。quilljs自带一套数据系统来支撑内容生产,parchment和delta。...

    楼上已经有人回答了使用quilljs。我也来说一下我的使用感想。

    做了将近两年的在线PPT,从最初调研到深入扩展,感觉选quill是一个不错的道路,最初选择quilljs是因为他的扩展性和star量以及相对不错的文档内容。

    quilljs自带一套数据系统来支撑内容生产,parchment和delta。parchment是抽象的文档模型,是与DOM树相对应的树形结构,Parchment树由Blot组成,Blot即是DOM Node的对应物,Blot可能包含结构、样式、内容等。打个比方:用户在编辑器中输入了文字“你”,在Parchment树中就会产生一个TextBlot与之对应。

    Delta是一个扁平的JSON数组,用于保存(描述)编辑器中的内容数据,delta中的每一项代表一次操作,它能很清晰的告诉你当前选中的文本是粗体还是斜体,以及文本内容。

    {

    ops: [

    { insert: 'Gandalf', attributes: { bold: true } },

    { insert: ' the ' },

    { insert: 'Grey', attributes: { color: '#cccccc' } }

    ]

    }

    基于此,我们重写了他的list、font-size等。

    但是如果你想更好的支持复制粘贴的话,它只能支持普通的处理,如果想要保留一些word的样式等,可能需要你去改造clipboard模块了

    class PlainClipboard extends Clipboard {

    constructor (quill, options) {

    super(quill, options);

    // 可复制上下标标签

    this.addMatcher(Node.ELEMENT_NODE, matchSub);

    this.addMatcher('pre', matchCodeBlock);

    }

    onPaste (e) {

    ...

    }

    }

    其次你还可以基于embed扩展公式

    class FormulaEmbed extends Embed {

    }

    FormulaEmbed.blotName = 'biu-mathjax';

    FormulaEmbed.className = 'biu-mathjax';

    FormulaEmbed.tagName = 'span';

    Quill.register(FormulaEmbed);

    再者就是格式刷功能需要你单独处理,因为ppt功能的问题,我们需要考虑编辑态和非编辑态的处理,这个一般业务中不需要这个(先说这么点吧。)

    总得来说quilljs能满足大部分的常用业务场景,即便你做工具类的产品(在线ppt或者word).也推荐quill,我们另一个团队的小伙伴基于此做的在线word。效果也很不错。

    后面一直对第三代编辑器念念不忘,终于找了一个关于有道云的文章,也算是对内部的实现有了一些了解,后来只是简单的在本地写了一个模拟demo在本地,发现需要考虑的东西太多,成本太高,就先弃坑了。下面分线一点我感觉不错的内容粘贴如下:

    第三代编辑器的特点:使用XML严格定义数据

    编辑时,数据层与视图层分离

    不依赖原生的selection/range,自实现NoteRange和NoteSelection方法

    不依赖contenteditable,自实现中间层对接输入法

    细粒度的undo/redo,占用更少的内存

    上述内容只是简单的做个介绍,欢迎交流

    展开全文
  • 什么是富文本编辑器 富文本编辑器支持markdown语法,程序员笔记,功能很多,样式很多的一种很方便的文本编辑器,很推荐学会使用markdown语法 今天在vue的学习中,用到了富文本编辑器的插件, 插件源码地址 怎么...

    什么是富文本编辑器


    富文本编辑器支持markdown语法,是程序员做笔记,功能很多,样式很多的一种很方便的文本编辑器,很推荐学会使用markdown语法
    今天在vue的学习中,用到了富文本编辑器的插件,
    插件源码地址

    怎么在vue组件页面中插入富文本编辑器

    1. 使用vue ui,在ui界面直接搜索依赖 vue-quill-editor

      或者在项目根路径的命令框下
      npm install vue-quill-editor --save
    2. 挂载 vue-quill-editor 插件
      全局挂载
    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
    // require styles 导入富文本编辑器对应的样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    Vue.use(VueQuillEditor, /* { default global options } */)
    

    局部挂载

    // require styles 导入富文本编辑器对应的样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor } from 'vue-quill-editor'
    export default {
      components: {
        quillEditor
      }
    }
    
    1. 插件的简单使用
    <!-- 富文本编辑器组件 -->
     <quill-editor v-model="addForm.goods_introduce" ref="myQuillEditor"></quill-editor>
    
    1. 插件的效果

    总结

    以直觉得markdown编辑器很好用,突然碰到使用的源码,挺简单的,也感觉很有趣,虽然是最简单的使用。更多的用法,可以参考文档,我想肯定还有更多的编辑器也有这样的插件,拓展的以后慢慢探索,,,

    展开全文
  • 使用vue-quill-editor实现富文本编辑器

    万次阅读 多人点赞 2019-01-11 11:51:35
    一、什么是富文本编辑器? 简单介绍一下,看过上面的图,您大致对富文本编辑器有个了解了,传统的textArea输入框输入的内容没法格式上的更改,它的功能跟我们的word一样,可以对其中内容的格式一些调整,还可以...

    一、什么是富文本编辑器?
    简单介绍一下,看过上面的图,您大致对富文本编辑器有个了解了,传统的textArea输入框输入的内容没法做格式上的更改,它的功能跟我们的word一样,可以对其中内容的格式做一些调整,还可以添加图片等等,它在开发中有个专有名词,叫富文本编辑器。
    简单介绍一下,看过上面的图,您大致对富文本编辑器有个了解了,传统的textArea输入框输入的内容没法做格式上的更改,它的功能跟我们的word一样,可以对其中内容的格式做一些调整,还可以添加图片等等,它在开发中有个专有名词,叫富文本编辑器。

    1、ueditor
    国内人用ueditor的比较多,真的很中国化,经常在贴吧或论坛里看到这种风格的富文本编辑器。

    2、bootstrap-wysiwyg
    这个插件是bootstrap官网推荐的。

    3、vue-quill-editor
    这个据说大企业用的比较多,百度一下技术背景,对它的评价是不限制框架,但是需要定制,理念很先进。

    二、主要研究学习第三种vue-quill-editor富文本编辑
    在HUI-VUE中使用
    1、安装依赖

    npm install vue-quill-editor –save
    

    2、使用
    可以在main.js中引入

    import { quillEditor } from 'vue-quill-editor'
    

    //一定要引入这三个css,不然文本编辑器会出现不规则黑白几何图形
    //这三个css可以在main.js中引入,也可以在具体使用的.vue文件中引入

    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    

    3、新增自定义功能
    1 ) Quill中富文本编辑的操作按钮都为英文,需要中文译一下,根据项目功能需求有两种情况:

    1. 如果有语言切换的需求,就需要准备语言包按照api的引用方法实现;
    2. 如果只有一种语言的要求,就可以通过css的content属性更改。

    2)按钮多为图标显示,用户使用起来不能清楚明白功能按钮的作用,需要加上一个鼠标停留按钮提示的交互:

    首先建一个quill-title.js
    将每个按钮的对应class拾取出来进行提示语循环增加title,代码实现如下:

    const titleConfig = {
      'ql-bold': '加粗',
      'ql-color': '颜色',
      'ql-font': '字体',
      'ql-code': '插入代码',
      'ql-italic': '斜体',
      'ql-link': '添加链接',
      'ql-background': '背景颜色',
      'ql-size': '字体大小',
      'ql-strike': '删除线',
      'ql-script': '上标/下标',
      'ql-underline': '下划线',
      'ql-blockquote': '引用',
      'ql-header': '标题',
      'ql-indent': '缩进',
      'ql-list': '列表',
      'ql-align': '文本对齐',
      'ql-direction': '文本方向',
      'ql-code-block': '代码块',
      'ql-formula': '公式',
      'ql-image': '图片',
      'ql-video': '视频',
      'ql-clean': '清除字体样式'
    }
    export function addQuillTitle () {
      const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect = oToolBar.querySelectorAll('select')
      aButton.forEach(function (item) {
        if (item.className === 'ql-script') {
          item.value === 'sub' ? item.title = '下标' : item.title = '上标'
        } else if (item.className === 'ql-indent') {
          item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
        } else {
          item.title = titleConfig[item.classList[0]]
        }
      })
      aSelect.forEach(function (item) {
        item.parentNode.title = titleConfig[item.classList[0]]
      })
    }
    
    

    其次将quill-title.js引入

    import { addQuillTitle } from './modules/quill-title.js'
    

    最后在生命周期mounted中调用方法:

    addQuillTitle(); 
    

    最终实现了鼠标悬停按钮完成tooltip提示。

    4、问题
    1)在富文本编辑器里输入并排布好的版面和样式在回显时候出现不一致。字体大小样式丢失,首先看编辑器完成返回的html字符串:

    '<h1 class="ql-align-center">《 <strong style="color: rgb(51, 51, 51);">虞美人 》</strong></h1><h2 class="ql-align-center"> 李煜</h2><p><br></p><h3><br></h3><h3 class="ql-align-center"> <span class="ql-size-large" style="color: rgb(230, 0, 0);">春花</span>秋月何时了,<span class="ql-size-large" style="color: rgb(0, 138, 0);">往事</span>知多少?小楼昨夜又<span class="ql-size-large" style="color: rgb(240, 102, 102);">东风</span>,故国不堪回首月明中!</h3><h2 class="ql-align-center"><span class="ql-size-large"> </span>雕栏玉砌应犹在,只是朱颜改。<span class="ql-size-large" style="color: rgb(161, 0, 0);">问君能有几多愁?恰似一江春水向东流。</span></h2><p  class="ql-align-justify"><br></p>'
    

    会发现在编辑器返回的字符串中,字号在加大的情况下Quill编辑器会在标签上增加一个class,然后再去定位这个class的样式丢失的原因:
    在这里插入图片描述
    找到quill中控制回显样式的css文件不难发现在内部的类和标签样式前需要有一个父级元素class=”ql-editor”的class名,来确保子元素样式被匹配到。最后问题得以解决。

    三、图片上传实现方式:
    vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,内容存在数据库中的,这样一来,一方面会占用大量的数据库存储空间,另一方面当图片太大的时候富文本的内容,会超过数据库的存储上限,从而会产生内容被截断从而显示不全的问题(即使是text类型,也有存储上限65535)。

    那么问题来了,如何将图片上传到自己的服务器或第三方服务,然后将获得的图片url插入到文本中呢?大致有两个方法,其一是将任务交给服务端,服务端截取base64图片并转化为文件,将其路径或者url替换原来的图片数据;其二是对控件本身下手,首先将图片上传,然后插入到富文本中。

    展开全文
  • 先说什么是富文本编辑器吧,普通的html中input或textarea标签只能进行简单的输入,而不到其他的文本调整功能,甚至 连空格与回车都要另写工具类去识别,更谈不上字体大小和颜色的修改、整体排版都功能了。其实...

    web项目中nicedit富文本编辑器的使用

    一、为什么要用富文本编辑器?

    先说什么是富文本编辑器吧,普通的html中input或textarea标签只能进行简单的输入,而做不到其他的文本调整功能,甚至

    连空格与回车都要另写工具类去识别,更谈不上字体大小和颜色的修改、整体排版都功能了。其实一般读入文段类型的输入框都需

    要富文本编辑器,没错,你们平时写博客用的就是富文本编辑器。如果还是无法理解富文本与普通输入框的区别,请看下图:

         

     二、为什么要选nicedit

    同类富文本编辑器有很多,这里选nicedit来说并不是因为它有多好,反而它功能并不全面,也不是很好看,

    不过它有几个很大的优点:兼容性好、简单轻量、适合作为后台管理人员的录入框。

    三、使用方法

    1.下载nicedit工具包,包内目录如下

        

          2.把nicEdit.js和nicEditorIcons.gif文件复制到web项目中,放平时放静态资源的位置即可

               

    3.在nicEdit.js中修改nicEditorIcons.gif在项目中的位置

          

    4.在jsp中代码如下(注意修改js所在路径):

          

    5.获取富文本输入的值,注意这里用textarea的id和值是获取不了的,因为nicedit会隐藏原有的textarea,并生成自带的输入框,这是要获取框内

    文本就需要通过其生成的类名去获取,代码实现如下:

      

      我这里为了方便表单直接提交,就在按钮事件触发时直接把富文本内的值获取出来,并赋给表单中隐藏的input.

     

    到这里nicedit富文本就能达到使用目的了,需要的文件只有一个js文件和一张图片,是不是真的很轻量很简单?所以,在只需实现简单的文段编辑功能

    时,可以考虑使用这个富文本编辑器。分享完毕,谢谢阅读。

     

     

    转载于:https://www.cnblogs.com/liangzhilin/p/5812238.html

    展开全文
  • 所以就使用到了 百度富文本编辑器,刚开始还没有发现有什么不对劲的。 结果当我把带有<span>测试</span>,<font>测试数据</font>标签的Html代码,复制到编辑器”源码“中点击“保存“后,...
  • hello world:  花了8天时间终于把大神的富文本编辑器学习完毕,...为什么富文本编辑器要用iframe来 跨浏览器兼容 2. iframe内容编辑 不会影响到 当前文档的内容 3. iframe一个编辑即所得的容器  写这边博...
  • 本文几年前写的,直接访问 wangEditor 官网www.wangEditor.com了解最新版的编辑...一说到web富文本编辑器,很多人的印象就是网上一搜一大把,恨不得扔个砖头都能砸一片。不错,确实一搜一大把,但是真让你说一下名...
  • 本文几年前写的,直接访问 wangEditor 官网www.wangEditor.com了解最新版的编辑器 ... 一说到web富文本编辑器,很多人的印象就是网上一搜一大把,恨不得扔个砖头都能砸一片。不错,确实一搜...
  • 一起动手撸一个富文本编辑器

    千次阅读 2017-12-18 02:42:26
    知乎-为什么富文本编辑器是个天坑? 在试过了市面上主流的编辑器后,发现或多或少都不符合要求。主要有以下问题: CKEditor功能很强大,但是太复杂,有很多用不到的地方。 项目前端框架是Vue,最好是基于Vue2.x的...
  • 之前也用过很多富文本编辑器,没做什么整理,每次用都去搜,这次索性自己整理以下,方便日后自己看。 目前在用django把我那之前的前后端不分离的博客,用djangorestframework改成前后端分离的版本。后面在接着...
  • 首先说一下我为什么要写这一篇,因为我就是踩着这个屎坑过来的,由于需求问题,我需要一个富文本编辑器,这个富文本编辑器最终出来的内容要兼容ios以及web,效果要一致,所以选择用html标签作为富文本显示,而我...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 项目中有个功能用户使用富文本自定义商品描述,一开始真的不知道该怎么,先说得逼格高一点,这需要HTML,JAVASCRIPT,ANDROID等共同技术的组合,然后在网上down了一个,源网址如下:...话说这个编辑器好像跟上面开源...
  • 我使用ueditor文本编辑器将编辑的内容以html格式传入了数据库,我通过mht转ftl了一个模板 ,然后在模板里面也添加了变量。我在运行的过程中模板也能够自动生成,里面的内容也能够完整显示出来。在生成的word里面...
  • SpringBoot整合Editor.Md实现Markdown富文本编辑器 前言:最近需要一个后台管理,且需要有一个公告功能,可以实现图片上传等功能。于是,就想到了整合editro.md。本次后台管理SpringBoot + Thymeleaf 实现的,ok...
  • 我需要一个富文本编辑器,来编辑一些文章、图文什么的,然后能导出一个html文件。 将来要给app上webview加载的。但是很多编辑器出来的网页都电脑适配的,在手机上格式混乱。 我想要一个能在手机的webview上...
  • 今天项目的时候遇到了一个很白痴的问题,我在后台把word下面的文章添加进去,到后面编辑的时候却只出现几个字,以为代码写错了,没想到最后数据库里字段类型给了varchar,记下来防止以后再犯这么蠢的问题,把...
  • 我们通常在Web项目时好始终绕不开文本编辑器,比如我们产品描述,再比如添加或编辑新闻等。如果没有了它就好比" 说相声的基本功少了一门:说"。为什么呢?因为Web最大的好处在于它的表现形式可以多样式的,...
  • 自己也试了下,感觉对图片的支持总有问题,然而自己的html还带有富文本编辑器(CKEditor)。所以索性放弃了第三方控件,自己写了一个帮助类,支持在指定位置插入图片,支持CKEditor,经测试可用,本文为博主原创,转载...
  • 前段时间有个需求开发富文本编辑器,这个之前随过,但看了需求,发现有些地方还需google 就把遇到的问题记录一下。写这篇文章时用的TinyMCE编辑器就很强大,但毕竟第三方的,项目也考虑了这些,如果些...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 现在有一个需求,使用Java将word解析到富文本编辑器内,要求内容和格式都不发生变化。 是不是先要将word文档转换为html文档再处理?如果的话,Java有什么好方法可以将word转换为html,服务器为Linux,所以...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...
  • 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 198
精华内容 79
关键字:

富文本编辑器是做什么的