编码

如何将所见即所得编辑器添加到您的网站-一个完整的指南

好吧, 所见即所得是一个编辑器,它可以让你预览最终结果...

写的 丹尼尔Roncaglia · 6分钟阅读 > < / div > < / div >
如何将所见即所得编辑器添加到您的网站 < / div > < / div > < / div > < / div >

所见即所得或 你看到的就是你得到的 是否有一个编辑器可以让您在界面或文档上线之前预览最终结果. 简单的单词, 所见即所得编辑器 即时显示的内容live在网上相同的方式,在预览. 因此,无论你对网页内容做什么编辑,在生成最终输出时看起来都是一样的.

是不是不可思议?

是的,这也是它越来越受欢迎的原因. 市场上有很多所见即所得编辑器,它们在创建动态网页时很有用, 博客, 等等

除了这个, 许多高级的所见即所得编辑器允许你上传图片, Flash电影文件到web服务器, 等等.

您可能会想:为什么我要使用所见即所得编辑器?

所见即所得编辑器是初学者最优秀的工具之一. 他们帮助快速创建网页,并把它们放在互联网上,而不需要任何编码知识. It doesn’t matter if you don’t know HTML coding at all; you can still create visually appealing websites without any difficulty.

为了理解这一点,让十博体育投注了解一下它比标准文本编辑器提供的一些好处.

所见即所得编辑器的好处

  • 更好的代码导航

如果您使用了传统的基于文本的编码编辑器, 您必须注意通过搜索代码行来找到所需的内容. 虽然这不是什么大问题,但有时在编辑模板时它会让人感到恼火.

所见即所得编辑器不存在这样的问题. 可以使用编辑器导航功能快速定位页面上的特定元素. 您还可以进行相应的更改. 一些高级所见即所得编辑器,如 Froala 提供即时预览功能,让您看到更改将如何影响最终输出.

  • 从MS Word/OpenOffice Writer复制/粘贴

所见即所得编辑器允许您从MS Word/OpenOffice Writer复制和粘贴文本到您的网站. 一些像Froala这样的高级编辑器允许你从Microsoft Word和Excel中复制/粘贴.

这个特性将会节省很多时间, 特别是当你需要复制一长串的文本和图像时. 区别在于粘贴的文本是否符合站点的格式, 因为WordPress网站不会在段落中使用空格.

  •  自动格式化

所见即所得 HTML编辑器比传统的基于文本的编码编辑器更好的地方在于其自动格式化代码的能力, 确保所有标签都到位. 这将防止你为了清理错误而搞砸乏味的编辑过程.

  • 没有语言障碍

所见即所得 HTML编辑器允许您使用所需的任何语言处理内容. 这意味着如果你的网站是基于俄罗斯,并被翻译成俄语, 可以直接写入内容管理系统. 在俄罗斯,您不需要担心显示的内容.

注意: 一些高级的所见即所得HTML编辑器,如Froala,可以在任何语言中工作(包括东亚语言). 这就是为什么它在世界各地被使用 100多个国家.

  • 轻松创造标题 

使用所见即所得HTML编辑器,您不必担心编写格式化代码. 点击一个按钮,你就可以快速写出引人注目的标题. 除此之外,你将有无限的可能性去尝试标题. 这将为您节省时间和成本.

  • 标记的援助

所见即所得 HTML编辑器允许您创建内容,而无需具备广泛的编码知识. 它为您呈现内容的可视化表示. 这使您能够基于美学和布局对页面进行更改,而不是涉及到技术约束. 这将使您有更多的时间进行设计,而不是参与编码.

  • 无缝的超链接

所见即所得HTML编辑器无法与之匹配 超链接 页面之间. 传统的基于文本的编码编辑器要求链接位置的精确性. 如果链接没有放置在离目标足够近的地方, 你的读者注意到它们的几率很低. 因此,用户端不会执行任何期望的操作. 但是使用所见即所得HTML编辑器,突出显示文本并单击即可完成这项工作.

  • 快速的变化

在早期的天, 没有高级编辑, 所以你必须在代码中做一些改变, 然后你必须把它发布到服务器上才能看到最终结果. 但是使用所见即所得编辑器,您不需要经历这些麻烦. 您所需要做的就是在内容管理系统中进行更改, 保存后,您可以立即看到更改.

  • 高性能

所见即所得编辑器是专门为考虑性能而设计的. 有些像Froala这样的编辑器甚至可以经受住最严格的测试,即使在繁重的任务中也能提供流畅的性能. 它能够进行足够的初始化 不到40毫秒. 非常快,不是吗?

  • 可访问性

谈到可访问性,许多标准文本编辑器都无法满足日益增长的需求. 轻量级 像Froala这样的编辑器在各种条件下提供丰富的文本编辑. 它符合 WCAG 2, 508节.0, wai - aria 在各种情况下提供无与伦比的访问.

在经历了这些好处之后,你一定会很好奇去尝试一下,不是吗?

谁来阻止你? 只需将其添加到您的站点,然后自己查看结果.

如何将所见即所得编辑器添加到您的网站?

嗯,当要将所见即所得编辑器添加到您的站点时,有许多相同的选项. 这个指南是关于添加一个 Froala 所见即所得编辑器 你的网站.

如何将所见即所得编辑器添加到您的网站
如何将所见即所得编辑器添加到您的网站

你可能想知道为什么Froala?

作为一个对开发人员友好的编辑器,它提供了进一步扩展其功能的能力. Froala附带 超过30个插件 打开盒子. Froala的优点是它的优化允许你在各种平台上使用,比如桌面, 笔记本电脑, 平板电脑, 等等. 此外, it doesn’t matter whether you are using an Android or iOS platform; Froala is compatible with both.

它的独特之处在于积分很简单. 您可以将它与WordPress、react或任何前端技术集成在一起,没有任何困难.

十博体育投注通过以下几个简单的步骤将其添加到您的站点.

步骤1:安装

当涉及到安装Froala编辑器时,有 很多方面 这样做. 这里使用了NPM. 这是最好和最简单的选择之一.

NPM, 输入下面给出的命令.

npm安装froala-editor

安装过程完成后,将下面给出的代码嵌入到HTML文件中.

var editor = new FroalaEditor(' #example ')

第四步:显示内容

包含下面给出的CSS文件,以在富文本编辑器之外保留已编辑HTML的外观.


<link href = "../ css / froala_style.最小值.css” rel=”stylesheet” type=”text/css” />

不要忘记在元素中使用 fr-view.


  这里是用Froala富文本编辑器编辑的HTML.

下面是一个完整的示例表单,展示了Froala所见即所得HTML编辑器与站点的集成.

e

<html>
<head>
<link href = " http://cdn.jsdelivr.net/npm/froala-editor@latest / css / froala_editor.pkgd.最小值.css” rel=”stylesheet” type=”text/css” />
<script type = " text / javascript " src = " http://cdn.jsdelivr.net/npm/froala-editor@latest / js / froala_editor.pkgd.最小值.js”>script>


head>
<body>
<div id=”example”>div>
<div class=”fr-view”>
  这里是用Froala富文本编辑器编辑的HTML.
div>
body>
<script>
var editor = new FroalaEditor(' #example ')
script>
html>

下面是表单最终的外观. 您现在可以使用它来编辑或创建您想要的富内容类型. 只需键入或插入文本并执行操作即可查看结果. 你也可以得到帮助 文档. 它将为您提供一种简单的方法来充分利用Froala的潜力.

无论是文本还是图形, 与标准文本编辑器相比,Froala允许您更精确地编辑内容. 它允许你试验布局, 颜色, 和格式化的内容,而不需要任何编码技能. 这就是为什么世界各地的人都选择这位编辑. 那么为什么不成为他们中的一员,利用这个有利于你的机会呢.

最后的结论

市场上有许多所见即所得编辑器可供选择, 但最重要的是它们易于实现和使用. Froala 下一代所见即所得 HTML编辑器是否已经获得了广泛的欢迎,因为它在一个地方提供了两者. 本指南向您展示了将Froala所见即所得HTML编辑器与站点的集成. 您所需要做的就是按照相同的顺序实现给定的步骤,从而享受高级所见即所得编辑器的好处.

< / div >