VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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使用教程

    广而告之:
    热门推荐:
    用PHP连mysql和oracle数据库性能比较

    测试硬件说明: 测试使用的是我的爱机,配置如下: CPU:C433 内存:128M 硬盘:酷鱼2代20G 测试软件说明: WIN32下用的是windows nt server4,sp5,apache 1.3.12,php3.0.15和php4rc1,mysql 3.22.29,oracle 8.0.5 linux下用的是bluepoint linux1.0, apache 1.3.12, php4r···

    织梦模板去除或者替换Dedecms提示信息的方法

    使用织梦的朋友相信你跟我一样的感受,织梦后台更新好文章提示“Dedecms提示信息!”这到底怎么改呢,我最近找了很多文章教程还没解决,今天我终于解决了,下面是我的解决办法: 第一:先找到织梦根目录下的include/common.func.php这个文件。找到functi···

    html5弹跳球示例代码

      复制代码 代码如下: <html> <head> <meta charset=utf-8> <title>跳跳球</title> <script> //box var box_x=0; var box_y=0; var box_width=300; var box_height=300; //注意:定位球采用球的中心 var ball_x=10; var ball_y=10; v···

    vue 表单之通过v-model绑定单选按钮radio

    用v-model绑定单选框能带来很多便捷的开发体验。 基础用法 <template> <div id="app"> <input type="radio" id="male" value="Male" v-model="gender"> Male <input type="radio" id="female" value="Female" v-model="gender"> Femalea <p&g···

    微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}"> <···

    Thinkphp自定义代码生成工具及用法说明(附下载地址)

    本文实例讲述了Thinkphp自定义代码生成工具及用法说明。分享给大家供大家参考,具体如下: 我最近沮丧的发现在使用Thinkphp很多时候我都在做重复的事情,比如重复写最简单的CRUD方法,编写表单,写前台样式表等等。 Thinkphp对于后台操作的支持已经非常强大,再加上最近非常流···

    在vue中使用v-bind:class的选项卡方法

    //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class; 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;} ul li.active{backgr···

    Blog设计 网页设计之处女作

    笔者设计的第一个网页,如下图:         入行7年了,一直做程序和项目管理,美工这水是从来没趟过,但是每天被美工耳濡目染,再加上嵌套页面时被IE6、Firefox等浏览器的兼容折磨的死去活来,使得本人已具备了一定的网页设计基础,随着公司网站的···

    HTML5 声明兼容IE的写法

    <!DOCTYPE html>是HTML5的声明,主流的游览器中只有IE8及以下版本不支持,这样IE会进入Quirks模式。但之后的声明可以强制指定IE的呈现模式,所以<!DOCTYPE html>声明对IE就无影响。 HTML5并没有XHTML那么严格,对于一般的xhtml页面,基本都不通完全通过W3C验证标···

    vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() {      // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区···