关于在vue 中使用百度ueEditor编辑器的方法实例代码


Posted in Javascript onSeptember 14, 2018

1. 安装  npm i vue-ueditor --save-dev

2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 

3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath(); 

 (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的 url ;不需要可以删除;

 (2) 部分人使用时出现以下报错:

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them...

这个问题是因为项目中的使用的babel默认添加了use strict造成,可参考 https://segmentfault.com/q/1010000007415253

我采用的是链接中答案的第三种方式:添加了babel-plugin-transform-remove-strict-mode,并在.babelrc里添加下列代码;

2-1.1   或者在webpack.base.conf.js 添加 

loaders: [{

test: /\.js$/,


exclude: /(node_modules|bower_components)/,


loader: 'babel',


query: {


presets: ['es2015']

}}]

4.如果不需要以组建的方式引入 则 可以这么写 ;

<VueUeditor ueditorPath="./../../static/ueditor/" @ready="editorReady"></VueUeditor>
<script>
 import VueUeditor from 'vue-ueditor';
 import ueditor from '../components/UE';
 export default {
  components: {VueUeditor,ueditor},
  data() {
   return {
    defaultMsg: '这里是UE测试',
    content1: '这里是UE',
    ue1: "ue1",
    config: {
     initialFrameWidth: 800,
     initialFrameHeight: 350
    }
   }
  },
  methods: {
    getUEContent() {
    // 获取ueditor值
      let content1 = UE.getEditor(this.ue1).getContentTxt();;
      console.log(content1)
  }, 
    editorReady(editorInstance){
      editorInstance.setContent("哈哈哈")
    }
  }
 };

5.如果要自定义组件的方式 在每个页面引入 则  在components 中新建ue.vue 文件 贴入这个代码

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

然后就可以   import ueditor from '../components/UE';   //引入

<ueditor :content=content1 :config=config :id="ue1"></ueditor> //使用
<script>
 import VueUeditor from 'vue-ueditor';
 import ueditor from '../components/UE';
 export default {
  components: {VueUeditor,ueditor},
  data() {
   return {
    defaultMsg: '这里是UE测试',
    content1: '这里是UE',
    ue1: "ue1",
    config: {
     initialFrameWidth: 800,
     initialFrameHeight: 350
    }
   }
  },
  methods: {
     getUEContent() {
    // 获取ueditor值
      let content1 = UE.getEditor(this.ue1).getContentTxt();;
      console.log(content1)
    },
    editorReady(editorInstance){
       editorInstance.setContent("哈哈哈")
     }
  }
 };
</script>

这样就可以了。

附配置清单

1. 实例化编辑器到id为 container 的 dom 容器上:
   var ue = UE.getEditor('container');
2. 设置编辑器内容:
    ue.setContent('<p>hello!</p>');
3. 追加编辑器内容:
    ue.setContent('<p>new text</p>', true);
4. 获取编辑器html内容:
    var html = ue.getContent();
5. 获取纯文本内容:
    ue.getContentTxt();
6. 获取保留格式的文本内容:
    ue.getPlainTxt();
7. 判断编辑器是否有内容:
    ue.hasContents();
8. 让编辑器获得焦点:
    ue.focus();
9. 让编辑器失去焦点
    ue.blur();
10. 判断编辑器是否获得焦点:
    ue.isFocus();
11. 设置当前编辑区域不可编辑:
    ue.setDisabled();
12. 设置当前编辑区域可以编辑:
    ue.setEnabled();
13. 隐藏编辑器:
    ue.setHide();
14. 显示编辑器:
    ue.setShow();
15. 清空内容:
    ue.execCommand('cleardoc');
16. 读取草稿箱:
    ue.execCommand('drafts');
17. 清空草稿箱:
  ue.execCommand('clearlocaldata');

 本来需求是 从后台读取文件内容,内容是代码,返回到前台,高亮显示像 ide一样可以实时编辑代码,代码可以高亮,类似编辑器的主题一样,然后可以保存提交 到后台,找了半天没找到合适的插件;

总结

以上所述是小编给大家介绍的关于在vue 中使用百度ueEditor编辑器的方法实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
js获取ip和地区
Mar 10 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
react项目实践之webpack-dev-serve
Sep 14 #Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 #Javascript
vue删除html内容的标签样式实例
Sep 13 #Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 #Javascript
vue2.0获取鼠标位置的方法
Sep 13 #Javascript
vue实现动态列表点击各行换色的方法
Sep 13 #Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 #Javascript
You might like
php三维数组去重(示例代码)
2013/11/26 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python中Class类用法实例分析
2015/11/12 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python自定义线程池实现方法分析
2018/02/07 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
高三学生评语大全
2014/04/25 职场文书
酒店节能减排方案
2014/05/26 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers