vue富文本编译器

最新推荐文章于 2024-08-06 15:16:55 发布

蓝色的落叶

最新推荐文章于 2024-08-06 15:16:55 发布

阅读量281

点赞数

分类专栏：前端文章标签：富文本编译器

本文链接：https://blog.csdn.net/qq_38502227/article/details/103469611

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1. wangEditor

直接下载：

https://github.com/wangfupeng1988/wangEditor/releases

cdn:

https://unpkg.com/wangeditor/release/wangEditor.min.js

node:

npm install wangeditor （注意 wangeditor 全部是小写字母）

用法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

//可以使用npm install wangeditor安装（注意，这里wangeditor全是小写字母）

// 引用
var E = require('wangeditor')  // 使用 npm 安装
var E = require('/wangEditor.min.js')  // 使用下载的源码

// 创建编辑器
var editor = new E('#editor')
editor.create()

<template>
  <div class="number">
    <div id="wangeditor">
      <div ref="editorElem" style="text-align:left;"></div>
    </div>
  </div>
</template>
<script>
import E from "wangeditor";
export default {
  name: "Editor",
  data() {
    return {
      editor: null,
      editorContent: ""
    };
  },
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = html => {
      this.editorContent = html;
    };
    this.editor.customConfig.menus = [
      // 菜单配置
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "code", // 插入代码
      "undo", // 撤销
      "redo" // 重复
    ];
    this.editor.create(); // 创建富文本实例
  }
};
</script>

2.UEditor

ueditor官网：

http ://ueditor.baidu.com

ueditor API文档：

http ://ueditor.baidu.com/doc

ueditor github地址：

http ://github.com/fex-team/ueditor

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>ueditor demo</title>
</head>
<body>
	<!-- 加载编辑器的容器 -->
	<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
	<!-- 配置文件 -->
	<script type="text/javascript" src="ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="ueditor.all.js"></script>
	<!-- 实例化编辑器 -->
	<script type="text/javascript">
	    var ue = UE.getEditor('container');
	</script>
</body>
</html>

在 src / main.js 文件中，引入下面的代码

//ueditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

组件UE.vue

<template>
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
    export default {
        name: 'ue',
        data () {
            return {
                editor: null
            }
        },
        props: {
            value: '',
            config: {}
        },
        mounted () {
            this.editor = window.UE.getEditor('editor', this.config);
            this.editor.addListener('ready',  () => {
                this.editor.setContent(this.value)
            })
        },
        methods: {
            getUEContent () {
                return this.editor.getContent()
            }
        },
        destroyed () {
            this.editor.destroy()
        }
    }
</script>

<template>
    <div>
        <Uediter :value="ueditor.value" :config="ueditor.config" ref="ueditor"></Uediter>
        <button @click="returnContent">显示编辑器内容</el-button>
        <div>{{dat.content}}</div>
    </div>
</template>
<script>
    import Uediter from '@/components/UE.vue';
    export default {
        components: {
            Uediter
        },
        data () {
            return {
                dat: {
                    content: ''
                },
                ueditor: {
                    value: '编辑器默认文字',
                    config: {
                        initialFrameWidth: 800,
                        initialFrameHeight: 320
                    }
                }
            }
        },
        methods: {
            returnContent () {
                this.dat.content = this.$refs.ueditor.getUEContent()
            }
        },
    }
</script>

3. summernote

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>