Vue富文本编辑器(iceEditor)集成

官方文档:

https://gitee.com/iceui/iceEditorhttps://gitee.com/iceui/iceEditor

使用方法:
- 配置文件这块当然离不开 CV大法啦!
- 官网复制粘贴，自行筛选想要添加的功能.
文件结构
iceEditor.js/iceEditor.min.js可按照官方配置

index.vue/Html代码

<template><div :id="iceEditorId"></div>
</template>

index.vue/Js代码

<script>
import ice from "@/components/IceEditor/iceEditor";
export default {props: {id: {type: String,default: function() {return 'ice-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')}},value1: {type: String,default: ''},pageType:{type:String,default:null}},name: "IceEditor",data() {return {iceEditorId: this.id,text: this.value1}},watch: {text(val) {this.$nextTick(() =>{this.text = valthis.$emit('textCallback', val)})}},computed: {value: function () { return this.text}},mounted() {this.init(this.pageType)},methods: {init(val) {let this_ = this//第一步：创建实例化对象ice.editor(this.iceEditorId,function(e){//第二步：配置图片或附件上传提交表单的路径//如果你的项目使用的php开发，可直接使用upload.php文件//其它的编程语言需要你单独处理，后期我会放出.net java等语言代码//具体与你平常处理multipart/form-data类型的表单一样//唯一需要注意的就是：处理表单成功后要返回json格式字符串，不能包含其它多余的信息：//url：文件的地址//name：文件的名称（包含后缀）//error：上传成功为0，其它为错误信息，将以弹窗形式提醒用户//例如批量上传了两张图片：//[//  {url:'/upload/img/153444.jpg', name:'153444.jpg', error:0},//   {url:'/upload/img/153445.jpg', name:'153445.jpg', error:'禁止该文件类型上传'}//]e.uploadUrl="/iceEditor/src/upload.php";if(val == "EngineeringChange"){//设置富文本框的配置项参数e.menu = ['backColor',                 //字体背景颜色'fontSize',                  //字体大小'foreColor',                 //字体颜色'bold',                      //粗体'italic',                    //斜体'justifyLeft',               //左对齐'justifyCenter',             //居中对齐'justifyRight',              //右对齐'indent',                    //增加缩进'outdent',                   //减少缩进'insertOrderedList',         //有序列表'insertUnorderedList',       //无序列表'insertImage',               //图片];// e.menu = []e.maxWindow = false;this.width='552px'   //宽度this.height='120px'; //高度this.create();}//第四步：创建，如果没有配置项，无需这一步e.create();e.setValue(this_.text);e.inputCallback(function(html,text){console.log(this.getHTML()) //方法内的this为e对象，html等价于this.getHTML()//html 内容为富文本框中输入内容生成的html代码//text 内容为富文本框中输入内容生成的纯文本console.log(html,text); });});}}
}
</script>

详细参数配置列表
组件封装完毕，可以使用！

Vue富文本编辑器(iceEditor)集成相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
富文本编辑器iceEditor中上传word并回显
项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路 ...
用DevExpress WinForms富文本编辑器，集成高级文本编辑功能（二）
DevExpress WinForm富文本编辑器(RTF编辑器)控件允许用户将高级文本编辑功能集成到下一个WinForms项目中,它包括全面的文本格式选项.支持邮件合并,并附带了丰富的终端用户选项集, ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...
特别好用的Vue富文本编辑器wangEditor自己使用案例组件，附源码，直接使用
前言:已组件化,引入即可使用,包含本地图片上传可拖拽大小.效果图如下:附源码 1.首先老规矩,引入下面两个包 npm i @wangeditor/editor --save npm i @wanged ...
vue富文本编辑器中样式冲突和不能修改的问题
在vue项目中,富文本回显通常采用的是v-html指令来渲染html字符串.但是在回显的过程中,发现了一些问题,以此记录下来. 1.富文本(tinyMec)在编辑的时候采用的是iframe隔离,这样的 ...

Vue富文本编辑器(iceEditor)集成

Vue富文本编辑器(iceEditor)集成相关推荐

最新文章

热门文章