精华内容
下载资源
问答
  • 所见即所得

    2019-09-24 21:50:23
    更根HTML语言的原则,它是一门所见即所得的语言,我想有天高级语言也能像它一样,所见即所得的来做,且不痛快 转载于:https://www.cnblogs.com/Impulse/archive/2006/04/19/379599.html...
    更根HTML语言的原则,它是一门所见即所得的语言,我想有天高级语言也能像它一样,所见即所得的来做,且不痛快

    转载于:https://www.cnblogs.com/Impulse/archive/2006/04/19/379599.html

    展开全文
  •  富文本编辑器(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

     

     

    展开全文
  • 所见即所得编辑器Froala WYSIWYG Editor Froala Editor is a lightweight WYSIWYG rich text editor with a nice flat design. It is the first WYSIWYG editor with image resize that works even on mobile ...

    所见即所得编辑器

    Froala WYSIWYG Editor
    Froala WYSIWYG Editor

    Froala WYSIWYG Editor Froala Editor is a lightweight WYSIWYG rich text editor with a nice flat design. It is the first WYSIWYG editor with image resize that works even on mobile devices. The editor covers a lot of functionalities through the default buttons, but we may sometimes need to add in another behaviour. The goal of this tutorial is to add two custom buttons: a button to clear all the HTML in the editable area and one to insert a specific HTML next to the cursor.

    Froala所见即所得的编辑器 Froala编辑器是一种轻巧的所见即所得的富文本编辑器,具有良好的平面设计。 这是第一个具有图像调整大小的所见即所得编辑器,即使在移动设备上也可以使用。 编辑器通过默认按钮涵盖了许多功能,但有时我们可能需要添加其他行为。 本教程的目标是添加两个自定义按钮:一个按钮,用于清除可编辑区域中的所有HTML,另一个按钮用于在光标旁边插入特定HTML。

    Froala WYSIWYG Editor is an easy to include and easy to use plugin. It requires jQuery 1.10.2 or higher and the iconic font named Font Awesome. So the following lines are all you need in order to use this plugin on your website:

    Froala所见即所得编辑器是一个易于包含且易于使用的插件。 它需要jQuery 1.10.2或更高版本以及名为Font Awesome的标志性字体。 因此,以下各行是您在网站上使用此插件所需要的:

    
    <!DOCTYPE html>
    <html>
        <head>
            <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css"
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
            <link href="../css/froala editor.min.css" rel="stylesheet" type="text/css">
            <script src="../js/froala editor.min.js"></script>
        </head>
        <body>
            <!-- To add the editor on your website all you need is a line of HTML -->
            <div id=”edit”></div>
        </body>
    </html>
    
    
    <!DOCTYPE html>
    <html>
        <head>
            <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css"
            <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
            <link href="../css/froala editor.min.css" rel="stylesheet" type="text/css">
            <script src="../js/froala editor.min.js"></script>
        </head>
        <body>
            <!-- To add the editor on your website all you need is a line of HTML -->
            <div id=”edit”></div>
        </body>
    </html>
    
    

    Now just call the editable method and the editor will be initialized:

    现在,只需调用editable方法,即可初始化编辑器:

    
    <script>
        $(function() {
            $('#edit').editable()
        });
    </script>
    
    
    <script>
        $(function() {
            $('#edit').editable()
        });
    </script>
    
    

    Froala WYSIWYG Editor Inline

    Froala WYSIWYG Editor Inline

    At this point we can write and edit anything we want inside the editable area. A popup with the default editing options will appear as you type or when you select the text you want to edit (customizable through ‘alwaysVisible’ option). This is called inline editing. We can also use a basic editor that always keeps a toolbar at the top. To do this just disable inline mode when you initialize the editor:

    此时,我们可以在可编辑区域内编写和编辑所需的任何内容。 键入时或选择要编辑的文本时,将显示带有默认编辑选项的弹出窗口(可通过“ alwaysVisible”选项自定义)。 这称为内联编辑。 我们还可以使用基本的编辑器,该编辑器始终将工具栏置于顶部。 为此,只需在初始化编辑器时禁用嵌入式模式:

    
    <script>
        $(function() {
            $('#edit').editable({inlineMode: false})
        });
    </script>
    
    
    <script>
        $(function() {
            $('#edit').editable({inlineMode: false})
        });
    </script>
    
    

    The buttons can be easily customized by choosing which of them appear in the editor, changing the way they are grouped or even create our own buttons. This can be done by using the ‘customButtons’ and ‘buttons’ options. The ‘customButtons’ option is a JSON that defines the new buttons. This is how a button definition should look like:

    通过选择在编辑器中显示的按钮,更改其分组方式甚至创建我们自己的按钮,可以轻松地自定义按钮。 这可以通过使用“ customButtons”和“ buttons”选项来完成。 “ customButtons”选项是定义新按钮的JSON。 按钮定义应如下所示:

    
    buttonName: {
      title: 'Title',
      icon: {
        type: 'icon-type',
        value: 'icon-value'
      },
      callback: function (editor) {
      }
    }
    
    
    buttonName: {
      title: 'Title',
      icon: {
        type: 'icon-type',
        value: 'icon-value'
      },
      callback: function (editor) {
      }
    }
    
    

    – title is the tooltip that appears when you go with mouse over a button. If you are using a translation, you have to make sure that you add it to the translation array of the language you are using.

    –标题是当您将鼠标移到按钮上时出现的工具提示。 如果使用的是翻译,则必须确保将其添加到所用语言的翻译数组中。

    – icon is the icon of the button. It has two properties that need to be set:

    –图标是按钮的图标。 它具有两个需要设置的属性:

    • type can be one of the following options: font (Font Awesome Icon), txt (simple text) or img (image).

      type可以是以下选项之一:字体(真棒字体图标),txt(纯文本)或img(图像)。
    • value has to be a Font Awesome class for font (fa fa-*), a character for txt or an URL to for img.

      值必须是用于Font(fa fa- *)的Font Awesome类,用于txt的字符或用于img的URL。

    – callback is the function that will be called when the button is hit. It will get the editor instance as argument.

    – callback是单击按钮时将调用的函数。 它将获得编辑器实例作为参数。

    After we define the new buttons through the ‘customButtons’ JSON, we have to include their name in the ‘buttons’ option in the position where we want them to be placed:

    在通过“ customButtons” JSON定义新按钮之后,我们必须将它们的名称包含在“按钮”选项中我们希望放置它们的位置:

    
    <script>
        $(function() {
            $('#edit').editable({
                // Define custom buttons.
                customButtons: {
                  // Clear HTML button with text icon.
                  clear: {
                    title: 'Clear HTML',
                    icon: {
                      type: 'font',
                      value: 'fa fa-times'
                    },
                    callback: function (editor){
                      editor.setHTML('');
                    }
                  },
                  // Insert HTML button.
                  insertHTML: {
                    title: 'Insert HTML',
                    icon: {
                      type: 'txt',
                      value: '+'
                    },
                    callback: function (editor){
                      // Focus on editor if it's not.
                      if (!editor.selectionInEditor()) {
                        editor.$element.focus();
                      }
                      // Insert HTML.
                      editor.insertHTML('My new HTML');
                      // Save HTML in undo stack.
                      editor.saveUndoStep();
                    }
                  }
                },
                // Set what buttons to display with separator between them. Also include the name
                // of the buttons  defined above in 'customButtons'.
                buttons: ['undo', 'redo' , 'bold', 'sep', 'clear', 'insertHTML']
            })
        });
    </script>
    
    
    <script>
        $(function() {
            $('#edit').editable({
                // Define custom buttons.
                customButtons: {
                  // Clear HTML button with text icon.
                  clear: {
                    title: 'Clear HTML',
                    icon: {
                      type: 'font',
                      value: 'fa fa-times'
                    },
                    callback: function (editor){
                      editor.setHTML('');
                    }
                  },
                  // Insert HTML button.
                  insertHTML: {
                    title: 'Insert HTML',
                    icon: {
                      type: 'txt',
                      value: '+'
                    },
                    callback: function (editor){
                      // Focus on editor if it's not.
                      if (!editor.selectionInEditor()) {
                        editor.$element.focus();
                      }
                      // Insert HTML.
                      editor.insertHTML('My new HTML');
                      // Save HTML in undo stack.
                      editor.saveUndoStep();
                    }
                  }
                },
                // Set what buttons to display with separator between them. Also include the name
                // of the buttons  defined above in 'customButtons'.
                buttons: ['undo', 'redo' , 'bold', 'sep', 'clear', 'insertHTML']
            })
        });
    </script>
    
    

    [sociallocker]

    [社交储物柜]

    现场演示
    下载Froala编辑器

    [/sociallocker]

    [/ sociallocker]

    翻译自: https://www.script-tutorials.com/froala-wysiwyg-editor/

    所见即所得编辑器

    展开全文
  • 所见即所得编辑器by Christian Neumanns 克里斯蒂安·纽曼斯(Christian Neumanns) 文档标记语言与所见即所得编辑器相比的优势 (The advantages of Document Markup Languages vs WYSIWYG editors) 解释为什么您...

    所见即所得编辑器

    by Christian Neumanns

    克里斯蒂安·纽曼斯(Christian Neumanns)

    文档标记语言与所见即所得编辑器相比的优势 (The advantages of Document Markup Languages vs WYSIWYG editors)

    解释为什么您可能要转储字处理器。 (An explanation of why you might want to dump your word processor.)

    Introduction

    介绍

    Did you ever wonder what’s the best tool to write an article, user manual, book, or any other kind of text document?

    您是否想知道编写文章,用户手册,书籍或任何其他类型的文本文档的最佳工具是什么?

    There are many options to choose from. Most people use a What-You-See-Is-What-You-Get (WYSIWYG) editor (also called a text processor), such as Google Docs, LibreOffice or Word. However, more and more people are writing their documents…

    有很多选择。 大多数人使用“所见即所得”(WYSIWYG)编辑器(也称为文本处理器),例如Google Docs,LibreOffice或Word。 但是,越来越多的人正在编写他们的文档…

    翻译自: https://www.freecodecamp.org/news/the-advantages-of-document-markup-languages-vs-wysiwyg-editors-829dc8362219/

    所见即所得编辑器

    展开全文
  • vue 所见即所得 Vue Wysiwyg (vue wysiwyg) A lightweight WYSIWYG editor for Vue.js 用于Vue.js的轻量级所见即所得编辑器 用法 (Usage) In your main.js: 在您的main.js中: Vue.use(wysiwyg, {}); // config...
  • 所见即所得编辑器Recently I spoke at the Highland Fling Conference in Edinburgh and, as part of my presentation on Choosing the right Content Management System, I had a bit of a rant about the use of ...
  • vue 所见即所得开发Wix, Squarespace, Shopify — if you’ve ever watched some sort of tech-related video on YouTube, you would have heard these names in some form. They stalk you through various ad ...
  • 关于所见即所得

    2020-11-23 08:16:35
    <div><ol>能否实现当所见即所得和源码模式切换时,光标位置不变,目前切换会直接回到顶部</li><li>markdown能否支持反撤销,有时手误撤销,发现没有反撤销,就需要重新打一遍。 另外...
  • vue 所见即所得 Vue-html5-editor (Vue-html5-editor) Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 1.0+. Vue-html5-editor是html5所见即所得的编辑器,可实现...
  • 所见即所得编辑器Yesterday I read Mark Boulton’s blog post WYSIWTFFTWOMG and once again it highlights how little we have progressed in terms of how we as an industry provide modern content editing ...
  • .md 所见即所得News of the imminent release of WordPress 5.0 has been coming for months, but only now are we starting to find out the changes this milestone update will bring and how it will affect the...
  • 超级简单的所见即所得编辑器
  • wysibb, 所见即所得BBcode编辑器 WysiBB - 所见即所得的BBcode编辑器WysiBB是BBcode的一个jQuery可视所见即所得编辑器。 有关更多信息,请访问 wysibb.com 。 用法包含JQuery和WysiBB文件。<scrip
  • vue 所见即所得 Vue-Wysiwyg (vue-wysiwyg) A lightweight WYSIWYG HTML editor for Vue.js. 用于Vue.js的轻量级WYSIWYG HTML编辑器。 In your components: 在您的组件中: <wysiwyg v-model="myHTML" /> ...
  • 所见即所得 dialog

    2018-07-08 23:23:21
    我们平时在做普通页面的时候,当 app 运行起来时,所看到的界面,往往就是我们预览 xml 布局文件所看到的那样,即所见即所得。可是如果这些布局文件是放在 dialog 里展示的,情况就不一样了,往往要煞费苦心,才能...
  • 所见即所得加粗问题

    2020-12-05 08:45:27
    <div><p>所见即所得加粗字体中包含标点符号时,再编辑其他地方,这时会出现加粗失效的问题 <img alt="image" src="https://img-blog.csdnimg.cn/img_convert/ba3d9ce92951459f2823d6a0a144b421.png" />...
  • Medium.com所见即所得WYSIWYG编辑器的克隆,使用contenteditable API 实现富文本解决方案。
  • 所见即所得jQuery文本编辑器是一款基于Bootstrap3实现的,支持多国语言,适用于需要简单文本编辑的场合。
  • Text rich editor - 轻量级富文本编辑器 - 所见即所得
  • MathquillBasedEditor是一款所见即所得的jQuery数学公式编辑器插件。该数学公式编辑器依赖于mathquill,可以通过点击图标来直接生成乘方和开方等数学公式。
  • CKEditer之所见即所得

    2017-12-29 19:14:41
    CKEditer之所见即所得  CKEditer是比较常用的富文本编辑器,在编辑页面所呈现的文本样式,应该无差别显示在展示页面,即所谓的所见即所得。为了实现样式的统一,我们可以采用两种方式来展示CKEditer所保存下的数据...
  • HyperMD一个所见即所得的浏览器Markdown编辑器。 打破写作和预览之间的墙。
  • tui.editor(TOAST UI Editor)是一款所见即所得的Markdown编辑器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常强大,你可以编辑表格,UML图和图表等。
  • 前几日曾给大家介绍过一款国产的xhtml编辑器,今天要给大家推荐的TinyEditor,是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。
  • jwysiwyg, 所见即所得的jQuery插件 jWYSIWYG 0.97用户手册版权所有( c ) 2009 -2010 Juan Martínez,2011 Akzhan Abdulin和所有贡献者在 和许可协议license下的双重许可证。内容jWYSIWYG 0.9
  • uuHEdt(在线网页编辑器)是基于Web的所见即所得的HTML网页编辑器。 可以非常简单的在您的网站中嵌入可见即所得的网页编辑功能。广泛的支持常见的浏览器如IE, Opera, Firefox, Google Chrome and Safari。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,551
精华内容 2,620
关键字:

所见即所得