vue中使用富文本编辑器ueditor

参考:

https://www.cnblogs.com/daimo/p/7525146.html

https://blog.csdn.net/liujun03/article/details/84453287

1.下载文件包http://ueditor.baidu.com/website/download.html(我用的jsp的UTF-8版本)

2.文件包放到static下

3.  cnpm install --save vue-ueditor-wrap

4.使用

<div class="ueditor">
            <vue-ueditor-wrap v-model="content" :config="myConfig"></vue-ueditor-wrap>
          </div>

js

import VueUeditorWrap from ‘vue-ueditor-wrap‘
  export default {
    name: ‘needForm‘,
    components: {VueUeditorWrap},
    data() {
      return {

        myConfig: {
          // 如果需要上传功能,找后端小伙伴要服务器接口地址
          // serverUrl: this.$config.baseUrl + ‘ueditor/ueditorConfig‘,
          // serverUrl: ‘http://localhost:8090/ueditor/ueditorConfig‘,
          // 你的UEditor资源存放的路径,相对于打包后的index.html
          UEDITOR_HOME_URL: ‘/ueditor/‘,
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 工具栏是否可以浮动
          autoFloatEnabled: false,
          // 初始容器高度
          initialFrameHeight: 340,
          // 初始容器宽度
          initialFrameWidth: ‘100%‘,
          // 关闭自动保存
          enableAutoSave: true
        },
        content: ‘‘
      }
    },
    mounted() {
      his.editor.setContent("1223"))
    },
    watch: {

    },
    methods: {

    },
    destroyed() {
     
    }
  }

原文地址:https://www.cnblogs.com/duanzhenzhen/p/12149802.html

时间: 2024-11-07 21:20:25

vue中使用富文本编辑器ueditor的相关文章

silverlight中使用富文本编辑器

因为项目的需要在silverlight项目中使用富文本编辑器,好用的在线富文本编辑器有很多Fckeditor,百度的ueditor,但是这些富文本编辑器都是html的,想在silverlight中使用必须承载html页面再使用这些富文本编辑器. 之前找到了一个在silverliht中承载html页面的第三方控件htmlhost,但是这个控件有一个不好的地方时,用了只有silverlight项目中所有服务端控件都不能输入中文. 最近找到了一个大牛自己写的一个控件,能够满足我们的需要,自己改造之后放

Django中使用富文本编辑器Uedit

Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. settings.py INSTALLED_APPS = [ ... 'DjangoUeditor', ... ] 2. 配置urls from django.conf.urls import url, include urlpatterns = [ # 富文本相关url url(r'^uedit

在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.ckeditor等等.在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器: 定制编辑器的功能,比如有哪些文本样式.图片上传.代码插入: 定制编辑器的样式,指的是编辑器整体的样式,比如高度.宽度.显示位置等等: 预览内容: 获取内容: 显示页面 显示内容: 2 Django APP 下表列出一些常用的APP,它们都可以在GitHub上找的到,链接见下文

在nuxt中使用富文本编辑器quill

在nuxtjs中使用quill富文本编辑器的时候遇到了一些问题,在此记录 1.下载 npm i quill --s npm i vue-quill-editor --s 2.在plugins下面新建文件vue-quill-editor.js写入以下内容,主要是用了自定义的工具栏 import Vue from 'vue'; import VueQuillEditor from 'vue-quill-editor'; import Quill from 'vue-quill-editor/node

html中使用富文本编辑器

引入kindeditor-all.js和lang/zh-CN.js KindEditor.ready(function(K) { window.editor1 = K.create('#id', { allowFileManager : true }); }); 原文地址:https://www.cnblogs.com/zhengziru/p/12074300.html

Django使用富文本编辑器

1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如:example,php,asp等4.在需要使用富文本编辑器的model中定义meta类: class Media: js = ( '/static/js/kindeditor-4.1.10/kindeditor-min.js', '/static/js/kindeditor-4.1.10/lang

vue中div模拟文本编辑器并且实现v-model功能

说明一下实现div模拟文本编辑器实现v-model数据的双向绑定而不用input的原因 因为div使用v-html绑定的数据中是可以嵌套标签的列入使用v-html进行数据的绑定自定义的标签并不会被过滤掉. v-model 是 Vue 框架提供的众多指令中的一个,其主要作用是可以实现在表单 <input>.<textarea> 及 <select> 标签元素上创建双向数据绑定.但是当我们但是当我们使用div添加contenteditable="true"

Django学习:使用富文本编辑器(15)

目前后台写博客的页面比较简陋,只能用来设置一些简单的文字,或者格式,而且编写不太方便.为了方便博客编写,可以使用富文本编辑器. 新增一篇文章进行测试 进入详情页,加粗效果并没有显示出来 修改详情页的模板页面blog_detail.html ----snip---- <div class='blog-content'>{{ blog.content|safe }}</div> ----snip---- 此时刷新详情页,加粗效果显示了出来. 但是在博客类型显示摘要的时候,会显示出<

vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛

一.全局注册:main.js import Vue from 'vue' import VueQuillEditor, { Quill } from 'vue-quill-editor' import { ImageDrop } from 'quill-image-drop-module' import ImageResize from 'quill-image-resize-module' import 'quill/dist/quill.core.css' import 'quill/dis