精华内容
下载资源
问答
  • 富文本编辑器  富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,它的历史...

    富文本编辑器

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

     作为一个技术人员,手上备上两款富文本编辑器还是很有用的,指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了,毕竟从开发上讲,每个富文本编辑器的用法都是有区别的。

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

    1、TinyMCE

     TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。

     而且这么好的东西还是开源免费的,目前一直有人维护,这款编辑器使用的人非常多。

     更多介绍及下载:https://www.tiny.cloud/docs/demo/full-featured/

     

    2、CKEditor

     Ckeditor也是一款非常经典的富文本编辑器,官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本,FckEditor的用户现在基本都转移到Ckeditor了。

     Ckeditor有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。

     更多介绍及下载:https://ckeditor.com/

     

    3、UEditor

     UEditor 是由百度出品的富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源免费。这款编辑器用过的人也非常多,功能非常全面,插件很多,还可以很方便插入百度地图,接入十分简单。

     16年之后百度没有怎么更新了,不过现有的功能也足够用了。UEditor分为UE版(全功能版)和UM版(精简版),大家可以根据自己使用环境选择不同的版本。

     更多介绍及下载:http://ueditor.baidu.com/website/

     

    4、wangEditor

     wangEditor轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。

     更多介绍及下载:http://www.wangeditor.com/

     

    5、kindeditor

     KindEditor历史也很长了,用户数也不少,国内某公司出品。免费开源。界面类似于office word,界面和功能中规中矩,文档齐全,使用还算方便。

     更多介绍及下载:http://kindeditor.net/demo.php

     

    6、simditor

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

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

     更多介绍及下载:https://simditor.tower.im/

     

    7、bootstrap-wysiwyg

     bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器,界面简洁大方。使用需要先引入bootstrap。

     个人觉得bootstrap-wysiwyg这一长串像乱码一样的名字影响了它的推广和使用~ ~毕竟轻型使用环境还是很多的。

     更多介绍及下载:http://mindmup.github.io/bootstrap-wysiwyg/

     

    8、summernote

     summernote是一款轻量级的富文本编辑器,比较容易上手,使用体验流畅,支持各种主流浏览器。summernote开源免费,该项目一直比较活跃,一直都有人在维护。

     summernote同样依赖于jquery和bootstrap,使用前先引入这两项。

     更多介绍及下载:https://summernote.org/

     

    9、Froala

     Froala是一款功能丰富的富文本编辑器,界面分类清晰,容易集成,容易升级,支持主流浏览器,具有行内编辑功能。Froala代码示例很多,可以集成在很多js框架里如React.js,Aurelia,Angular,Ionic,Django等。插件很多,易于扩充功能。

     Froala是收费的,不过前端是开源的,如果要使用后台是要交费的(如果你使用国人强大的crack技能那就是另外一回事了~ ~)。目前有三个定价方式:基础版(239美元)、专业版(1199美元)和企业版(1999美元)。

     更多介绍及下载:https://www.froala.com/wysiwyg-editor

     

    10、Quill

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

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

     更多介绍及下载:https://quilljs.com/

     

    11、FreeTextBox

     FreeTextBox功能强大,前端支持主流浏览器,但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制,运行速度一般。FreeTextBox分为免费版和pro收费版,一般情况免费版本功能已经足够用了。

     更多介绍及下载:http://freetextbox.com/

     

    12、dhtmlxEditor

     DHTMLX组件是一整套基于JS的UI库,功能强大,其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular,React和Vue.js框架中,该编辑器还同时支持Markdown和富文本。

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

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

     更多介绍及下载:https://dhtmlx.com/docs/products/dhtmlxRichText/

     

    13、eWebEditor

     eWebEditor外观和使用风格都和微软 Word很类似,功能很多。工具条可以定制,运行速度很快。导入文件接口很多,支持word、excel、pdf、ppt直接导入,目前版本不支持代码高亮,不适合纯技术平台使用,适合内容编辑人员使用。

     eWebEditor有很长的历史了,是典型的传统富文本编辑器,不论是界面,还是功能都比较传统。

     eWebEditor是收费的,但也有免费的精简版,精简版没有后台功能。

     更多介绍及下载:http://www.ewebeditor.net/demo/

     

    最后

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

     如果你用过其中的一种,或者你用过其他好用的富文本编辑器,欢迎交流分享。

     如果你还喜欢现在流行的markdown编辑器,请看我的另一篇文章《几款主流好用的markdown编辑器介绍》

     如果想了解markdown编辑器和富文本编辑器的区别,请参考《markdown编辑器与富文本编辑器优缺点比较,哪个更好用》

     

    转载请注明原文地址:https://blog.csdn.net/davidhzq/article/details/100842866

     

     

    展开全文
  • 1.安装 # npm install tinymce -S 2.把node_modules\tinymce里面的文件包括tinymce文件夹全部复制到static文件夹下面,如下图 ...3.在mian.js中引入tinymce(也可以在组件中引入) ...Vue.prototype.$tinymce = ...

    1.安装 

    # npm install tinymce -S

    2.把node_modules\tinymce里面的文件 包括tinymce文件夹 全部复制到static文件夹下面,如下图

    3.在mian.js中引入tinymce(也可以在组件中引入)

    import Tinymce from 'tinymce'
    Vue.prototype.$tinymce = Tinymce; 

    4.完整代码

    <template>
        <div class="SEditor">
            <textarea class="my_editor" id="Editor"  v-model="Editortext"></textarea>
        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                Editortext:'',
                }
            },
            mounted() {
            this.tinymce();
            },


            beforeDestroy() {

    //这个必须要加,不然初始化的时候会有问题
                this.$tinymce.remove()
            },
            methods: {
                tinymce() {
                    let _this = this;


                    //这一句代码是重点 不写会报错theme.js:1 Uncaught SyntaxError: Unexpected token <
                    _this.$tinymce.baseURL = '/static/tinymce'


                    _this.$tinymce.init({
                        selector: "#Editor",
                        language_url: '../../../../static/tinymce/zh_CN.js',//设置中文
                        language: 'zh_CN',
                        plugins: [ //配置插件:可自己随意选择,但如果是上传本地图片image和imagetools是必要的
                            'advlist autolink link image lists charmap  preview hr anchor pagebreak ',
                        ],
                        //工具框,也可自己随意配置
                        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ',
                        image_advtab: true,
                        table_default_styles: {
                            width: '100%',
                            borderCollapse: 'collapse'
                        },
                        image_title: false, // 是否开启图片标题设置的选择,这里设置否
                        automatic_uploads: true,
                        // 图片异步上传处理函数
                        images_upload_handler: (blobInfo, success, failure) => {
                            var formData;
                            formData = new FormData();
                            formData.append('images',blobInfo.blob(), blobInfo.filename());
                                // _this.$api.uploadScenicFace这个是我调用后台图片上传接口的函数
                                _this.$api.uploadScenicFace(formData, _this.token, function(data) {
                                    // 图片上传成功以后调用success,图片就可以在富文本编辑器中显示了
                                    success(data.url);
                                });
                        },
                        init_instance_callback: function(editor) {
                            editor.on('keyup', () => {
                                // 获取富文本编辑器里面的内容
                                _this.Editortext = editor.getContent();
                            });
                        }
                    }).then(resolve => {
                        // 初始化富文本编辑器里面的内容
                        resolve[0].setContent(_this.Editortext)
                    });
                },

                }
        }
    </script>

    5.纠错

    theme.js:1 Uncaught SyntaxError: Unexpected token <

    设置一下baseURL

    _this.$tinymce.baseURL = '/static/tinymce'

    更多功能配置可以到官方网站上进行查看https://www.tiny.cloud/docs/api/tinymce/root_tinymce/
    完整实例https://gitee.com/songtaohong/tinymce.git

    新封装的vue-tinymce

    传送门:https://blog.csdn.net/vipsongtaohong/article/details/118755976

    展开全文
  • 简单模式、默认模式富文本编辑器: 默认模式html页面: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &...

    官方下载地址:http://kindeditor.net/demo.php

    下载插件:

    简单模式、默认模式富文本编辑器:

    默认模式html页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js 
    
    "></script>
        <script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
        <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
    
        <script>
            var editor;
            KindEditor.ready(function(K) {
                editor = K.create('textarea[name="content"]');
            });
        </script>
    </head>
    <body>
    <h3>默认模式</h3>
    <textarea id="seditor" name="content" style="width: 800px; height: 400px; visibility: hidden;">KindEditor</textarea>
    <input value="点击获取编辑器的内容" onclick="getContent()" type="button">
    <h3>展示区</h3>
    <div id="show" style="border:1px solid red;width:600px;height:500px;word-break:break-all;">
    
    </div>
    
    <script type="text/javascript">
        function getContent(){
            editor.sync();
            alert($('#seditor').val());
            $('#show').html($('#seditor').val());
        }
    </script>
    
    </body>
    </html>

     

    效果:

    展开全文
  • tinymce富文本编辑器的上传图片大小默认为100%,可以在content.min.css.js里设置默认上传图片的大小 如下代码所示,这样默认上传的图片大小是富文本编辑器的80%,而且图片也不会变形。对于原尺寸不超过富文本编辑器...

    tinymce富文本编辑器的上传图片大小默认为100%,可以在content.min.css.js里设置默认上传图片的大小
    如下代码所示,这样默认上传的图片大小是富文本编辑器的80%,而且图片也不会变形。对于原尺寸不超过富文本编辑器80%宽度的图片不会受改变

    .mce-content-body p img{
      max-width: 80%;
      width: auto;
      height: auto;
    }
    
    展开全文
  • Android 图片混排富文本编辑器控件

    千次阅读 2018-02-25 10:50:18
    一个Android 图片混排富文本编辑器控件(仿兴趣部落)
  • 支持粘贴图片富文本编辑器

    千次阅读 2019-06-11 10:03:54
    就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中。Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧 ? 我希望打开文档doc直接复制粘贴...
  • 本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给大家。 tinymce.init({ selector: “textarea...
  • 问题原因:模型中对富文本编辑器内容字段做了自动转化,功能是通过cmf_replace_content_file_url('content',true);实现的。代码如下: /** * 替换编辑器内容中的文件地址 * @param string $content 编辑器内容 ...
  • 在其他的项目里通过import方式可以直接使用,因为项目本身是用react写的,这个wangEditor富文本编辑器刚好可用于React项目,且页面看起来比较简洁清爽,故搬运过来作了些配置,完善了上传图片的功能,并添加了将输入...
  • layui富文本编辑器上传图片

    千次阅读 热门讨论 2019-11-23 17:51:14
    layui是贤心大神的开源前端框架,也是对后端菜鸟非常友好的一个框架,平常开发的时候就比较喜欢使用这个,最近刚好写网站就到了layui的富文本编辑器,遇到一些有意思的事情,就和大家聊聊。 首先准备工作先到官网...
  • Ueditor富文本编辑器修改图片上传路径 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framework开发,网站前台使用ThinkPHP3.2开发,所以后台的...
  • 现在在web端的输入框需要直接复制图片进去,于是就用上了富文本编辑器。 正文 在研究了多个富文本编辑器后,基于免费、好用、简洁的原则(主要是基于免费),最终选择使用wangEditor。 使用场景 从Word中复制图片、...
  • Vue tinymce富文本编辑器整合

    万次阅读 多人点赞 2018-10-23 17:54:57
    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…) 下面开始工作: 插件安装 tinymce官方提供...
  • 我看大多富文本编辑器只能上传图片或者视频,但有没有带上传附件的
  • 最近自己写了一个网站用到了富文本编辑器,刚开始的时候只是简单文章编写的的功能,很快就写好了,可是”boss”非要将网站做成响应式的,无奈的我只好去用bootstrap去修改写前台的页面,对于一个菜鸟来说修改网站的...
  • quill富文本编辑器自定义上传图片

    千次阅读 2019-06-26 12:00:40
    quill富文本编辑器自定义上传图片自定义上传组件 自定义上传组件 富文本编辑器quill在上传图片的时候会转换为base64格式,这样后端直接存图片而不是图片地址了,需要修改为存图片地址的方式,在查看github之后发现...
  • 今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器。文档各大大牛已经整理出来了 但是图片上传到服务器这块比较杂 大部分都是说上传到服务器的图片...
  • Android富文本编辑器

    2020-02-17 11:45:52
    Android富文本编辑器,一款支持撤销、加粗、斜体、下划线、有序无序列表、对齐、改文字大小、改文字颜色、插入图片、插入视频等功能,并且可设置cookie,自定义素材操作菜单的的编辑器。 github地址:...
  • 项目一直在用ueditor富文本编辑器,一直是对编辑器的图片、音频、视频的及地图进行配置,使编辑器正常使用,没有认真使用过编辑器就行文章编辑,今天编辑部突然说编辑器有问题,发现 图片选择左对齐或右对齐,保存...
  • 页面使用了Summernote富文本编辑器富文本编辑器里面可以上传图片上传音频也可以对文章内容进行排版 想把富文本编辑器里面的所有编辑的内容(包括格式)存到后台数据库里。 ![图片说明]...
  • layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久...
  • 项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档 ...
  • 百度富文本编辑器UEditor

    千次阅读 2016-08-30 14:10:01
    百度富文本编辑器介绍 百度富文本编辑器 百度富文本编辑器使用 如何使用百度富文本编辑器 百度 UEditor Ueditor ueditor
  • 富文本编辑器Quill,粘贴图片组件
  • 就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中。Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧 ? 我希望打开文档doc直接复制粘贴...
  • 使用 SpringBoot + Ckeditor 富文本编辑器图片上传

    千次阅读 热门讨论 2018-02-28 13:06:42
    在一些页面中,进行 发表文章、评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器 使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑器主要有两个,ckeditor 和 百度的 ...
  • 最开始在CSDN写博客的时候不熟悉Markdown语法,前面几篇博客都是用富文本编辑器编辑的,后来发现各种问题,于是去熟悉了一下Markdown,感觉瞬间神清气爽,找到了写博客的乐趣。先说我的结论: 如果想浅尝辄止,请...
  • 说到这个wangeditor3富文本编辑器,只能说自己才疏学浅被搞得头晕,花了将近三四天才弄好这个简单的上传图片功能= = 主要原因在于还不清楚普通上传图片的具体步骤,直接着手使用富文本编辑器来实现功能,而且这个...
  • 怎样在富文本编辑器插入图片

    千次阅读 2019-04-27 11:21:21
    怎样在富文本编辑器插入图片 开发工具与关键技术:Visual Studio 作者:胡宁淇 撰写时间:2019年4月13日 富文本编辑器的功能很强大,它可以在HTML页面上实现类似Word文档的效果,可以在页面中实现对文字和图片...
  • 富文本编辑器Editormd的配置使用

    千次阅读 2020-04-18 00:09:12
    我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器,在富文本编辑器中,我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的,我们只需要在页面中配置一下插件提供的一些API即可。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,677
精华内容 8,670
关键字:

富文本编辑器内编辑图片