本文详细描述了如何在HarmonyOS应用中使用RichEditor组件创建一个富文本编辑框，包括功能栏的字体样式调整、颜色选择和图片插入，以及使用API11的相关操作和注意事项。
使用 richEditor 组件实现一个富文本编辑框，包含富文本编辑区域和功能栏，功能栏中有多个按键，可以调整字体大小、字体样式、字体颜色、布局，并可以插入图片。
api 版本：api11
主页面
import { TitleBar } from '../../../../common/TitleBar';
import { Title } from './Title';
@Extend(Column) function cardStyle() {
.backgroundColor(Color.White)
.borderRadius(24)
.width('100%')
.padding(5)
}
@Entry
@Component
struct RichEditorSample {
@State setStyle: Boolean = false;
@State setStyle1: Boolean = false;
@State setStyle2: Boolean = false;
@State setStyle3: Boolean = false;
@State setStyle4: Boolean = false;
@State setStyle5: Boolean = false;
@State setStyle6: Boolean = false;
@State styleDialog: Visibility = Visibility.None;
@State fontWeightSet: FontWeight = FontWeight.Normal;
@State fontStyleSet: FontStyle = FontStyle.Normal;
@State fontDecorationSet: TextDecorationType = TextDecorationType.None;
@State fontAlignLeftSet: TextAlign = TextAlign.Start;
@State fontAlignMiddleSet: TextAlign = TextAlign.Center;
@State fontAlignRightSet: TextAlign = TextAlign.End;
@State tipsValue: number = 32;
private start: number = -1;
private end: number = -1;
private fontColors: string[] = ["#FA2A2D","#FFBF00","#41BA41","#00AAEE","#3F56EA","#8A2BE2","#000000"];
controller: RichEditorController = new RichEditorController();
updateVisible(){
this.setStyle = !this.setStyle;
if(this.setStyle){
this.styleDialog = Visibility.Visible;
}else{
this.styleDialog = Visibility.None;
}
}
updateFontWeight(){
this.setStyle1 = !this.setStyle1;
if(this.setStyle1){
this.fontWeightSet = FontWeight.Bolder;
}else{
this.fontWeightSet = FontWeight.Normal;
}
}
updateFontStyle(){
this.setStyle2 = !this.setStyle2;
if(this.setStyle2){
this.fontStyleSet = FontStyle.Italic;
}else{
this.fontStyleSet = FontStyle.Normal;
}
}
updateFontDecoration(){
this.setStyle3 = !this.setStyle3;
if(this.setStyle3){
this.fontDecorationSet = TextDecorationType.Underline;
}else{
this.fontDecorationSet = TextDecorationType.None;
}
}
updateFontAlignLeft(){
this.setStyle4 = !this.setStyle4;
if(this.setStyle4){
this.fontAlignLeftSet = TextAlign.Start;
}else{
this.fontAlignLeftSet = TextAlign.JUSTIFY;
}
}
updateFontAlignMiddle(){
this.setStyle5 = !this.setStyle5;
if(this.setStyle5){
this.fontAlignMiddleSet = TextAlign.Center;
}else{
this.fontAlignMiddleSet = TextAlign.JUSTIFY;
}
}
updateFontAlignRight(){
this.setStyle6 = !this.setStyle6;
if(this.setStyle6){
this.fontAlignRightSet = TextAlign.End;
}else{
this.fontAlignRightSet = TextAlign.JUSTIFY;
}
}
build() {
Column() {
TitleBar({ title: $r('app.string.rich_editor_title') })
Scroll() {
Column() {
Title({title:$r('app.string.rich_editor_title')})
.height("10%")
RichEditor({ controller: this.controller })
.onReady(() => {
this.controller.addTextSpan("Hello World。\n" +
"Familiar images automatically give people a sense of calm and nostalgia. " +
"Early web designers liked the elements of the 1980s, but today, the aesthetics of the 1990s.\n",
{
style:
{
fontColor: Color.Black,
fontSize: 16
}
})
this.controller.addImageSpan($r("app.media.addPhoto"),
{
imageStyle:
{
size: ["100px", "54px"]
}
})
})
.onSelect((value: RichEditorSelection) => {
this.start = value.selection[0];
this.end = value.selection[1];
})
.height("50%")
.width("100%")
Stack() {
Column() {
Row({ space: 250 }) {
Text($r('app.string.rich_editor_style'))
.fontSize(14)
.padding({top:5})
Image($r('app.media.ic_close'))
.width(25)
.height(25)
.onClick(() => {
this.styleDialog = Visibility.None
})
}.height(25)
.margin({bottom:10})
Row({ space: 38 }) {
Image($r('app.media.ic_B_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontWeight()
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontWeight: this.fontWeightSet
}
})
}
})
Image($r('app.media.ic_I_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontStyle()
if(this.end!=this.start) {
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontStyle: this.fontStyleSet
}
})
}
})
Image($r('app.media.ic_U_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontDecoration()
if(this.end!=this.start) {
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
decoration: {
type: this.fontDecorationSet
}
}
})
}
})
Image($r('app.media.ic_left_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontAlignLeft()
if(this.end!=this.start) {
this.controller.updateParagraphStyle({
start: this.start,
end: this.end,
style:
{
textAlign:this.fontAlignLeftSet
}
})
}
})
Image($r('app.media.ic_middle_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontAlignMiddle()
if(this.end!=this.start) {
this.controller.updateParagraphStyle({
start: this.start,
end: this.end,
style:
{
textAlign:this.fontAlignMiddleSet
}
})
}
})
Image($r('app.media.ic_right_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontAlignRight()
if(this.end!=this.start) {
this.controller.updateParagraphStyle({
start: this.start,
end: this.end,
style:
{
textAlign:this.fontAlignRightSet
}
})
}
})
}
.height(25)
.margin({bottom:10})
Row({ space: 30 }) {
ForEach(this.fontColors,(item: string) => {
Circle({ width: 15, height: 15 }).fill(item)
.onClick(() => {
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontColor: item
}
})
}
})
})
}.height(25)
.margin({bottom:10})
Row({ space: 30 }) {
Text("Aa")
.width(24)
.height(24)
.fontSize(11)
.fontWeight(400)
.onClick(() => {
this.tipsValue = this.tipsValue - 2
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontSize: this.tipsValue/2
}
})
}
})
Slider({ style: SliderStyle.InSet, value: this.tipsValue })
.width(210)
.showTips(true, 'Size:' + this.tipsValue.toFixed())
.onChange(value => {
this.tipsValue = value
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontSize: this.tipsValue/2
}
})
}
})
Text("Aa")
.width(24)
.height(24)
.fontSize(17)
.fontWeight(400)
.onClick(() => {
this.tipsValue = this.tipsValue + 2
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontSize: this.tipsValue/2
}
})
}
})
}.height(25).margin({bottom:60})
}.visibility(this.styleDialog)
.width("100%")
.height("85%")
.margin({bottom:"85%"})
.zIndex(1)
.border({
radius: { topLeft: 15, topRight: 15 },
})
.backgroundColor($r('app.color.background_light_gray'))
Row({ space: 150 }) {
Image($r('app.media.ic_textstyle_normal'))
.width(40)
.height(40)
.onClick(() => {
this.updateVisible()
})
Image($r('app.media.ic_picture_normal'))
.width(35)
.height(35)
.onClick(() => {
this.controller.addImageSpan($r("app.media.addPhoto"),
{
imageStyle:
{
size: ["100px", "54px"]
}
})
})
}
.padding({top:"50%"})
.justifyContent(FlexAlign.Center)
.width("100%")
.height("15%")
.zIndex(3)
}.height("30%")
}
.alignItems(HorizontalAlign.Start)
.cardStyle()
.constraintSize({ minHeight: '100%' })
}
.width('95%')
.height('80%')
.backgroundColor($r('app.color.divider_block_color'))
}.height('100%')
.width('100%')
.backgroundColor($r('app.color.divider_block_color'))
.padding({ left: 20, right: 20 })
}
}
title 组件
@Component
export struct Title {
private title!: Resource;
build() {
Column() {
Row() {
Text(this.title)
.fontSize(24)
.fontWeight(FontWeight.Bold)
}
.margin({top:"2%",left:"5%"})
.width('100%')
}
.height('100%')
}
}
更新字体样式
@State setStyle: Boolean = false;
@State fontWeightSet: FontWeight = FontWeight.Normal;
private start: number = -1;
private end: number = -1;
controller: RichEditorController = new RichEditorController();
updateFontWeight(){
this.setStyle1 = !this.setStyle1;
if(this.setStyle1){
this.fontWeightSet = FontWeight.Bolder;
}else{
this.fontWeightSet = FontWeight.Normal;
}
}
Image($r('app.media.ic_B_normal'))
.width(15)
.height(15)
.onClick(() => {
this.updateFontWeight()
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontWeight: this.fontWeightSet
}
})
}
})
设置一个 boolean 类型变量 setStyle1，设置字体是否加粗，以 setStyle1 的值来控制
点击加粗按钮，setStyle 变为 true，修改 fontWeightSet 的值，再通过 RichEditor 组件控制器的方法 updateSpanStyle 改变选中字段的样式
自定义字体选择滑动条
@State tipsValue: number = 32;
Slider({ style: SliderStyle.InSet, value: this.tipsValue })
.width(210)
.showTips(true, 'Size:' + this.tipsValue.toFixed())
.onChange(value => {
this.tipsValue = value
if(this.end!=this.start){
this.controller.updateSpanStyle({
start: this.start,
end: this.end,
textStyle:
{
fontSize: this.tipsValue/2
}
})
}
})
初始字号为 16，随着 slider 组件的滑动，字号随之变化
总结：
通过 controller.updateSpanStyle 接口修改字体的样式，通过 controller.addImageSpan 来插入图片，使用了 RichEditor、Slider 等组件实现一个富文本编辑功能页面。
注意：
RichEditor 组件框架层未处理拉起输入法时的界面规避，需要应用层处理，代码如下：
import { KeyboardAvoidMode } from '@ohos.arkui.UIContext';
onWindowStageCreate(windowStage){
windowStage.loadContent('pages/Index', (err, data) => {
let a = windowStage.getMainWindowSync().getUIContext().getKeyboardAvoidMode();
windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);
if (err) {
Logger.error(TAG, `Failed to load the content. Cause: ${JSON.stringify(err)}`)
return
}
Logger.info(TAG, `Succeeded in loading the content. Data: ${JSON.stringify(data)}`)
})
}
在应用 MainAbility/MainAbility.ts 文件中实现
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习路线
-
HarmonOS基础技能
- HarmonOS就业必备技能
- HarmonOS多媒体技术
- 鸿蒙NaPi组件进阶
- HarmonOS高级技能
- 初识HarmonOS内核
- 实战就业级设备开发
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》
《鸿蒙生态应用开发V2.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
