UEditor（集成 135 编辑器插件）（附源码）

效果图

可以看到第一个菜单是135，点击135跳到135编辑器，点击完成编辑即可

准备工作

1.npm

npm install vue-ueditor-wrap
// 或者
yarn add vue-ueditor-wrap

2下载UEditor，

UEditor 官网下载链接 我这边后台是java我下载jsp版本

解压

将解压的文件夹重命名为 UEditor 并移动到你项目的静态资源目录下

添加 135 插件 添加135插件文档

（1） 下载

• 135editor.js

• 135EditorDialogPage.html

（2）.放置文件

• 135editor.js文件放到 public/static/ueditor/_src/plugins 文件夹下

• 135EditorDialogPage.html文件放到public/static/ueditor/dialogs/135editor 文件夹下 没有135editor文件夹需要新建）

（3）. 修改配置文件
在 ueditor.config.js 中 toolbars 项里增加一个 135editor 菜单项

  toolbars: [ ['135editor', 'fullscreen', 'source', '|',  'undo', redo', .... ]]

（4）添加css(在src/components/UEditor/index.vue 文件里添加）

.edui-button.edui-for-135editor
  .edui-button-wrap
  .edui-button-body
  .edui-icon {
  background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
}

引入且使用VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

  <vue-ueditor-wrap
      v-model="detailHtml"
      :config="myConfig"
       editor-id="editor-demo-01"></vue-ueditor-wrap>



data () {
      return {
		  myConfig:{
          toolbars: [
            [
             '135editor',// 135编辑
              'undo', //撤销
              'bold', //加粗
              'indent', //首行缩进
              'italic', //斜体
              'underline', //下划线
              'strikethrough', //删除线
              'subscript', //下标
              'fontborder', //字符边框
              'superscript', //上标
              'formatmatch', //格式刷
              'fontfamily', //字体
              'fontsize', //字号
              'justifyleft', //居左对齐
              'justifycenter', //居中对齐
              'justifyright', //居右对齐
              'justifyjustify', //两端对齐
              'insertorderedlist', //有序列表
              'insertunorderedlist', //无序列表
              'lineheight',//行间距
            ]
          ]     
        },
}
}

源码

关注公众号 《源码好又多》 回复 135 获取源码

作者相关文章

零基础搭建获利的美团饿了么优惠券CPS小程序(附源码)

反编译获取任何微信小程序源码——看这篇就够了

如何获取美团饿了么的推广链接赚钱