Ueditor

UEditor是由百度开发的所见即所得的开源富文本编辑器，基于MIT开源协定，该富文本编辑器帮忙不少网站开发者解决富文本编辑器的难点。 UEditorPlus 是有 ModStart 团队基于 UEditor 二次开发的富文本编辑器，次要做了款式的定制，更合乎古代浏览器的审美。 在开发过程中解决了局部应用上的Bug，期待更多搭档一期退出保护。 版本介绍UEditorPlus v2.9.0 曾经公布。 新增：UEditorPlus 文档开源 https://gitee.com/modstart-lib/ueditor-plus-doc修复：插入视频中对齐形式 默认 按钮的 title 属性为 undefined 的问题 #gitee-2修复：catchremoteimage.js 中短少加载中图片变量的问题 #github-4修复：局部文字谬误拼写问题，欠缺局部正文对于Bug反馈与保护家喻户晓 UEditor 应用的人数多，目前曾经累积了N个Bug，开源不易须要大家独特保护对于在理论应用中遇到的问题，如果急需解决举荐应用 悬赏Issue ，这样让更多有能力的开发者有独特保护的能源在线演示https://open-demo.modstart.com/ueditor-plus/_examples/在线文档https://open-doc.modstart.com/ueditor-plus/开源地址国内：https://gitee.com/modstart-lib/ueditor-plus国内：https://github.com/modstart-lib/ueditor-plus文档国内：https://gitee.com/modstart-lib/ueditor-plus-doc

一、下载UEditor我下载的是1.4.3.3 utf-8 jsp 版本 下载链接：https://ueditor.baidu.com/web... 将下载好的文件解压到 /static/urditor 目录，如图： 二、创建组件 UEditor组件内容如下 <template> <div class="ueditor" ref="ueditor"> <script :id="id" type="text/plain"></script> </div></template><script>import '../../../static/ueditor/ueditor.config.js'import '../../../static/ueditor/ueditor.all.min.js'import '../../../static/ueditor/lang/zh-cn/zh-cn.js'import '../../../static/ueditor/ueditor.parse.min.js'import { baseURL } from '@/config/const'import { getToken } from '@/config/auth'export default { name: 'UEditor', data () { return { editor: null, flag: true, baseURL: baseURL } }, props: { value: {//文本内容 type: String }, config: {//单独设置 type: Object, default: ()=> { return { initialFrameWidth: null, initialFrameHeight: 350, UEDITOR_HOME_URL: 'static/ueditor/' } } }, id: { type: String, default: ()=> { return 'editor' + new Date().getTime(); } } }, computed: { DefaultConfig() { //默认设置 let obj = this.config; let serverUrl = this.baseURL + '/file-service/v1/ueditorUpload?' + 'token=' + getToken(); //服务器地址 return { serverUrl, ...obj } } }, created() { }, mounted() { this.initUEditor() }, watch: { 'value': function (val) { if(this.flag) { this.editor.setContent(val) } this.flag = true } }, methods: { initUEditor() { this.$nextTick(() => { this.editor = UE.getEditor(this.id, this.DefaultConfig); // 初始化UE this.editor.addListener("ready", () => { if (this.value == null) { this.editor.setContent(''); } else { this.editor.setContent(this.value); } }); this.editor.addListener("contentChange", () => { //监听内容变化 this.getUEContent(); }) }) }, getUEContent() { // 获取内容方法 this.flag = false; let content = this.editor.getContent(); // content = content.replace(/<p([\s\S]*?)<\/p>/g, "<div$1</div>"); // 将默认p标签设置为div标签 this.$emit("getUEContent", content) } }, destroyed() {//退出后销毁 this.editor.destroy(); }}</script><style scoped lang="scss"> .ueditor { // 防止外部样式影响变形 line-height:normal; }</style>三、组件的使用......<el-form-item label="通知内容" prop="content"> <div> <UEditor :value="form.content" @getUEContent="getUEContent"></UEditor> </div></el-form-item>......getUEContent(value) { // 勉强实现v-model效果 this.form.content = value;},......使用方法如上，想实现v-model的效果，没有实现，欢迎补充一下 ...

这一阵子开始学习angular，张dalao给我一个阉割了很多功能的初级后台项目作为练手，虽然初级，但是有些东西对于初学者来说真的很难，就比如说现在就要讲的引入Swiper和Ueditor这两个插件。难点在于这两个东西都挺老的了，Swiper还好，而Ueditor已经很久没有更新了，在网上查了很久，磕磕绊绊，终于顺利的把这两个东西引入到了项目里。废话不多说，上图上代码先讲Ueditor吧，下图是引入以后的Ueditor富文本编辑器这个是Ueditor的GitHub地址按照GitHub的教程来先把文件download下来然后在项目里安装npm install ngx-ueditor –save然后在AppModel.ts里面引入下面的代码import { BrowserModule } from ‘@angular/platform-browser’;import { FormsModule } from ‘@angular/forms’;import { UEditorModule } from ’ngx-ueditor’;@NgModule({ imports: [ BrowserModule, FormsModule, UEditorModule.forRoot({ js: [ ./assets/ueditor/ueditor.config.js, ./assets/ueditor/ueditor.all.min.js, ], // 默认前端配置项 options: { UEDITOR_HOME_URL: ‘./assets/ueditor/’ } }) ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { }可以看到js:[]里面引入了两个js文件，这两个文件就在刚刚下下来的压缩包里路径有点复杂ngx-ueditor-master\src\assets把这个ueditor文件夹整个解压到项目里的assets目录下，这样准备工作就做完了接下来就是在组件里面用了下面的是html代码<ueditor [(ngModel)]=“html” //双向绑定编辑器的内容[config]=“editorConfig” //配置[loadingTip]="‘加载中……’" //加载时的文字(onReady)="_ready($event)" //加载完成时的回调(onDestroy)="_destroy()" //销毁时的回调(ngModelChange)="_change($event)" //内容改变时的回调></ueditor>接下来是ts代码 html = ``; //编辑器内容 editorConfig={ wordCount: true, // 文字计数 initialFrameHeight: 300, // 设置高度 initialFrameWidth: ‘100%’, // 设置宽度 } _ready($event){ } _destroy(){ } _change($event){ }具体的API可以在文档里面的查到，就不多说这样就可以在Angular里面使用Ueditor了下班咯，明天再更新一下Swiper的使用 ...