交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • vue集成kindeditor富文本的实现示例代码

    指令

    该指令的作用是dom渲染后触发,因为非vue的插件有的是dom必须存在的情况下才可以执行

    Vue.directive('loaded-callback', {
     inserted: function (el, binding, vnode) {
     binding.value(el, binding, vnode)
     }
    })
    

    安装kindeditor

    npm install kindeditor
    

    kindeditor组件

    <template>
     <div class="kindeditor">
      <textarea class="form-control" ref="kindeditor" v-model="localValue" name="content" v-loaded-callback='initKindeditor'></textarea>
     </div>
    </template>
    
    <script>
    import '../../../../../node_modules/kindeditor/kindeditor-all.js'
    import '../../../../../node_modules/kindeditor/lang/zh-CN.js'
    import '../../../../../node_modules/kindeditor/themes/default/default.css'
    export default {
     name: 'kindeditor',
     props: ['options', 'value'],
     data () {
      return {
       localValue: ''
      }
     },
     watch: {
      localValue: 'updateValue',
      value: 'setDefault'
     },
     created () {
      this.setDefault()
     },
     methods: {
      initKindeditor () {
        var _this = this
        // 默认参数
        var options = {
          uploadJson: 'upload/image',
          width: '100%',
          afterChange () {
            _this.localValue = this.html()
          }
        }
        // 调用外部参数
        if (_this.options) {
          for(var i in _this.options){
            options[i] = _this.options[i]
          }
        }
        KindEditor.create(_this.$refs.kindeditor,options);
      },
      // 设置初始值
      setDefault () {
       this.localValue = this.value
      },
      // 修改父件的值
      updateValue () {
       this.$emit('input',this.localValue)
      }
     }
    }
    </script>
    
    

    用法

    <kindeditor :options="options" v-model="content"></kindeditor>
    

    options参考

    http://kindeditor.net/docs/option.html

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对北冥有鱼的支持。

    您可能感兴趣的文章:

    • Vue+Element使用富文本编辑器的示例代码
    • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
    • vue中使用ueditor富文本编辑器
    • Vue.js结合Ueditor富文本编辑器的实例代码
    • Vue-Quill-Editor富文本编辑器的使用教程
    • vue-quill-editor富文本编辑器简单使用方法
    • vue集成百度UEditor富文本编辑器使用教程
    • Vue中Quill富文本编辑器的使用教程
    • vue富文本编辑器组件vue-quill-edit使用教程

    广而告之:
    热门推荐:
    AngularJS集合数据遍历显示的实例

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS集合数据遍历显示</title> <script type="text/javascript" src="../js/angular.min.js"></script> </head> <body ng-···

    jQuery实现基本隐藏与显示效果的方法详解

    本文实例讲述了jQuery实现基本隐藏与显示效果的方法。分享给大家供大家参考,具体如下: jQuery 隐藏/显示 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); eg1: <!DOCTYPE html> <html> <head> <script src="http://lib···

    AngularJS入门教程之MVC架构实例分析

    本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考,具体如下: MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行。MVC的核心思想是將数据的管理(Model)、业务逻辑控制(Controller)和数据的展示···

    tagName的使用,留一笔

    <SCRIPT LANGUAGE="JavaScript"><!--function TagSample(s){    var source=event.srcElement;    if (source.tagName.toUpperCase() == "IMG")    {  &···

    php4的session功能评述(一)

    php4比php3新加了session的支持。稍微用了一下,对其函数接口,内部机制,  应用的方便性做了大概的了解。  session的意义大家都应该清楚,一个session可以包括数次http的请求和应答,  比如我们用163.net,从login到logout或者超时就作为···

    织梦(dedecms)循环调用多级子栏目如二级栏目下三级栏目

    本文是关于织梦DedeCMS调用多级子栏目的,拿来分享下。  后台已经建好栏目,对于产品展示栏 栏目导航如下图所示:    复制代码 代码如下: {dede:channelartlist cacheid='channelsonlist' typeid=3 }  <dd>  <···

    DedeCMS错误(PHP 5.3 and above) Please set 的解决方法

    安装了DedeCMS 5.7 SP1,访问后台的时候发现报出错误“DedeCMS Error: (PHP 5.3 and above) Please set 'request_order' ini value to include C,G and P (recommended: 'CGP') in php.ini,more...” 解决办法1: 这个错误其实已经在报错的···

    轻松理解Javascript变量的相关问题

    前言 再说本文的内容之前,我们先回溯到1995年,当Brendan Eich在设计第一版JavaScript时,他搞错了许多东西,当然这也包括曾属于语言本身的一部分,例如Date对象,对象相乘被自动转换为NaN等。然而现在回过头看,语言最重要的部分都是设计合理的:对象、原型、具有词法作用域···

    Access2007基础教程:创建数据库

    创建新数据库文件的方法有很多。注意在Access主窗口中officeOnline 区域左上角的"空白数据库"按钮。该按钮和"文件"菜单中的"新建"按钮都可以展现主窗口右侧的"空白数据库"区域。单击二者中的任何一个按钮都可以转换到主窗口,如图2-···

    js 返回上一页和刷新 的代码

    1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2);2. history.back().3. window.history.forward()返回下一页4. window.history.go(返回第几页,也可以使用访问过的URL) 例:<a href="javascript:history.go(-1);">向上一页</a&g···