HTML富文本编辑器Quill的使用

两种主题

toolbar的自定义:

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

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

php获取富文本框内的html

跟一般的表单一样,只是这个表单是textarea,如:

<textarea name=’richtext’> ……..</textarea>,在post里面使用$_POST[‘richtext’]取到,然后可以过滤,也可以考虑用js获取后过滤

什么是RichText?在HTML中能否实现用户输入RichText内容

RichText,多信息文本,或称富文本,是一种支持图像和文字格式的文本,通常采用富文本技术的输入框成为“富文本编辑器”。

在HTML中有很多这样的案例,如百度的富文本编辑器,许多CMS系统的发布编辑等。

实现原理方面,一般可以用”contenteditable属性”,例如:

<div contenteditable=”true”>我是富文本框哦</div>

这样的话这个div中的内容就可以编辑,还可以复制粘贴内容,会保留源格式。

富文本编辑器怎么用

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

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

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

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

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

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

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

如何利用html编辑文章

使用ckeditor这个插件,就能很方便的在html中编辑文章了,这个富文本编辑器功能很强大

<!DOCTYPE HTML>

<html>

<meta charset=”UTF-8″ />

<head>

<title></title>

</head>

<script src=””></script>

<script src=”//cdn.ckeditor.com/4.7.0/full/ckeditor.js”></script>

<script type=”text/javascript”>

$(function(){

editor_content = CKEDITOR.replace(‘editplace’);

})

</script>

<style type=”text/css”>

html,

body {

margin: 0;

padding: 0;

}

.demo {}

</style>

<body>

<div class=”demo”>

<textarea name=”editplace” rows=”” cols=”” id=”dd” placeholder=””></textarea>

</div>

</body>

</html>

谁会将富文本编辑器代码插入到html页面中

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />

<title>在页面中添加一个富文本编辑器kindeditor</title>

<!–start kindeditor–>

<style>

form {

margin: 0;

}

textarea {

display: block;

}

</style>

<!–引用路径正确与否决定kindeditor是否被成功引用–>

<link rel=”stylesheet” href=”kindeditor/themes/default/default.css”/>

<script charset=”utf-8″ src=”kindeditor/kindeditor.js”></script>

<script charset=”utf-8″ src=”kindeditor/lang/zh_CN.js”></script>

<script>

KindEditor.ready(function(K) {

window.editor = K.create(‘#editor_id’);

});

</script>

<!–end kindeditor–>

</head>

<body class=””>

<div><h>回复话题</h></div>

<div>

<form action=”” method=”post”>

<!–编辑器editor 这个id=”editor_id”是上面KindEditor.ready(function(K));函数创建一个

文本编辑框来替换textarea需要用到的id–>

<textarea id=”editor_id” name=”content” style=”width:700px;height:300px;”>

<strong>HTML内容</strong></textarea>

<div>

<button type=”submit”>发表</button>

<button type=”reset”>取消</button>

</div>

</form>

</div>

</body>

</html>

备注:这里需要引用kindeditor包,这个包可以在kindeditor的官网下载,官网上有