return (
<Editor
inline={false} // false：经典编辑模式；true:行内编辑模式
initialValue={editorHtml}
init={{
height: height,
language_url: ‘tinymce/langs/zh_CN.js’,
language: ‘zh_CN’,
// skin_url: ‘tinymce/skins/ui/oxide’,
content_style: ‘* { padding:0; margin:0; } img {max-width:100% !important }’,
lineheight_val:
‘1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5’,
fontsize_formats: ‘8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt’,
font_formats:
“微软雅黑=‘微软雅黑’;宋体=‘宋体’;黑体=‘黑体’;仿宋=‘仿宋’;楷体=‘楷体’;隶书=‘隶书’;幼圆=‘幼圆’;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings”,
plugin_preview_width: 375, // 预览宽度
plugin_preview_height: 668,
plugins: ‘link lists image code table wordcount media fullscreen preview paste’,
powerpaste_word_import: ‘merge’,
toolbar:
‘fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat’,
paste_data_images: true,
statusbar: true, // 底部的状态栏
menubar: true, // 最上方的菜单
branding: false, // 水印“Powered by TinyMCE”
convert_urls: false,//去除URL转换
images_upload_handler: (blobInfo, success, failure) => {
handleImageUpload(blobInfo, success, failure)
},
}}
onEditorChange={handleEditorChange}
/>
);
}
export default UploadImage;
- 第五步：使用的组件
//富文本内容
const [content, setContent] = useState(’’);
//默认内容(可以是需要编辑的内容)
const [editorHtml, setEditorHtml] = useState(’’);
/**
-
@param text 富文本内容
*/
const handleEditorTextChange = (text: string) => {
setContent(text)
}
/**
-
@param blobInfo 富文本上传图片
-
@param success
-
@param failure
*/
const handleImageUpload = async (blobInfo: any, success: Function, failure: Function) => {
const response = await getUpPic({ img_type: “testUp”, img_byte: “data:image/jpeg;base64,” + blobInfo.base64() });
if (response && response instanceof Object) {
success(response.data)
} else {
failure(‘上传失败’)
}
}
- 第六步：ajax请求
import request from ‘@/utils/request’;
/**
- 图片上传参数
*/
export type ImgParamsType = {
img_type: string;
img_byte: string;
};
/**
-
上传图片
-
@param params
-
@returns
*/
export async function getUpPic(params: ImgParamsType): Promise {
return request(’/UpPic’, {
method: ‘POST’,
data: { …params },
requestType: ‘form’
});
}
完成
最后
- Android进阶学习全套手册
关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。目前，我手头上整理到的电子书还算比较全面，HTTP、自定义view、c++、MVP、Android源码设计模式、Android开发艺术探索、Java并发编程的艺术、Android基于Glide的二次封装、Android内存优化——常见内存泄露及优化方案、.Java编程思想 （第4版）等高级技术都囊括其中。
-
Android高级架构师进阶知识体系图
关于视频这块，我也是自己搜集了一些，都按照Android学习路线做了一个分类。按照Android学习路线一共有八个模块，其中视频都有对应，就是为了帮助大家系统的学习。接下来看一下导图和对应系统视频吧！！！
-
Android对标阿里P7学习视频
-
BATJ大厂Android高频面试题
这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等
系统视频吧！！！
[外链图片转存中…(img-hUqiGP76-1644043287726)] -
Android对标阿里P7学习视频
[外链图片转存中…(img-XjjuTX4u-1644043287727)]
- BATJ大厂Android高频面试题
这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等
