精华内容
下载资源
问答
  • html网页富文本编辑器插件wangEditor富文本编辑器下载
  • HTML 富文本编辑器插件 CKEditor

    千次阅读 2017-05-18 15:31:32
    CKEditor 首页:http://ckeditor.com/ 一、使用 1、将ckeditor整个文件夹放到网站资源目录下。 2、 在要添加ckeditor的网页上加入ckeditor.js。...在要转换成富文本的textarea下方编写js:CKEDITOR.replace('te
    CKEditor 首页: http://ckeditor.com/

    一、使用

    1、将ckeditor整个文件夹放到网站资源目录下。

    2、 在要添加ckeditor的网页上加入ckeditor.js。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!--<script src="ckeditor/ckeditor.js"></script>-->
        <script src="resourse/ckeditor/ckeditor.js"></script>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    3、 在要转换成富文本的textarea下方编写js:CKEDITOR.replace('textarea的name')
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!--<script src="ckeditor/ckeditor.js"></script>-->
        <script src="resourse/ckeditor/ckeditor.js"></script>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <textarea rows="30" cols="50" name="editor01">请输入.</textarea>
        <script type="text/javascript">CKEDITOR.replace('editor01');</script>
    </body>
    </html>



    二、添加 【粘贴图片为 base64 格式】插件

    下载 CKEditor 时需要添加 Paste image as base64 插件
    点击 【Add to my editor】,【Build My Editor】下载自定义 CKEditor,可选风格、插件、皮肤、语言等。
    展开全文
  • Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.
  • 微信小程序富文本编辑器官方插件editor为微信小程序前端和图片接收后端,基于微信官方演示程序,去掉了多余的东西,加了一个后端接收图片的代码,直接可以使用,其他语言参照接收程序很简单。直接可以用。
  • 前端使用wangEditor插件实现富文本编辑器功能,简单方便,容易上手。
  • html文本编辑器富文本。 支持插入图片,网络和本地图片。 支持插入表情,改变文字大小,颜色。非常的好用。
  • https://ckeditor.com/docs/ckeditor5/latest/builds/guides/whats-new.html富文本编辑器插件,需要的同学可以借鉴一下, 本人还未使用过。
  • 百度Ueditor在线富文本编辑器,很好用的,很容易上手,项目中经常会用到(本文件中带有写好的demo)
  • tinymce富文本编辑器集成demo,添加powerpaste插件,支持word、excel带格式粘贴。demo.html
  • 常用的富文本编辑器插件

    千次阅读 2019-09-18 15:22:56
    文章目录常用的富文本编辑器插件1、TinyMCE2、百度 ueditor|UEditor3、CKEditor 54、kindeditor5、bootstrap-wysiwyg 超微小的富文本编辑器6、html5编辑器|Squire7、wangeditor3 常用的富文本编辑器插件 1、TinyMCE...

    常用的富文本编辑器插件


    1、TinyMCE

    官网 : https://www.tiny.cloud
    在这里插入图片描述

    2、百度 ueditor|UEditor

    官网: http://ueditor.baidu.com/website/

    在这里插入图片描述

    3、CKEditor 5

    官网: https://ckeditor.com/ckeditor-5/

    在这里插入图片描述

    4、kindeditor

    官网 : http://kindeditor.net/demo.php

    在这里插入图片描述

    5、bootstrap-wysiwyg 超微小的富文本编辑器

    github 地址 : https://github.com/mindmup/bootstrap-wysiwyg/blob/master/bootstrap-wysiwyg.js

    代码就不到200行

    6、html5编辑器|Squire

    官网 : http://neilj.github.io/Squire/
    在这里插入图片描述

    7、wangeditor3

    文档地址 : https://www.kancloud.cn/wangfupeng/wangeditor3/335768

    展开全文
  • 非常好用简洁的AngularJS框架富文本编辑器,找了好久才发现,本人已经整理好,打开html页面就看到效果了
  • KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...
  • tinymce是很强大的富文本编辑器,可以去官网下载,这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用,此插件目前官网收费每月12美刀,我们就不花这钱了。以vue为例说明:将tinymce下载...
  • 在刚开发的项目之中,在移动端/PC端,需要一个富文本编辑器,要求:简单-轻量-实用。比较了几种编辑器后,选择了wangEditor。移动端的截图(手机效果好些):image.pngPC端的截图:image.png;在wangEditor的官网...

    在刚开发的项目之中,在移动端/PC端,需要一个富文本编辑器,要求:简单-轻量-实用。比较了几种编辑器后,选择了wangEditor。

    移动端的截图(手机效果好些):

    5bd67c2da98f

    image.png

    PC端的截图:

    5bd67c2da98f

    image.png;

    在wangEditor的官网(http://www.wangeditor.com/)中,提供了一些常用的工具,可以按需来配置,还可以自己二次封装:

    5bd67c2da98f

    image.png

    先说配置:在PC端直接引入 wangEditor.js来创建,在移动端用的vue.js模块开发,所以用的:npm install wangeditor来安装。

    移动端:

    1 . import wangeditor from 'wangeditor'来引入

    2 . this.editor = new wangeditor ('#div1')

    this.editor.customConfig.onchange = (html) => { this.editorContent = html };editor改变时,将里面的内容放进editorContent

    4 .配置需要的选项,具体的到官网查看

    this.editor.customConfig.menus = [

    'head',//

    'bold',//

    'list', // 列表

    'justify', // 对齐方式

    'image', // 插入图片

    'undo', // 撤销

    ];

    5.常用的配置:

    //关闭粘贴样式的过滤

    this.editor.customConfig.pasteFilterStyle = false;

    //忽略粘贴内容中的图片

    this.editor.customConfig.pasteIgnoreImg = true;

    // 使用 base64 保存图片

    this.editor.customConfig.uploadImgShowBase64 = true;

    // 隐藏“网络图片”tab

    this.editor.customConfig.showLinkImg = false;

    //改变z-index

    this.editor.customConfig.zIndex = 10;

    // 最大300M

    this.editor.customConfig.uploadImgMaxSize = 300 * 1024 * 1024

    this.editor.customConfig.customUploadImg = function (files, insert) {

    // files 是 input 中选中的文件列表

    // insert 是获取图片 url 后,插入到编辑器的方法

    // 上传代码返回结果之后,将图片插入到编辑器中

    insert(imgUrl)

    }

    6 . this.editor.create();//创建编辑器,到这里创建就完成了。

    7 . 但是你去发现在移动端,会不怎么适配,这时候就需要用 rem 来做适配。

    如果:想要自己改变样式,那么直接在node_moudles/wangwditor 下找到 wangEditor.js,来自行修改。

    PC端:在确保引入wangEditor.js之后,在之后的js中,写入:

    var editor = new E('#editor');

    editor.create();//就创建好了编辑器

    //说说里面的配置,PC端常用的未以下这些

    // 自定义菜单配置---选中你想要的来配置,

    editor.customConfig.menus = [

    'head', // 标题

    'bold', // 粗体

    'fontSize', // 字号

    'fontName', // 字体

    'italic', // 斜体

    'underline', // 下划线

    'strikeThrough', // 删除线

    'foreColor', // 文字颜色

    'backColor', // 背景颜色

    'link', // 插入链接

    'list', // 列表

    'justify', // 对齐方式

    'emoticon', // 表情

    'image', // 插入图片

    'table', // 表格

    'undo', // 撤销

    ];

    //插入链接

    editor.customConfig.linkCheck = function (text, link) {

    console.log(text) // 插入的文字

    console.log(link) // 插入的链接

    return true // 返回 true 表示校验成功

    // return '验证失败' // 返回字符串,即校验失败的提示信息

    };

    //处理图片,我用的是自定义的方式来选图,

    //如果想完全自己控制图片上传的过程,可以使用如下代码

    editor.customConfig.customUploadImg = function (files, insert) {

    // files 是 input 中选中的文件列表

    // insert 是获取图片 url 后,插入到编辑器的方法

    // 上传代码返回结果之后,将图片插入到编辑器中

    insert(imgUrl)

    }

    展开全文
  • 14款web前端常用的富文本编辑器插件

    千次阅读 2020-11-07 12:02:04
    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞...


    富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一样长。

    作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。

    到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

    下面是我收集的一些业界比较受欢迎的富文本编辑器,喜欢的朋友、用过的朋友可以一起看看,一起探讨。

    1、wangEditor

    网址:http://www.wangeditor.com/

    基于JavaScript和css开发的 Web富文本编辑器, 轻量、简洁、界面美观、易用、开源免费。

    2、TinyMCE

    网址:https://www.tiny.cloud/docs/demo/full-featured/

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。

    功能齐全,界面美观,就是文档是英文的,对开发人员英文水平有一定要求。

    3、百度ueditor

    网址:https://github.com/fex-team/ueditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,功能齐全,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,缺点是已经没有更新了。

    4、kindeditor

    网址:http://kindeditor.net/demo.php

    KindEditor 是一套开源的在线html编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

    KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、php、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。  

    5、Textbox

    网址:https://www.textbox.io/

    Textbox是一款极简但功能强大的在线文本编辑器,支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。

    此外,该工具还实现了屏幕阅读器等辅助技术,并符合WAI-ARIA可访问性标准。

    6、CKEditor

    网址:https://ckeditor.com/ckeditor-5/demo/

    CKEditor官方版是一款专业专业的在线文字编辑器,软件支持各种不同的浏览器,可以让用户们轻松在线编辑,CKEditor5官方版软件体积非常小巧,使用起来也十分方便快捷,还能与不同的编程语言相结合,是大家编辑网页代码的必备工具。

    7、quill

    网址:https://quilljs.com/

    Quill是轻型的编辑器,样式一般(黑白风),功能中等,它的代码高亮功能比较强,同样支持行内编辑模式,工具条可自定义。

    开源免费,项目活跃,一直有人维护。

    8、simditor

    网址:https://simditor.tower.im/

    simditor是Tower平台使用的富文本编辑器,是一款轻量化的编辑器,界面简约,功能实用,插件不是很多,功能要求不高的可以使用。

    虽然是国内出品,但文档是英文的。开源免费。

    9、summernote

    网址:https://summernote.org/

    summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。

    summernote开源免费,该项目一直比较活跃,一直都有人在维护。summernote同样依赖于jquery和bootstrap,使用前先引入这两项。

    10、jodit

    网址:https://xdsoft.net/jodit/

    Jodit是一款使用纯TypeScript编写的(无需使用其他库),美观实用的所见即所得(WYSIWYG)开源富文本编辑器,支持中文,超强自定义。  

    11、Editor.md

    网址:https://pandao.github.io/editor.md/

    功能非常丰富的编辑器,左端编辑,右端预览,非常方便,完全免费。

    12、froala Editor

    网址:https://www.froala.com/wysiwyg-editor

    界面非常好看,功能非常强大,非常好用(非免费,可破解)

    13、eWebEditor

    网址:http://www.ewebeditor.net/

    eWebEditor外观和使用风格都和微软 Word很类似,功能很多。工具条可以定制,运行速度很快。

    导入文件接口很多,支持word、excel、pdf、ppt直接导入,目前版本不支持代码高亮,不适合纯技术平台使用,适合内容编辑人员使用。

    eWebEditor有很长的历史了,是典型的传统富文本编辑器,不论是界面,还是功能都比较传统。eWebEditor是收费的,但也有免费的精简版,精简版没有后台功能。

    14、dhtmlxEditor

    网址:https://dhtmlx.com/docs/products/dhtmlxRichText/

    DHTMLX组件是一整套基于js的UI库,功能强大,其中包含编辑器dhtmlxEditor。

    该编辑器可以直接集成到Angular,react和vue.js框架中,该编辑器还同时支持Markdown和富文本。

    支持普通视图和类似word一样的页面视图,支持全屏幕,工具支持自定义,包括工具条颜色和样式等。

    dhtmlxEditor分为免费版和收费版,免费版具有绝大多数功能,而且免费版是开源的你可以在代码级别随便扩充。

    最后

    富文本编辑器产品真的非常多,以上只是本人接触过的一些,相信还有很多很好的富文本存在,其实也没必要全都试一遍,只有最适合自己的,才是最好的。


    最后

    • 欢迎加我微信(winty230),拉你进技术群,长期交流学习...

    • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

    点个在看支持我吧

    展开全文
  • 主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生...
  • 超级富文本编辑器支持移动端pc端
  • 富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞...
  • 百度编辑器UEditor 2.0插件使用说明在你想要用编辑器的模板页面加如下代码即可:{:Core::hook('ueditor',['name'=>'content','width'=>750,'height'=>200,'default_str'=>'留言内容','toolbars'=>[['...
  • Textarea - 富文本编辑器插件前端技术,textarea,文本编辑器,插件,ueditor,tiny,editor,2015-03-06 09:40:39这个东西很复杂,想想就很复杂,想想就自己不想写。哈哈,javascript可不是我的强项,会很累的,会死人的。...
  • 整理15款实用javascript富文本编辑器

    万次阅读 2019-04-29 16:29:57
    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 2bootstrap-wysiwyg 官方网址:...
  • 百度umeditor富文本编辑器插件扩展

    千次阅读 2020-12-22 17:51:32
    富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资料根据这些资料琢磨出了如果给umeditor添加...
  • 1、npm安装编辑器组件 npm install vue-quill-editor --save 2、在components文件夹创建ue.vue组件,如下 <!-- 组件代码如下 --> <template> <div> <script id="editor" type="text/plain...
  • tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示
  • Vue-Quill-Editor 是一个基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。 该插件只兼容 IE10 以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。 一、实现效果: 二、使用方法: 1...
  • 提供微信小程序中因为需要展示html富文本文件而出现的问题
  • jQuery富文本编辑器插件-wysiwyg.js

    千次阅读 2018-12-20 16:50:46
    利用wysiwyg.js开发的一款十分强大的、jQuery富文本编辑器插件。wysiwyg.js富文本编辑器体积小,支持选择、键盘、占位等众多事件,该富文本编辑器的兼容性十分好,甚至兼容IE6。 对应的源码路径为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,862
精华内容 4,344
热门标签
关键字:

html富文本编辑器插件