wangEditor配置首行缩进包括缩进及取消缩进功能

已于 2022-05-19 18:36:50 修改
阅读量4.3k 收藏 1
点赞数
分类专栏： 前端学习之路 文章标签： js javascript vue
于 2021-08-22 22:44:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46274532/article/details/119859177
版权

wangEditor缩进采用的是padding-left:2em，没有首行缩进功能，因此个人根据官方说明配置了一下，移除了原来的缩进改成了首行缩进。

普通粘贴时基本好用，但是无格式文本粘贴还是只能是全局缩进。

希望大家也能帮助优化一下。

// 引入 wangEditor
import WangEditor from 'wangeditor'
const { $, DropListMenu } = WangEditor

// 第一，菜单 class ，Button 菜单继承 BtnMenu class
class AlertMenu extends DropListMenu {
    constructor (editor) {
      // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        const $elem = $(
          '<div class="w-e-menu" data-title="首行缩进"><i class="w-e-icon-indent-increase"></i></div>'
        )
        // droplist 配置
        const dropListConf = {
            width: 100,
            title: '首行缩进',
            type: 'list',
            list: [
                { $elem: $('<p><i class="w-e-icon-indent-increase w-e-drop-list-item"></i>增加缩进</p>'), value: '2em' },
                { $elem: $('<p><i class="w-e-icon-indent-decrease w-e-drop-list-item"></i>减少缩进</p>'), value: '' }
            ],
            // droplist 每个 item 的点击事件
            clickHandler: (value) => {
                // value 参数即 dropListConf.list 中配置的 value
                this.command(value)
            }
        }
        super($elem, editor, dropListConf)
    }

    command (value) {
        // 设置标题
        // 判断是否有子元素 有一个官方提供的结束节点不准确的Bug
        if (this.editor.selection.getSelectionContainerElem().elems[0].children.length > 0) {
          // 无格式文本父元素是p，要把第一行单独拿出来缩进
          let fir = 0
          // 判断是否进入选区
          var start = false
          // 提前算出<br>标签的个数
          let isAllBr = 0
          // 判断是否全部是<br> 即无格式文本
          let isVali = false
          // 提前算出<br>标签的个数
          for (let e of this.editor.selection.getSelectionContainerElem().elems[0].children) {
            if (e.tagName === 'BR') {
              isAllBr++
            }
          }
          // 如果选区内子元素的个数与<br>元素个数相同即可判断为无格式文本
          if (isAllBr === this.editor.selection.getSelectionContainerElem().elems[0].children.length) isVali = true
          // 对无格式文本进行缩进处理
          if (isVali) {
            for (let e of this.editor.selection.getSelectionContainerElem().elems[0].children) {
              if (e.tagName === "BR") {
                if (value === '2em') {
                  fir += 1
                  if (fir === 1) {
                    this.editor.selection.getSelectionContainerElem().elems[0].style.textIndent = value
                  }
                  // 先把<br>换成span元素并增加缩进 再在span元素前再加上<br> indentP是因为原来用的是P元素
                  const indentP = document.createElement("span")
                  indentP.style.display = "inline-block"
                  indentP.style.width = value
                  indentP.className = 'indentP'
                  const theBr = document.createElement("br")
                  this.editor.selection.getSelectionContainerElem().elems[0].replaceChild(indentP, e)
                  this.editor.selection.getSelectionContainerElem().elems[0].insertBefore(theBr, indentP)
                }
              }
            }
          } else {
            let elseIndex = 0
            // 正常文本 以及无格式文本取消缩进逻辑
            for (let e of this.editor.selection.getSelectionContainerElem().elems[0].children) {
              // 如果是无格式文本
              if (e.className === "indentP") {
                elseIndex++
                if (elseIndex === 1) {
                  this.editor.selection.getSelectionContainerElem().elems[0].style.textIndent = value
                }
                this.editor.selection.getSelectionContainerElem().elems[0].removeChild(e)
                continue
              }
              // 如果是普通文本 选区的开始节点
              if (e === this.editor.selection.getSelectionStartElem().elems[0]) {
                start = true
              }
              // 如果已是选中节点，则开始进行缩进
              if (start) {
                e.style.textIndent = value
              }
              // 选区的结束节点 跳出循环
              if (e === this.editor.selection.getSelectionEndElem().elems[0]) {
                break
              }
            }
          }
        } else {
          this.editor.selection.getSelectionContainerElem().elems[0].style.textIndent = value
        }
    }

    // 删除这段代码会报错
    tryChangeActive () {
        // const reg = /^h/i
        // const cmdValue = this.editor.cmd.queryCommandValue('indent')
        // if (reg.test(cmdValue)) {
        //     // 选区处于标题内，激活菜单
        //     this.active()
        // } else {
        //     // 否则，取消激活
        //     this.unActive()
        // }
        // this.active()
    }
}
// 菜单 key ，各个菜单不能重复
const menuKey = 'alertMenuKey'
// 注册菜单
WangEditor.registerMenu(menuKey, AlertMenu)

完整代码 组件editor.vue

<template>
  <div class="editor">
    <div id="demo1"></div>
  </div>
</template>

<script>
// 引入 wangEditor
import WangEditor from 'wangeditor'
const { $, DropListMenu } = WangEditor

// 第一，菜单 class ，Button 菜单继承 BtnMenu class
class AlertMenu extends DropListMenu {
    constructor (editor) {
      // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        const $elem = $(
          '<div class="w-e-menu" data-title="首行缩进"><i class="w-e-icon-indent-increase"></i></div>'
        )
        // droplist 配置
        const dropListConf = {
            width: 100,
            title: '首行缩进',
            type: 'list',
            list: [
                { $elem: $('<p><i class="w-e-icon-indent-increase w-e-drop-list-item"></i>增加缩进</p>'), value: '2em' },
                { $elem: $('<p><i class="w-e-icon-indent-decrease w-e-drop-list-item"></i>减少缩进</p>'), value: '' }
            ],
            // droplist 每个 item 的点击事件
            clickHandler: (value) => {
                // value 参数即 dropListConf.list 中配置的 value
                this.command(value)
            }
        }
        super($elem, editor, dropListConf)
    }

    command (value) {
        // 设置标题
        // 判断是否有子元素 有一个官方提供的结束节点不准确的Bug
        if (this.editor.selection.getSelectionContainerElem().elems[0].children.length > 0) {
          let fir = 0
          var start = false
          let isAllBr = 0
          let isVali = false
          // 判断是否全部是BR 即无格式文本
          for (let e of this.editor.selection.getSelectionContainerElem().elems[0].children) {
            if (e.tagName === 'BR') {
              isAllBr++
            }
          }
          if (isAllBr === this.editor.selection.getSelectionContainerElem().elems[0].children.length) isVali = true
          // 对无格式文本进行缩进处理
          // 如果是<br>
          // 选中节点无法选到br 进行和取消的逻辑
          // 判断是否已是选中节点
          if (isVali) {
            for (let e of this.editor.selection.getSelectionContainerElem().elems[0].children) {
              if (e.tagName === "BR") {
                if (value === '2em') {
                  fir += 1
                  if (fir === 1) {
                    this.editor.selection.getSelectionContainerElem().elems[0].style.textIndent = value
                  }
                  const indentP = document.createElement("span")
                  indentP.style.display = "inline-block"
                  indentP.style.width = value
                  indentP.className = 'indentP'
                  const theBr = document.createElement("br")
                  this.editor.selection.getSelectionContainerElem().elems[0].replaceChild(indentP, e)
                  this.editor.selection.getSelectionContainerElem().elems[0].insertBefore(theBr, indentP)
                }
              }
            }
          } else {
            let elseIndex = 0
            // 正常文本 以及无格式文本取消缩进逻辑
            for (let e of this.editor.selection.getSelectionContainerElem().elems[0].children) {
              // 如果是无格式文本
              if (e.className === "indentP") {
                elseIndex++
                if (elseIndex === 1) {
                  this.editor.selection.getSelectionContainerElem().elems[0].style.textIndent = value
                }
                this.editor.selection.getSelectionContainerElem().elems[0].removeChild(e)
                continue
              }
              // 选区的开始节点
              if (e === this.editor.selection.getSelectionStartElem().elems[0]) {
                start = true
              }
              // 如果已是选中节点，则开始进行缩进
              if (start) {
                e.style.textIndent = value
              }
              // 选区的结束节点 跳出循环
              if (e === this.editor.selection.getSelectionEndElem().elems[0]) {
                break
              }
            }
          }
        } else {
          this.editor.selection.getSelectionContainerElem().elems[0].style.textIndent = value
        }
    }

    // 删除这段代码会报错
    tryChangeActive () {
        // const reg = /^h/i
        // const cmdValue = this.editor.cmd.queryCommandValue('indent')
        // if (reg.test(cmdValue)) {
        //     // 选区处于标题内，激活菜单
        //     this.active()
        // } else {
        //     // 否则，取消激活
        //     this.unActive()
        // }
        // this.active()
    }
}
// 菜单 key ，各个菜单不能重复
const menuKey = 'alertMenuKey'
// 注册菜单
WangEditor.registerMenu(menuKey, AlertMenu)
export default {
  name: 'editor',
  data () {
    return {
      editor: null,
      editorData: ''
    }
  },
  model: {
      prop: 'content',
      event: 'change'
  },
  props: {
      content: {
          type: String,
          default: ''
      }
  },
  mounted () {
    const editor = new WangEditor(`#demo1`)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
      this.$emit('change', newHtml)
    }
    editor.config.excludeMenus = [
      'code',
      'indent'
    ]
    editor.config.pasteFilter = true
    editor.config.pasteText = true
    editor.config.pasteIgnoreImg = true
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024 //  限制大小为2M
    editor.config.zIndex = 1
    editor.config.height = 466
    editor.config.showLinkImg = false
    editor.config.showLinkVideo = false
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = this.baseURL + 'CommonPage/FileUploadHandler.ashx?m=' + Math.random()
    editor.config.uploadVideoServer = this.baseURL + 'CommonPage/FileUploadHandler.ashx?m=' + Math.random()
    editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024m
    editor.config.uploadVideoAccept = ['mp4']
    editor.config.uploadImgHooks = {
      // 图片上传并返回结果，但图片插入错误时触发
      fail: function (xhr, editor, result) {
        // console.log(result)
      },
      success: function (xhr) {
        // 图片上传并返回结果，图片插入成功之后触发
      },
      customInsert: function (insertImg, result) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          let url = '../' + result.ResPath
          insertImg(url)
          // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    editor.config.uploadVideoHooks = {
      fail: function (xhr, editor, result) {
        // console.log(result)
      },
      success: function (xhr) {
        // 图片上传并返回结果，图片插入成功之后触发
      },
      customInsert: function (insertVideoFn, result) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          let url = '../' + result.ResPath
          insertVideoFn(url)
          // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    editor.config.customAlert = function (s, t) {
      switch (t) {
        case 'success':
          this.$message.success(s)
          break
        case 'info':
          this.$message.info(s)
          break
        case 'warning':
          this.$message.warning(s)
          break
        case 'error':
          this.$message.error(s)
          break
        default:
          this.$message.info(s)
          break
      }
    }

    // 创建编辑器
    editor.create()
    this.editor = editor
  },
  methods: {
    getEditorData () {
		// 通过代码获取编辑器内容
		// let data = this.editor.txt.html()
    },
    clearContent () {
      this.editor.txt.clear()
    },
    beforeDestroy () {
      // 调用销毁 API 对当前编辑器实例进行销毁
      this.editor.destroy()
      this.editor = null
    },
    setHtml (content) {
      this.editor.txt.html(content)
    }
  },
  beforeDestroy () {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style lang="less" >
  .editor {
    font-size: 1em;
    width: 100%;
    margin: auto;
    tr, table td, table th {
      height: 2em;
      // min-height: 30px;
    }
    // table {
    //   border-top: 1px solid #ccc;
    //   border-left: 1px solid #ccc;
    // }
    // table td,
    // table th {
    //   border-bottom: 1px solid #ccc;
    //   border-right: 1px solid #ccc;
    //   padding: 3px 5px;
    // }
    // table th {
    //   border-bottom: 2px solid #ccc;
    //   text-align: center;
    // }
    .w-e-text::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
    }
    .w-e-text::-webkit-scrollbar-thumb {
      border-radius: 5px !important;
      box-shadow:  0 0 2px #fff !important;
      background-color: #ddd !important;
    }
    .w-e-text::-webkit-scrollbar-track{
      border-radius: 0;
      box-shadow: inset 0 0 2px #fff;
    }
  }
</style>
To无忧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
Android设置TextView首行缩进示例代码
09-01
使用过word的都会知道，在文字排版的时候经常要设置首行缩进，这样才会使排版更整齐，那么在Android中当需要设置首行缩进的时候该肿么办呢，下面一起来看看。
wangEditor富文本编辑器（第四章：自定义首行缩进菜单）
DW14687的博客
08-01 3629
继上一章，我们实现了富文本框字数限制，到上一章呢，基本上得功能已经可以实现了。接下来就是扩展章节了，我会继续去探索更多得自定义菜单，今天先开一个简单得——“首行缩进”，感兴趣就继续往下看看吧~新建目录components/textIndent.js以上就是今天要讲的内容，本文仅仅简单自定义首行缩进菜单的思路和实现，好啦好啦，希望能够帮助到你啦，或者开阔一下思维也可以滴~。如果有什么想法也可以评论区留言给我哟~白白啦httpshttpshttpshttps。.........
wangEditor 富文本框
sunny_day的博客
04-10 423
富文本框：https://www.kancloud.cn/wangfupeng/wangeditor3/335774； 接受服务端传输的数据显示到富文本框中： <div id="textBox1" style="width:250px"></div> <div id="edit" style="width:453px"></div> 服...
php使用wangeditor实现富文本遇见问题及两种解决方法
最新发布
菜鸟教程
05-01 62
在对象初始化之前添加如下代码。
vue 中使用 WangeEditor 时自定义首行缩进菜单
m0_37856464的博客
06-12 1180
【代码】vue 中使用 WangeEditor 时自定义首行缩进菜单。
富文本 —— wangEditor
qq_16670995的博客
06-16 430
姗姗来迟的富文本 前序： 当前文档展示的解决方案之一 在这什么都想网页展示的年代，dom元素承担了偏离它初衷的负担 选择这个富文本，皆因 Simple Job Simple App wangEditor官网 当前版本 v 3.1.1 源码很多注释，但是说真的还是2.X版本比较接地气，3.X从源码这些封装来说是好了很多，但是面向开发者，总是少了点味道 本文不作wangEditor基础使用介绍等等...
wangEditor自定义扩展菜单-多次缩进（Vue2）
weixin_45516130的博客
12-18 836
基于vue2扩展wangeditor的多次缩进菜单
10.行高、首行缩进
xianpo的博客
07-15 828
1.line-height （行间距） 设置行间距，行与行之间的距离，字符的垂直间距，即行高。 px、em、% 2.text-align(水平对齐) 设置文本内容的水平对齐方式，等同于html的align属性 left 左对齐 right：右对齐 center 居中对齐 jus...
wangEditor系列之工具栏配置
老__L的博客
05-12 9434
有关wangEditor3的使用历程[首行缩进，替换字体图标以及设置行高]
Dysons的专栏
07-28 2291
最近项目中用到了wangEditor作为富文本编辑器，他的工具中没有常用的首行缩进和设置行高的功能，在这里记录下自己在源码中添加这两个功能的历程： 行高菜单的添加： 在src/js/menus目录下按照原来的格式添加lineHeight文件夹，在下面添加index.js文件，在menu-list.js中加入lineHeight模块，内容如下： // 构造函数 function LineHeight(editor) { this.editor = editor this.$elem =
css利用text-indent负值和padding-left设置第二行缩进
qq_42372534的博客
04-23 382
【代码】css利用text-indent负值和padding-left设置第二行缩进。
解决wangeditor+oss 批量上传图片顺序不对问题
just路人周
12-17 850
两个组件 “wangeditor”: “^4.7.5”, “ali-oss”: “^6.7.0” 放入package.json cnpm install <div id="weditor"></div> import E from 'wangeditor' import OSS from 'ali-oss' export default { data() { return { editor: '', } }, mounted() {
CSS 首行缩进两个文字
09-25
我记得过去刚开始学习制作页面的时候，要想让一段文字首行缩进两个文字.
dreamweaver怎么设置段落首行自动缩进两个字符?
09-24
dreamweaver怎么设置段落首行自动缩进？dreamweaver制作网页的时候，想要让文字首行自动缩进两个字符，该怎么设计呢？下面我们就来看看详细的教，需要的朋友可以参考下
自定义TextView实现首行缩进
01-09
通过以上步骤，我们可以成功地在Android应用中实现自定义TextView的首行缩进功能。这种方法灵活且可扩展，可以根据实际需求调整缩进的大小和样式。同时，它也展示了Android自定义视图的基本原理，加深了对Android...
wangeditor封装使用
weixin_42878641的博客
12-14 2707
wangeditor定制化需求的封装使用
wangEdit大致使用
蓦然回首，那人却在，灯火阑珊处。
09-01 584
wangedit引入项目
wangEditor富文本编辑器导入图片和视频配置(Vue)
阿宝的博客
03-01 1893
wangEditor的导入图片和视频的详细配置，官网上面有配置很详细。自己简单在项目中使用了一下，总结一下。
wangeditor富文本上传图片等配置
qq_49899911的博客
08-16 4185
wangeditor 上传图片
vscode如何配置首行缩进
08-02
在vscode编辑器中配置首行缩进可以按照以下步骤进行操作：首先，按下"F1"键，在弹出的面板中输入"Formatter Config"，然后点击打开。这将打开formatter.json文件。在该文件中，找到并修改所有的"indent_size"项为"2"，然后保存并重启vscode。这样就完成了首行缩进的配置。[1]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值