<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/htmlcharset=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:700pxheight:300px">
<strong>HTML内容</strong></textarea>
<div>
<button type="submit">发表</button>
<button type="reset">取消</button>
</div>
</form>
</div>
</body>
</html>
备注：这里需要引用kindeditor包，这个包可以在kindeditor的官网下载，官网上有
参考富文本：LayaAir下 HtmlDivElement的使用汇总
富文本HtmlDivElement的使用
HTML文本
1.简单的Html属性设置：Bold、Font、FontSize、Color、下划线
示例如下：
2、获取Html文本的实际内容、获取html文本的实际宽高（contextWidth、contextHeight）
示例如下：
3、设置文本的水平居中对齐(align需要和width配合使用)，换行（
换行需要有行高）、空格（ ；）
【注意：目前不支持文本的垂直居中对齐，开发可以将（图片的高度-文本的高度）/2的值赋给文本的Y值，进行垂直居中对齐的替代设置】
示例如下：
4、实现超链接
示例如下：
5、实现html页面跳转
示例如下：
6、简单的图片显示
示例如下：
7、追加文本内容appendHtml
示例如下：
8、解决IOS手机上英文字母显示偏下的问题
在style样式中加垂直向上对齐valign：top属性
示例如下：
总结：以上的方法仅供参考，某些方法只是实现方式的一种，开发者也可以通过其他方式进行设置，如果有哪些方法没有涉及到的，欢迎开发者提出来，我们会陆续进行补充！
9.换行
设置style.width会自动换行，手动换行需要在span标签后添加br
10.描边
参考 HTMLDivElement文本字体描边怎么弄呢
11.斜体
不支持
12.滚动条
参考 建议官方针对HtmlDIVElement出和TextArea相关的功能
htmldivelement组件是没有滚动条的，它不具备输入功能，不能编辑，有点类似flash的htmltext文本可以实现富文本图文混排。textarea是支持滚动条的文本输入框，内容本身不能存在图片，不支持文本局部链接。
可以把htmldivelement放到一个容器里，然后把这个容器放到panel里，panel是支持滚动条的，这样可以通过内容的填充显示出滚动条！
13.参考示例
可以通过纯文本粘贴功能，将复制的标签转换成纯文本格式，再根据需要添加格式和样式。另外，也可以使用html清理工具，将复制的标签中的不必要的元素和样式进行过滤和清理，保留必要的内容和样式。
这样可以确保编辑器中的内容格式干净整洁，符合预期。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）