您的位置: 首页  >  文章  >  vue中使用Ueditor富文本编辑器 ---- 学习笔记

vue中使用Ueditor富文本编辑器 ---- 学习笔记

分类: 文章 • 2022-10-30 23:37:57

一、下载

从Ueditor的官网下载最新版本的Ueditor编辑器

官方下载地址
http://ueditor.baidu.com/website/download.html
选择自己需要的版本下载
vue中使用Ueditor富文本编辑器 ---- 学习笔记

下载解压后会得到如果下文件目录：
vue中使用Ueditor富文本编辑器 ---- 学习笔记

将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；

二、修改配置

在ueditor.config.js中修改如下代码：
// 这里是配置Ueditor内部进行文件请求时的静态文件服务地址

window.UEDITOR_HOME_URL = "/static/Ueditor/"
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

三、 文件的引入

在vue项目的入口文件main.js中将Ueditor所有的基础文件引入如下：（路径自行配制）

　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'

四、开发公共组件

开发公共组件，可设置填充内容defaultMsg，配置信息config(宽度和高度等)，并提供获取内容的方法。

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null，
	id: Math.random().toString(16).substring(2) + 'ueditorId'
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.$refs.editor.id = this.id;
      this.editor = UE.getEditor(this.id, this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

五、在页面中使用富文本编辑器

<template>
  <div class="components-container">
    <div class="info">UE编辑器示例<br>
    需要使用编辑器时，调用UE公共组件即可。可设置填充内容defaultMsg，配置信息config(宽度和高度等)，可调用组件中获取内容的方法。</div>
    <button @click="getUEContent2()">获取内容</button>
    <div class="editor-container">
      <UE :defaultMsg=defaultMsg :config=config ref="ue1"></UE>
    </div>
<button @click="getUEContent2()">获取内容</button>    
<div class="editor-container">      
     <UE :defaultMsg=defaultMsg :config=config ref="ue2"></UE>    
</div>
  </div>
</template>
<style>
  .info{
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
</style>
<script>
  import UE from '../../components/ue/ue.vue';
  export default {
    components: {UE},
    data() {
      return {
        defaultMsg: '这里是UE测试',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        }
      }
    },
    methods: {
      getUEContent2() {
        let content = this.$refs.ue.getUEContent();
        
        console.log(content)
      }，
 getUEContent2() {        
let content = this.$refs.ue.getUEContent();              
  console.log(content)     
 }
    }
  };
</script>

效果如下：
vue中使用Ueditor富文本编辑器 ---- 学习笔记

注：富文本编辑器ueditor 自定义工具栏配置

UEditor定制工具栏图标
UEditor 工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求

修改配置项的方法：
方法一：修改 ueditor.config.js 里面的 toolbars
方法二：实例化编辑器的时候传入 toolbars 参数 var ue = UE.getEditor(‘container’);

其他配置项：配置项说明
简单列表

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold']
]

多行列表

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo'],
    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]

工具栏按钮分割线
配置项里用竖线 ‘|’ 代表分割线

完整的按钮列表

toolbars: [
    [
        'anchor', //锚点
        'undo', //撤销
        'redo', //重做
        'bold', //加粗
        'indent', //首行缩进
        'snapscreen', //截图
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'source', //源代码
        'blockquote', //引用
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        'print', //打印
        'preview', //预览
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合并单元格
        'mergedown', //下合并单元格
        'deleterow', //删除行
        'deletecol', //删除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分单元格
        'deletecaption', //删除表格标题
        'inserttitle', //插入标题
        'mergecells', //合并多个单元格
        'deletetable', //删除表格
        'cleardoc', //清空文档
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代码语言
        'fontfamily', //字体
        'fontsize', //字号
        'paragraph', //段落格式
        'simpleupload', //单图上传
        'insertimage', //多图上传
        'edittable', //表格属性
        'edittd', //单元格属性
        'link', //超链接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'map', //Baidu地图
        'gmap', //Google地图
        'insertvideo', //视频
        'help', //帮助
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'forecolor', //字体颜色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //无序列表
        'fullscreen', //全屏
        'directionalityltr', //从左向右输入
        'directionalityrtl', //从右向左输入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段后距
        'pagebreak', //分页
        'insertframe', //插入Iframe
        'imagenone', //默认
        'imageleft', //左浮动
        'imageright', //右浮动
        'attachment', //附件
        'imagecenter', //居中
        'wordimage', //图片转存
        'lineheight', //行间距
        'edittip ', //编辑提示
        'customstyle', //自定义标题
        'autotypeset', //自动排版
        'webapp', //百度应用
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'background', //背景
        'template', //模板
        'scrawl', //涂鸦
        'music', //音乐
        'inserttable', //插入表格
        'drafts', // 从草稿箱加载
        'charts', // 图表
    ]
]

相关推荐