关于在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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jQuery cdn使用介绍
May 08 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
C++中的string类的用法小结
Aug 07 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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新手上路(十一)
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python如何查看系统网络流量的信息
2016/09/12 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书