免费JS富文本编辑器 总有一款会适合你
作者:极客小俊
一个把逻辑思维转变为代码的技术博主
概述: javascript Text Editor
我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟office中的word界面非常类似!
富文本编辑器的使用是与word非常类似的,所见即所得的排版方式,操作也与word类似，点击鼠标使用相应功能就行,对用户而言使用上相对比较简单，也比较容易进入状态!
如图
总的来说富文本编辑器就是一种基于JS并且可内嵌于web浏览器中所见即所得的文本编辑器!
富文本编辑器不同于普通的文本编辑器，开发者可到网上下载免费的富文本编辑器内嵌于网站应用程序里面, 那么作为一个开发者，熟悉几款富文本编辑器是很有必要的，说不一定某个项目就要集成进去,到时候现就不会去花太多时间研究它!
下面列举几款常用的富文本编辑器,供大家参考!
概述
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等, 并且界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。
支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。
而且这么好的东西还是开源免费的，而且一直有人维护，这款编辑器使用的人非常多 , TinyMCE自带的大部分插件均提供社区开源版，可免费使用且可商用!
下载
下载地址: https://www.tiny.cloud/
使用参考: http://tinymce.ax-z.cn/
根据需要下载社区版或者开发版
小提示
开发版包含未被压缩过的源码，方便开发者学习分析, 也就是说开发版包含TinyMCE社区版，开发工具和完整的源代码!
快速使用
步骤1：引入TinyMCEJS脚本
在<head>中插入如下代码，注意自己的项目路径, 将tinymce.min.js源文件引入至项目中
步骤2: 初始化TinyMCE, 将TinyMCE初始化为页面的一部分
当引用了TinyMCE.js后就可以使用tinymce.init()方法来进行初始化了，并且tinymce.init()方法内部接收一个初始化对象, 内部包含各种参数，必须的参数就是selector意思是允许通过css选择器指定TinyMCE要绑定的html内容容器，传统模式需指定textarea，内联模式可指定div或其它html块元素
举个栗子
效果如下
注意:
当然这里建议新手还是使用textarea元素, TinyMCE会将内容塞进textarea元素，可以通过正常的post方法获取到编辑器中的内容, 如果你使用第三方框架或采用其他元素配合ajax提交则可能不会主动触发内容同步，需要自己执行同步 或者 自己执行dom操作来获取内容!
概述
Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万，它是在非常著名的FCkEditor基础上开发的新版本。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。
官方地址: https://ckeditor.com/
使用参考: https://ckeditor.com/docs/index.html
下载
点击下载按钮
根据需要下载
快速使用
步骤1：引入CkeditorJS脚本
在<head>中插入如下代码，注意自己的项目路径, 将ckeditor.js源文件引入至项目中
步骤2: 初始化Ckeditor
CKEditor就像一个在你网页中的文本区域一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果，并不容易。实际上CKEditor就是使用一个文本区域来传递它的数据到服务器上，所以，你必需在页面上创建一个文本容器，这里建议使用<textarea></textarea>。
引用ckeditor.js后就可以使用ClassicEditor.create()来进行创建编辑器，ClassicEditor.create()内部参数为指定的Ckeditor要绑定的文本容器。
举个栗子
效果如下
概述
wangEditor 是一款使用 Typescript 开发的无框架依赖Web 富文本编辑器， 轻量、简洁、易用、开源免费。
它兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。但是不支持移动端。
下载地址：https://www.wangeditor.com/
使用地址：https://www.wangeditor.com/doc/
下载
进入到以下页面
我们只需要将wangEditor.js或者wangEditor.min.js这两个文件拿出来就行了。
快速使用
步骤1：引入wangEditorJS脚本
在<head>中插入如下代码，注意自己的项目路径, 将wangEditor.js或者wangEditor.min.js源文件引入至项目中
步骤2: 初始化wangEditor
你需要在页面上创建一个文本容器，然后利用以下代码就可以实现这个编辑器了。
举个栗子
效果如下
概述
KindEditor是一套使用JavaScript编写的开源的HTML可视化编辑器，让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor非常适合在CMS、商城、论坛、博客、电子邮件等互联网应用上使用。
下载地址：http://kindeditor.net/down.php
使用地址：http://kindeditor.net/docs/index.html
下载
快速使用
步骤1：引入KindEditorJS脚本
在<head>中插入如下代码，注意自己的项目路径, 将kindeditor-all-min.js或者kindeditor-all.js源文件引入至项目中,并且还要将文件夹lang的zh-CN.js引入到项目中，如下：
步骤2: 初始化KindEditor
在需要显示编辑器的位置添加textarea输入框。注意必须给textarea设置一个id或者类class选择器，建议使用id选择器，因为id选择器是页面独一无二的，而类class选择器可以存在多个，容易产生混乱。
举个栗子
效果如下
概述
Simditor是Tower平台使用的富文本编辑器，是一款基于jQuery和module.js，轻量化开源的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。支持的浏览器：IE10+、Chrome、Firefox、Safari。
下载地址：https://github.com/mycolorway/simditor/releases
使用地址：https://simditor.tower.im/docs/doc-usage.html
下载
快速使用
步骤1：引入Simditor相关的JS与CSS文件
在<head>中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：
以上文件除了jQuery.min.js需要单独下载外，simditor.css、module.js、hotkeys.js、simditor.js 到你下载的Simditor中的site/assets文件夹中去找。还要注意js文件的引入顺序，Simditor是基于jQuery和module.js，所以要引入到simditor.js之前。
步骤2: 初始化Simditor
要使用 Simditor，首先你需要一个textarea这样的元素，并且给textarea设置一个id选择器。
举个栗子
效果如下
概述
Summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。它是基于jquery和bootstrap，使用前先引入这两项。
下载地址：https://summernote.org/
使用地址：https://summernote.org/getting-started/#get-summernote
下载
快速使用
步骤1：引入Summernote相关的JS与CSS文件
在<head>中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：
步骤2: 初始化Summernote
在你希望页面中呈现 Summernote 编辑器的位置设置一个文本容器，并且给文本元素设置一个id选择器。
举个栗子
效果如下
概述
Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。
下载地址：https://quilljs.com/docs/download/
使用地址：https://quilljs.com/docs/quickstart/
注意：Quill的使用文档是英文的，英语不好的可以借助翻译软件！！！！
下载
进入一下页面
快速使用
步骤1：引入Quill相关的JS与CSS文件
在<head>中插入如下代码，注意自己的项目路径, 将以下文件引入到项目中，如下：
步骤2: 初始化Quill
在你希望页面中呈现 Quill 编辑器的位置设置一个文本容器，并且给文本元素设置一个id选择器。
举个栗子
效果如下
以上的JS编辑器的详细使用请参照官方以及相关文档，根据你的项目需求，挑选出适合的富文本编辑器，希望对你有所帮助！！
谢谢您的阅读！!
\”点赞\” \”评论\” \”收藏\”
大家的支持就是我坚持创作下去的动力!
如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出、或者你有更好的想法，欢迎一起交流学习
Scratch3.0离线中文版
Scratch3.0是由MIT（麻省理工学院）米切尔·瑞斯尼克(Mitch Resnick)教授带领的“终身幼儿园团队”(Lifelong Kindergarten Group)开发的一款积木式少儿编程软件，因为操作简单方便，非常的适合初学者使用，适用于创作故事、动画、游戏等，非常的全面。软件能够满足一些家长对孩子的期望，帮助孩子在小时候便打下编程的基础，主要是通过简单的游戏来激发孩子们的编程潜能，通过游戏、图片、动画、音乐各方面启蒙，让孩子不仅学的开心，还能学到货真价实的编程思想，从小渗透，在孩子成长过程中能够起到非常重要的作用。全新的Scratch3.0版本在原有的基础上提供了更多的扩展插件，支持横式和直式的图形式程序撰写，让最后的动态成品更为精致，一个全新的声音编辑器和许多新的编程模块你值得拥有，尤其是在核心思想上的“分享”做得更好了。刚刚开始接触Scratch2.0的小朋友设置造型中心的时候内心肯定是崩溃的，因为你拖动造型一次，造型中心的位置都会移动一下，给人的错觉就是造型中心一直在变化，但是3.0的版本中固定了中心位置，只要将造型拖到中心位置即可。ps：小编为大家带来的Scratch3.0离线中文版，为单机版本，软件即便是在无网络的环境下也可完美运行，且软件中默认语言为中文，对于初学者来说十分的友好，感兴趣的朋友不容错过，快来下载学习吧。下载：http://www.ddooo.com/softdown/215490.htm
1、中文语言，方便所有国内用户使用；2、构成程序的命令和参数通过积木形状的模块来实现；3、用鼠标拖动模块到程序编辑栏就可以了；4、中间的部分是编辑好的程序代码；5、左边是可以用来选择的功能模块；6、右边上部是程序预览和运行窗口；
1、内核更新Scratch3.0使用H5和JS语言编写的，是目前主流的技术框架。这样的好处是打通了PC和移动端的壁垒，强化了Scratch的一个核心思想“分享”。从电脑上做出的作品可以直接在手机里打开，方便作品的传播。
2、界面更新Scratch3.0界面更新，将舞台区移到右边，编程序放在中间，更加方便编程者编程程序；积木区不再严格分区，可以通过滑动鼠标来选择区块，减少点击率，增加了用户的体验度。
3、更多的扩展Scratch3.0整合并添加了插件模块，例如文字朗读模块，可以让角色真正的“说话”；翻译功能可以翻译多种语言；扩展了Makey Makey插件，把创意有趣味性的硬件加进来；乐高EV3在新版本中可以使用，增加了应用场景。
4、角色和背景编辑能中文输入在2.0版本中，最让人崩溃的是没有办法输入中文并且文字框不可以二次选中。更新的3.0版本中优化了这个功能，可以在编辑的文字框中输入中文，并且写过的文字框可以继续复选。大大方便了编辑效率。
5、造型中心点固定刚刚开始接触Scratch2.0的小朋友设置造型中心的时候内心肯定是崩溃的，因为你拖动造型一次，造型中心的位置都会移动一下，给人的错觉就是造型中心一直在变化。但是3.0的版本中固定了中心位置，只要将造型拖到中心位置即可
【怎么生成可执行文件】首先打开我们的Scratch3.0离线版，写一个小的程序，保存文件。打开文件夹你会发现保存的文件类型是。sb格式。准备一个scratch2exe工具，安装完成后，运行软件，点击1找到刚才保存的小程序选择打开。依次点击2，选择一个ico文件作为小程序的图标。第三步点击小绿旗，完成以上三步操作，点击确定，此时你会发现电脑中多了一个可执行的exe文件。双击exe文件，你会发现可以正常出现游戏界面，用户只能使用无法更改的。
【怎么走迷宫】打开Scratch3.0，从本地文件夹中上传角色；在网上下载一张迷宫图，最好有点难度，在背景中导入迷宫图；将scratch默认的角色猫删除；点绘制新角色，可以选择小的动画角色，也可以用图形代替，这边小编选择的是圆形，画一个红色的小球；点脚本，进入脚本编辑区；点事件，将“当按下空格键”拖到右边的编辑区，并改为当按下上移键；
在运动图标里，将面向0度的方向拉到下面；将移动10步移到下面，并将步速改为2步；同样的方法建好向下、向左、向右运动的脚本；点绘制新角色，输入press spacebar to start;给小球添加脚本，在用户按空格键时，让小球定位在迷宫图的起点位置；继续添加脚本，控制小球的运动，如果遇到黑色就跳到起点，重新开始，如果遇到终点的蓝色就显示\”you win!\”;当按下空格键，小球来到迷宫的起点为，按上、下、左、右光标控制键，小球开始在人的指挥下运动，遇到迷宫壁黑色就跳回起点，遇到迷宫终点的蓝色就显示you win
1、Scratch账号有什么用？在没有账号的情况下，你可以打开别人的作品、查看评论及论坛文章，甚至还可以创作自己的作品。不过保存和共享作品、写评论、论坛发帖，以及社区中的其他「社交」活动（例如给别人的作品「点赞」）这些操作都需要账号。2、如何创建账号？在Scratch首页点击「加入」即可。你需要回答一些问题并提供你的电子邮件地址。几分钟就完成了，而且完全免费！3、我要如何知道我的账号已经通过验证？登录Scratch账号后，在电子邮件设置页面可以查看账号是否已被验证。已验证的电子邮件地址会显示一个绿色的小对勾，否则会显示「电子邮件地址未验证」的橙色文字。4、我一定要验证我的账号吗？未经验证的账号仍可使用Scratch的许多功能，包括创建和保存作品（但不能分享）。5、我忘记了用户名或密码，如何重置？在重置密码页面输入用户名或电子邮件地址。网站将发送一封含有你的用户名和重置密码链接的电子邮件，点击链接可重置密码。6、如何从「Scratcher 新手」变成「Scratcher」？创建账号之后，你会被标记为「Scratch新手」。要转变为「Scratcher」，你应该创作和共享作品，对其他Scratcher提供有帮助的评论，还要耐心等待！等你符合条件之后，你的个人资料页面会显示邀请你成为Scratcher的链接，之后你将在Scratch网站拥有更多能力。（注意，我们不受理Scratch新手升级为Scratcher的申请）。7、什么是扩展？在Scratch编辑器里，你可以添加若干组额外的积木，它们就叫「扩展」。例如，有的扩展可以对硬件设备进行编程（像micro:bit或乐高机器人套件），有的扩展可以在Scratch作品中翻译文字。未来我们会继续增加新的扩展，而Scratch能做的事情也会越来越多。8、如何在作品中添加一个扩展？点击Scratch程序编辑器左下角的「扩展」按钮，就会出现一个Scratch扩展的列表。选择其中一个扩展，作品中就会出现一组新的积木。以后每次打开作品时，该扩展会自动加载。可以向同一个作品中添加多个扩展。9、如何制作我自己的Scratch扩展？Scratch团队未来会发布扩展的制作说明和指南。届时，你就可以把扩展提交给Scratch团队，我们会考虑是否将其加入Scratch 3.0的官方扩展库。我们还会提供开发和发行「实验」扩展的指南，你可以在自己的电脑上使用这些扩展进行创作，但不能共享给Scratch在线社区。
Three.js和Babylon.js开发游戏
Three.js和Babylon.js都是非常流行的WebGL库，它们都可以用来开发3D游戏，但它们各自有不同的特点和优势。以下是对两者的比较，以帮助您决定哪个更适合您的游戏项目。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎洽谈合作。
Three.js
优点:
– 社区支持：Three.js拥有一个庞大的社区，提供了大量的教程、插件和资源。
– 灵活性：Three.js相对轻量级，提供了大量的自定义选项，可以更好地控制渲染过程。
– 文档和示例：Three.js有详尽的文档和大量的示例，对于初学者来说更容易上手。
缺点:
– 游戏开发支持：Three.js本身并不是专门为游戏开发设计的，因此可能需要额外的库（如 cannon.js 用于物理模拟）来支持游戏开发。
– 性能优化：对于复杂的游戏，可能需要开发者进行更多的性能优化。
Babylon.js
优点:
– 游戏开发友好：Babylon.js专门为游戏开发设计，提供了许多游戏开发所需的内置功能，如物理引擎（通过ammo.js）、高级粒子系统、易于使用的动画工具等。
– 高级功能：Babylon.js提供了许多高级功能，如反射、折射、环境遮挡、后期处理效果等。
– TypeScript支持：Babylon.js是用TypeScript编写的，对于使用TypeScript的开发者来说，类型安全和自动完成功能是非常有用的。
缺点:
– 社区规模：虽然Babylon.js的社区正在快速增长，但它仍然比Three.js的社区小。
– 学习曲线：Babylon.js的某些高级功能可能需要更多的学习时间。
结论
如果您正在开发一个游戏，并且需要以下功能，Babylon.js可能是更好的选择：
– 内置的游戏开发工具和功能（如物理引擎、粒子系统）。
– 更高级的渲染效果和后期处理。
– TypeScript支持。
另一方面，如果您的游戏项目需要更多的自定义和灵活性，或者您已经熟悉Three.js，那么Three.js可能更适合您。Three.js的轻量级特性和广泛的社区支持意味着您可能会更容易找到解决方案和资源来构建您的游戏。
最终，选择哪个库应该基于您的具体需求、团队的技能水平以及项目的特定要求。建议您尝试两个库，并基于原型开发的结果来做出决定。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
