HTML富文本编辑器Quill的使用

html-css08

HTML富文本编辑器Quill的使用,第1张

两种主题

toolbar的自定义:

quill取消了getHtml()的API,getContents()返回的是Delta对象,一种JSON数组,getText()返回文本域里对应字符串。

因平台需将用户编辑的格式传回后台生成邮件的正文,而邮件的正文是Html格式,通过查issue找到获取Html的方法: quill.container.firstChild.innerHTML

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。下面简单的介绍一下富文本编辑器的用法和简要的原理。

1、什么是富文本编辑器?

抛开专业的定义,用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子,大家大多都使用过网上的一些博客系统或者论坛贴吧吧,那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式,此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器,这个就是富文本编辑器的常见应用,如下图:

富文本编辑器不同于我们平时的文本编辑器,但是其功能确实和我们的平时使用的word的是类似的,只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。

2、富文本编辑器的原理和应用

关于富文本编辑器的原理,一些人可能以为富文本编辑器的原理十分的复杂,事实上也并非如此,当然功能强大的编辑器自然会很难实现。网页上的富文本编辑器的大致原理是使用JavaScript技术将用户的输入的内容和设置的样式转换为html、css等浏览器可以认识的代码,其核心的实现技术就是JavaScript和html 、css等前端技术。

富文本编辑器的应用,比如做为一个网站的开发者,当我们需要一个发布文章的功能时候,用户可能不知道html代码,此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。

html5 在线富文本编辑器方法步骤:

<!DOCTYPE html>

<html>

<head>

<title>Images upload</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<link rel="stylesheet" type="text/css" href="../css/style.css" />

<script type="text/javascript" src="../lib/jquery-1.7.min.js"></script>

<link rel="stylesheet" href="../redactor/css/redactor.css" />

<script src="../redactor/redactor.js"></script>

<script type="text/javascript">

$(document).ready(

function()

{

$('#redactor_content').redactor({ imageUpload: '../demo/scripts/image_upload.php' })

}

)

</script>

</head>

<body>

<div id="page">

<textarea id="redactor_content" name="content" style="height: 460px">

<h2>Hello and Welcome</h2>

<p>I never did quite grasp him, though he endeavored to explain it to me upon numerous occasions. I suggested telepathy, but he said no, that it was not telepathy since they could only communicate when in each others' presence, nor could they talk with the Sagoths or the other inhabitants of Pellucidar by the same method they used to converse with one another.</p>

<p>"What they do," said Perry, "is to project their thoughts into the fourth dimension, when they become appreciable to the sixth sense of their listener. Do I make myself quite clear?"</p>

<p>"You do not, Perry," I replied. He shook his head in despair, and returned to his work. They had set us to carrying a great accumulation of Maharan literature from one apartment to another, and there arranging it upon shelves. I suggested to Perry that we were in the public library of Phutra, but later, as he commenced to discover the key to their written language, he assured me that we were handling the ancient archives of the race.</p>

<p>During this period my thoughts were continually upon Dian the Beautiful. I was, of course, glad that she had escaped the Mahars, and the fate that had been suggested by the Sagoth who had threatened to purchase her upon our arrival at Phutra. I often wondered if the little party of fugitives had been overtaken by the guards who had returned to search for them. Sometimes I was not so sure but that I should have been more contented to know that Dian was here in Phutra, than to think of her at the mercy of Hooja the Sly One. Ghak, Perry, and I often talked together of possible escape, but the Sarian was so steeped in his lifelong belief that no one could escape from the Mahars except by a miracle, that he was not much aid to us—his attitude was of one who waits for the miracle to come to him.</p>

</textarea>

</div>

</body>

</html>