精华内容
下载资源
问答
  • mavonEditor

    2021-06-16 12:44:19
    mavonEditor基于Vue的markdown编辑器example (图片展示)PCInstall mavon-editor (安装)$ npm install mavon-editor --saveUse (如何引入)index.js:// 全局注册// import with ES6import Vue from 'vue'import mavon...

    mavonEditor

    82ff0673ba45f62ed54a428dff58cf34.png

    基于Vue的markdown编辑器

    example (图片展示)

    PC

    730f85935aa4ccd2c1449f72a13eae29.png

    6359d45ce47a2e1455cfd8a85b4d914b.gif

    Install mavon-editor (安装)

    $ npm install mavon-editor --save

    Use (如何引入)

    index.js:

    // 全局注册

    // import with ES6

    import Vue from 'vue'

    import mavonEditor from 'mavon-editor'

    import 'mavon-editor/dist/css/index.css'

    // use

    Vue.use(mavonEditor)

    new Vue({

    'el': '#main',

    data() {

    return { value: '' }

    }

    })

    index.html

    如何在nuxt.js 中使用

    首先在工程目录plugins 下新建 vue-mavon-editor.js

    import Vue from 'vue';

    import mavonEditor from 'mavon-editor';

    import 'mavon-editor/dist/css/index.css';

    Vue.use(mavonEditor);

    然后在nuxt.config.js 中添加plugins配置

    plugins: [

    ...

    { src: '@/plugins/vue-mavon-editor', ssr: false }

    ],

    最后一步在页面或者组件中引入

    export default {

    data() {

    return {

    markdownOption: {

    bold: true, // 粗体

    ... // 更多配置

    },

    handbook: "#### how to use mavonEditor in nuxt.js"

    };

    }

    };

    .mavonEditor {

    width: 100%;

    height: 100%;

    }

    API 文档

    props

    name 名称

    type 类型

    default 默认值

    describe 描述

    value

    String

    初始值

    language

    String

    zh-CN

    语言选择,暂支持 zh-CN: 简体中文, zh-TW: 正体中文 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语, de: 德语, ja: 日语

    fontSize

    String

    14px

    编辑区域文字大小

    scrollStyle

    Boolean

    true

    开启滚动条样式(暂时仅支持chrome)

    boxShadow

    Boolean

    true

    开启边框阴影

    boxShadowStyle

    String

    0 2px 12px 0 rgba(0, 0, 0, 0.1)

    边框阴影样式

    transition

    Boolean

    true

    是否开启过渡动画

    toolbarsBackground

    String

    #ffffff

    工具栏背景颜色

    previewBackground

    String

    #fbfbfb

    预览框背景颜色

    subfield

    Boolean

    true

    true: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏)

    defaultOpen

    String

    edit: 默认展示编辑区域 , preview: 默认展示预览区域 , 其他 = edit

    placeholder

    String

    开始编辑...

    输入框为空时默认提示文本

    editable

    Boolean

    true

    是否允许编辑

    codeStyle

    String

    code-github

    markdown样式: 默认github, 可选配色方案

    toolbarsFlag

    Boolean

    true

    工具栏是否显示

    navigation

    Boolean

    false

    默认展示目录

    shortCut

    Boolean

    true

    是否启用快捷键

    autofocus

    Boolean

    true

    自动聚焦到文本框

    ishljs

    Boolean

    true

    代码高亮

    imageFilter

    function

    null

    图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法

    imageClick

    function

    null

    图片点击事件,默认为预览,可覆盖

    tabSize

    Number

    \t

    tab转化为几个空格,默认为\t

    toolbars

    Object

    如下例

    工具栏

    /*

    默认工具栏按钮全部开启, 传入自定义对象

    例如: {

    bold: true, // 粗体

    italic: true,// 斜体

    header: true,// 标题

    }

    此时, 仅仅显示此三个功能键

    */

    toolbars: {

    bold: true, // 粗体

    italic: true, // 斜体

    header: true, // 标题

    underline: true, // 下划线

    strikethrough: true, // 中划线

    mark: true, // 标记

    superscript: true, // 上角标

    subscript: true, // 下角标

    quote: true, // 引用

    ol: true, // 有序列表

    ul: true, // 无序列表

    link: true, // 链接

    imagelink: true, // 图片链接

    code: true, // code

    table: true, // 表格

    fullscreen: true, // 全屏编辑

    readmodel: true, // 沉浸式阅读

    htmlcode: true, // 展示html源码

    help: true, // 帮助

    /* 1.3.5 */

    undo: true, // 上一步

    redo: true, // 下一步

    trash: true, // 清空

    save: true, // 保存(触发events中的save事件)

    /* 1.4.2 */

    navigation: true, // 导航目录

    /* 2.1.8 */

    alignleft: true, // 左对齐

    aligncenter: true, // 居中

    alignright: true, // 右对齐

    /* 2.2.1 */

    subfield: true, // 单双栏模式

    preview: true, // 预览

    }

    events 事件绑定

    name 方法名

    params 参数

    describe 描述

    change

    String: value , String: render

    编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)

    save

    String: value , String: render

    ctrl + s 的回调事件(保存按键,同样触发该回调)

    fullScreen

    Boolean: status , String: value

    切换全屏编辑的回调事件(boolean: 全屏开启状态)

    readModel

    Boolean: status , String: value

    切换沉浸式阅读的回调事件(boolean: 阅读开启状态)

    htmlCode

    Boolean: status , String: value

    查看html源码的回调事件(boolean: 源码开启状态)

    subfieldToggle

    Boolean: status , String: value

    切换单双栏编辑的回调事件(boolean: 双栏开启状态)

    previewToggle

    Boolean: status , String: value

    切换预览编辑的回调事件(boolean: 预览开启状态)

    helpToggle

    Boolean: status , String: value

    查看帮助的回调事件(boolean: 帮助开启状态)

    navigationToggle

    Boolean: status , String: value

    切换导航目录的回调事件(boolean: 导航开启状态)

    imgAdd

    String: filename, File: imgfile

    图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)

    imgDel

    String: filename

    图片文件删除回调事件(filename: 写在md中的文件名)

    代码高亮

    如不需要hightlight代码高亮显示,你应该设置ishljs为false

    开启代码高亮props

    // ishljs默认为true

    为优化插件体积,从v2.4.2起以下文件将默认使用cdnjs外链:

    highlight.js

    github-markdown-css

    katex(v2.4.7)

    代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载.

    github-markdown-css和katex仅会在mounted时加载

    图片上传

    exports default {

    methods: {

    // 绑定@imgAdd event

    $imgAdd(pos, $file){

    // 第一步.将图片上传到服务器.

    var formdata = new FormData();

    formdata.append('image', $file);

    axios({

    url: 'server url',

    method: 'post',

    data: formdata,

    headers: { 'Content-Type': 'multipart/form-data' },

    }).then((url) => {

    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)

    /**

    * $vm 指为mavonEditor实例,可以通过如下两种方式获取

    * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`

    * 2. 通过$refs获取: html声明ref : `,`$vm`为 `this.$refs.md`

    */

    $vm.$img2Url(pos, url);

    })

    }

    }

    }

    默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖

    基础z-index: 1500

    仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"

    快捷键

    key

    keycode

    功能

    F8

    119

    开启/关闭导航

    F9

    120

    预览/编辑切换

    F10

    121

    开启/关闭全屏

    F11

    122

    开启/关闭阅读模式

    F12

    123

    单栏/双栏切换

    TAB

    9

    缩进

    CTRL + S

    17 + 83

    触发保存

    CTRL + D

    17 + 68

    删除选中行

    CTRL + Z

    17 + 90

    上一步

    CTRL + Y

    17 + 89

    下一步

    CTRL + BreakSpace

    17 + 8

    清空编辑

    CTRL + B

    17 + 66

    加粗

    CTRL + I

    17 + 73

    斜体

    CTRL + H

    17 + 72

    # 标题

    CTRL + 1

    17 + 97 or 49

    # 标题

    CTRL + 2

    17 + 98 or 50

    ## 标题

    CTRL + 3

    17 + 99 or 51

    ### 标题

    CTRL + 4

    17 + 100 or 52

    #### 标题

    CTRL + 5

    17 + 101 or 53

    ##### 标题

    CTRL + 6

    17 + 102 or 54

    ###### 标题

    CTRL + U

    17 + 85

    ++下划线++

    CTRL + M

    17 + 77

    ==标记==

    CTRL + Q

    17 + 81

    > 引用

    CTRL + O

    17 + 79

    1. 有序列表

    CTRL + L

    17 + 76

    CTRL + ALT + S

    17 + 18 + 83

    ^上角标^

    CTRL + ALT + U

    17 + 18 + 85

    - 无序列表

    CTRL + ALT + C

    17 + 18 + 67

    ``` 代码块

    CTRL + ALT + L

    17 + 18 + 76

    mavonEditor

    CTRL + ALT + T

    17 + 18 + 84

    表格

    CTRL + SHIFT + S

    17 + 16 + 83

    下角标

    CTRL + SHIFT + D

    17 + 16 + 68

    中划线

    CTRL + SHIFT + C

    17 + 16 + 67

    居中

    CTRL + SHIFT + L

    17 + 16 + 76

    居左

    CTRL + SHIFT + R

    17 + 16 + 82

    居右

    SHIFT + TAB

    16 + 9

    取消缩进

    Dependencies (依赖)

    Markdown 语法拓展

    update(更新内容)

    Collaborators(合作者)

    Licence (证书)

    mavonEditor is open source and released under the MIT Licence.

    Copyright (c) 2017 hinesboy

    展开全文
  • JSON Editor 中文文档

    2020-12-23 08:21:30
    JSON EditorJSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行的CSS 框架,例如bootstrap, foundation, and jQueryUI等。JSON ...

    JSON Editor

    JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行的CSS 框架,例如bootstrap, foundation, and jQueryUI等。

    JSON Editor 生成的编辑器支持输入框、下拉框、等几乎所有的html5输入元素

    点击下面链接进行下载

    依赖项

    JSON Editor 不需要任何的依赖,仅仅需要一个现代浏览器支持即可。已在chrome 和firefox 测试通过。

    可选的选项

    下列内容不需要,但是如果配置的话,可以提升Json Editor 样式和可用性

    可兼容的JS模版年引擎 (例如 Mustache, Underscore, Hogan, Handlebars, Swig, Markup, or EJS)

    一个兼容的CSS框架 (例如bootstrap 2/3, foundation 3/4/5, or jqueryui)

    一个兼容的图标库(例如bootstrap 2/3 glyphicons, foundation icons 2/3, jqueryui, or font awesome 3/4)

    SCEditor 一个所见即所得的html编辑工具

    EpicEditor 一个支持Markdown的编辑器

    Select2 一个好看的下拉框组件

    使用方法

    如果你学习Json Editor的用法,可以参看下面的例子

    本文档包含了JSON Editor的详细的用法,如果你想获取更多的有用信息,请访问wiki

    初始化

    var element = document.getElementById('editor_holder');

    var editor = new JSONEditor(element, options);

    选项

    Options 可以在全局统一设置,也可以在每个实例初始话的时候单独设置

    // 全局统一设置

    JSONEditor.defaults.options.theme = 'bootstrap2';

    // 实例初始化的时候设置

    var editor = new JSONEditor(element, {

    //...

    theme: 'bootstrap2'

    });

    下面是Json Editor 可用的一些选框

    选项

    描述

    默认值

    ajax

    如果设置为 true, JSON Editor 将会用$ref扩展的URL去加载一个ajax请求.

    false

    disable_array_add

    如果设置 true, 数组对象将不显示增加按钮.

    false

    disable_array_delete

    如果设置为 true, 数组对象将不显示删除按钮.

    false

    disable_array_reorder

    如果设置为 true, 数组对象将不显示“向上”、“向下”移动按钮.

    false

    disable_collapse

    如果设置为 true, 对象和数组不再显示“折叠”按钮.

    false

    disable_edit_json

    如果设置为 true, 将隐藏 Edit JSON 按钮.

    false

    disable_properties

    如果设置为 true, 将隐藏编辑属性按钮.

    false

    form_name_root

    编辑器中输入框的name属性的开头部分,例如一个一个输入框的name 是 `root[person][name]` 其中 "root" 就是这个值.

    root

    iconlib

    编辑器使用的图标库. 可以在 CSS Integration 节点查看更多信息.

    null

    no_additional_properties

    如果设置为 true, 对象将只能包含被定义在 properties 中属性,设置为false 时,当有一个额外的不在properties的属性时,这个属性为自动附加到对象中去.

    false

    refs

    包含Schema定义对象的一个URL. 它允许你事先定义好一个JSON Schema供其他地方调用.

    {}

    required_by_default

    If true, all schemas that don't explicitly set the required property will be required.

    false

    keep_oneof_values

    如果设置为 true,当切换下拉框的时候它可以将oneOf中的属性拷贝到对象中去.

    true

    schema

    编辑器锁需要的JSON Schema . 目前支持 版本 3 和版本 4

    {}

    show_errors

    是否显示错误信息,可用的值有interaction, change, always, and never.

    "interaction"

    startval

    Seed the editor with an initial value. This should be valid against the editor's schema.

    null

    template

    要使用的js 模板引擎. 在此节模板和变量有更多信息 .

    default

    theme

    CSS 框架名.

    html

    *Note 如果 ajax 属性被设置为 true 并且 JSON Editor 需要从扩展URL中获取数据, API中的一些方法不会马上被生效

    请在调用代码前监听 ready 事件

    editor.on('ready',function() {

    // Now the api methods will be available

    editor.validate();

    });

    取值和赋值

    editor.setValue({name: "John Smith"});

    var value = editor.getValue();

    console.log(value.name) // Will log "John Smith"

    Instead of getting/setting the value of the entire editor, you can also work on individual parts of the schema:

    // Get a reference to a node within the editor

    var name = editor.getEditor('root.name');

    // `getEditor` will return null if the path is invalid

    if(name) {

    name.setValue("John Smith");

    console.log(name.getValue());

    }

    验证

    When feasible, JSON Editor won't let users enter invalid data. This is done by

    using input masks and intelligently enabling/disabling controls.

    However, in some cases it is still possible to enter data that doesn't validate against the schema.

    You can use the validate method to check if the data is valid or not.

    // Validate the editor's current value against the schema

    var errors = editor.validate();

    if(errors.length) {

    // errors is an array of objects, each with a `path`, `property`, and `message` parameter

    // `property` is the schema keyword that triggered the validation error (e.g. "minLength")

    // `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")

    console.log(errors);

    }

    else {

    // It's valid!

    }

    By default, this will do the validation with the editor's current value.

    If you want to use a different value, you can pass it in as a parameter.

    // Validate an arbitrary value against the editor's schema

    var errors = editor.validate({

    value: {

    to: "test"

    }

    });

    监听Change事件

    The change event is fired whenever the editor's value changes.

    editor.on('change',function() {

    // Do something

    });

    editor.off('change',function_reference);

    You can also watch a specific field for changes:

    editor.watch('path.to.field',function() {

    // Do something

    });

    editor.unwatch('path.to.field',function_reference);

    禁用/可用编辑器

    This lets you disable editing for the entire form or part of the form.

    // Disable entire form

    editor.disable();

    // Disable part of the form

    editor.getEditor('root.location').disable();

    // Enable entire form

    editor.enable();

    // Enable part of the form

    editor.getEditor('root.location').enable();

    // Check if form is currently enabled

    if(editor.isEnabled()) alert("It's editable!");

    销毁

    This removes the editor HTML from the DOM and frees up resources.

    editor.destroy();

    集成CSS

    JSON Editor 可以集成一些比较流行的CSS框架

    目前支持以下框架:

    html (the default)

    bootstrap2

    bootstrap3

    foundation3

    foundation4

    foundation5

    jqueryui

    默认皮肤是 html, 使用这个选项的时候,没有任何的class 和样式.

    通过修改变量 JSONEditor.defaults.options.theme 的值,可以改变默认的CSS 框架

    JSONEditor.defaults.options.theme = 'foundation5';

    你也可以在实例化的时候覆盖默认值,通过如下方式

    var editor = new JSONEditor(element,{

    schema: schema,

    theme: 'jqueryui'

    });

    图标库

    JSON Editor 支持流行的图标库.

    目前支持以下图标库:

    bootstrap2 (glyphicons)

    bootstrap3 (glyphicons)

    foundation2

    foundation3

    jqueryui

    fontawesome3

    fontawesome4

    默认情况下没有使用图标库,和设置CSS 皮肤一样,你可以全局设置或实例化的时候设置

    // Set the global default

    JSONEditor.defaults.options.iconlib = "bootstrap2";

    // Set the icon lib during initialization

    var editor = new JSONEditor(element,{

    schema: schema,

    iconlib: "fontawesome4"

    });

    你也可以创建你自己的自定义的皮肤或图标库,你可以参考一些示例。

    JSON Schema Support

    JSON Editor fully supports version 3 and 4 of the JSON Schema core and validation specifications.

    Some of The hyper-schema specification is supported as well.

    $ref and definitions

    JSON Editor supports schema references to external URLs and local definitions. Here's an example showing both:

    {

    "type": "object",

    "properties": {

    "name": {

    "title": "Full Name",

    "$ref": "#/definitions/name"

    },

    "location": {

    "$ref": "http://mydomain.com/geo.json"

    }

    },

    "definitions": {

    "name": {

    "type": "string",

    "minLength": 5

    }

    }

    }

    Local references must point to the definitions object of the root node of the schema.

    So, #/customkey/name will throw an exception.

    If loading an external url via Ajax, the url must either be on the same domain or return the correct HTTP cross domain headers.

    If your URLs don't meet this requirement, you can pass in the references to JSON Editor during initialization (see Usage section above).

    Self-referential $refs are supported. Check out examples/recursive.html for usage examples.

    hyper-schema links

    The links keyword from the hyper-schema specification can be used to add links to related documents.

    JSON Editor will use the mediaType property of the links to determine how best to display them.

    Image, audio, and video links will display the media inline as well as providing a text link.

    Here are a couple examples:

    Simple text link

    {

    "title": "Blog Post Id",

    "type": "integer",

    "links": [

    {

    "rel": "comments",

    "href": "/posts/{{self}}/comments/"

    }

    ]

    }

    Show a video preview (using HTML5 video)

    {

    "title": "Video filename",

    "type": "string",

    "links": [

    {

    "href": "/videos/{{self}}.mp4",

    "mediaType": "video/mp4"

    }

    ]

    }

    The href property is a template that gets re-evaluated every time the value changes.

    The variable self is always available. Look at the Dependencies section below for how to include other fields or use a custom template engine.

    属性排序

    There is no way to specify property ordering in JSON Schema (although this may change in v5 of the spec).

    JSON Editor introduces a new keyword propertyOrder for this purpose. The default property order if unspecified is 1000. Properties with the same order will use normal JSON key ordering.

    {

    "type": "object",

    "properties": {

    "prop1": {

    "type": "string"

    },

    "prop2": {

    "type": "string",

    "propertyOrder": 10

    },

    "prop3": {

    "type": "string",

    "propertyOrder": 1001

    },

    "prop4": {

    "type": "string",

    "propertyOrder": 1

    }

    }

    }

    In the above example schema, prop1 does not have an order specified, so it will default to 1000.

    So, the final order of properties in the form (and in returned JSON data) will be:

    prop4 (order 1)

    prop2 (order 10)

    prop1 (order 1000)

    prop3 (order 1001)

    默认属性

    The default behavior of JSON Editor is to include all object properties defined with the properties keyword.

    To override this behaviour, you can use the keyword defaultProperties to set which ones are included:

    {

    "type": "object",

    "properties": {

    "name": {"type": "string"},

    "age": {"type": "integer"}

    },

    "defaultProperties": ["name"]

    }

    Now, only the name property above will be included by default. You can use the "Object Properties" button

    to add the "age" property back in.

    格式化

    JSON Editor supports many different formats for schemas of type string. They will work with schemas of type integer and number as well, but some formats may produce weird results.

    If the enum property is specified, format will be ignored.

    JSON Editor uses HTML5 input types, so some of these may render as basic text input in older browsers:

    color

    date

    datetime

    datetime-local

    email

    month

    number

    range

    tel

    text

    textarea

    time

    url

    week

    下面是一个用format格式化生成一个选择颜色控件的例子

    {

    "type": "object",

    "properties": {

    "color": {

    "type": "string",

    "format": "color"

    }

    }

    }

    一个特殊的字符串编辑器

    In addition to the standard HTML input formats, JSON Editor can also integrate with several 3rd party specialized editors. These libraries are not included in JSON Editor and you must load them on the page yourself.

    SCEditor provides WYSIWYG editing of HTML and BBCode. To use it, set the format to html or bbcode and set the wysiwyg option to true:

    {

    "type": "string",

    "format": "html",

    "options": {

    "wysiwyg": true

    }

    }

    You can configure SCEditor by setting configuration options in JSONEditor.plugins.sceditor. Here's an example:

    JSONEditor.plugins.sceditor.emoticonsEnabled = false;

    EpicEditor is a simple Markdown editor with live preview. To use it, set the format to markdown:

    {

    "type": "string",

    "format": "markdown"

    }

    You can configure EpicEditor by setting configuration options in JSONEditor.plugins.epiceditor. Here's an example:

    JSONEditor.plugins.epiceditor.basePath = 'epiceditor';

    Ace Editor is a syntax highlighting source code editor. You can use it by setting the format to any of the following:

    actionscript

    batchfile

    c

    c++

    cpp (alias for c++)

    coffee

    csharp

    css

    dart

    django

    ejs

    erlang

    golang

    handlebars

    haskell

    haxe

    html

    ini

    jade

    java

    javascript

    json

    less

    lisp

    lua

    makefile

    markdown

    matlab

    mysql

    objectivec

    pascal

    perl

    pgsql

    php

    python

    r

    ruby

    sass

    scala

    scss

    smarty

    sql

    stylus

    svg

    twig

    vbscript

    xml

    yaml

    {

    "type": "string",

    "format": "yaml"

    }

    You can use the hyper-schema keyword media instead of format too if you prefer for formats with a mime type:

    {

    "type": "string",

    "media": {

    "type": "text/html"

    }

    }

    You can override the default Ace theme by setting the JSONEditor.plugins.ace.theme variable.

    JSONEditor.plugins.ace.theme = 'twilight';

    布尔类型

    默认的布尔类型编辑器是一个包含true,false的下拉框,如果设置format=checkbox那么将以勾选框的形式展示

    {

    "type": "boolean",

    "format": "checkbox"

    }

    数组类型

    默认的数组编辑器会占用比较大的屏幕空间. 使用 table and tabs 格式选项可以可以将界面变得紧凑些

    table 选项在数组的结构相同并且不复杂的时候用起来会比较好

    tabs 选项可以针对任何数组, 但是每次只能显示数组中的一项. 在每个数组项的左边会有一个页签开关.

    下面是一个 table 选项的例子:

    {

    "type": "array",

    "format": "table",

    "items": {

    "type": "object",

    "properties": {

    "name": {

    "type": "string"

    }

    }

    }

    }

    对于数组中的枚举字符串,你可以使用select or checkbox选项,这两个选项需要一个类似如下的特殊结构才能工作

    {

    "type": "array",

    "uniqueItems": true,

    "items": {

    "type": "string",

    "enum": ["value1","value2"]

    }

    }

    默认情况下(不设置format的情况),如果枚举的选项少于8个的时候,将会启用checkbox编辑器,否则的话会启用select 编辑器

    你可以通过下面的代码的方式来覆盖默认项

    {

    "type": "array",

    "format": "select",

    "uniqueItems": true,

    "items": {

    "type": "string",

    "enum": ["value1","value2"]

    }

    }

    对象

    默认情况下对象每个子对象会布局一行,format=grid的时候,每行可以放多个子对象编辑器

    This can make the editor much more compact, but at a cost of not guaranteeing child editor order.

    {

    "type": "object",

    "properties": {

    "name": { "type": "string" }

    },

    "format": "grid"

    }

    编辑器选项

    Editors can accept options which alter the behavior in some way.

    collapsed - 折叠

    disable_array_add - 禁用增加按钮

    disable_array_delete - 禁用删除按钮

    disable_array_reorder - 禁用移动on个按钮

    disable_collapse - 禁用折叠

    disable_edit_json - 禁用JSON编辑按钮

    disable_properties - 禁用属性按钮

    enum_titles - 枚举标题,对应 enum 属性。当使用select 的时候,将显示enum_titles的内容,但是值还是来自enum

    expand_height - If set to true, the input will auto expand/contract to fit the content. Works best with textareas.

    grid_columns - Explicitly set the number of grid columns (1-12) for the editor if it's within an object using a grid layout.

    hidden - 编辑器是否隐藏

    input_height - 编辑器的高度

    input_width - 编辑器的宽度

    remove_empty_properties - 移除空的对象属性

    {

    "type": "object",

    "options": {

    "collapsed": true

    },

    "properties": {

    "name": {

    "type": "string"

    }

    }

    }

    You can globally set the default options too if you want:

    JSONEditor.defaults.editors.object.options.collapsed = true;

    依赖

    有的时候,一个字段的值依赖于另外一个字段,这是不可避免年遇到的问题

    JSON Schema中 dependencies 选项 不能足够灵活的处理一些实例,因此 JSON Editor 引入了一个复合的自定义关键词来解决这个问题

    第一步,修改Schema增加一个watch 属性

    {

    "type": "object",

    "properties": {

    "first_name": {

    "type": "string"

    },

    "last_name": {

    "type": "string"

    },

    "full_name": {

    "type": "string",

    "watch": {

    "fname": "first_name",

    "lname": "last_name"

    }

    }

    }

    }

    关键词watch告诉JSON Editor 哪个字段被更改了

    关键词 (fname and lname 例子中) 是这个属性的别名

    两个属性的值 (first_name and last_name) 是一个属性的路径.(例如 "path.to.field").

    默认路径是来从架构的根开始,但是你可以在架构中年创建一个id属性作为锚点,来创建一个相对路径.这在数组中相当的有用.

    下面是一个例子

    {

    "type": "array",

    "items": {

    "type": "object",

    "id": "arr_item",

    "properties": {

    "first_name": {

    "type": "string"

    },

    "last_name": {

    "type": "string"

    },

    "full_name": {

    "type": "string",

    "watch": {

    "fname": "arr_item.first_name",

    "lname": "arr_item.last_name"

    }

    }

    }

    }

    }

    那现在 full_name 在每个数组元素中将被 first_name and last_name 两个字段监控

    模板

    监控字段并不能做任何事情。拿上面的例子来说,你还需要告诉编辑器,full_name 的内容可能是类似这样的格式fname [space] lname

    编辑器使用了一个js模版引擎去实现它。

    默认编辑器包含了一个简单的模板引擎,它仅仅只能替换类似{{variable}}这样的模板。你可以通过配置来是编辑器支持其他的一些比较流行的模版引擎。

    目前支持的模板引擎有

    ejs

    handlebars

    hogan

    markup

    mustache

    swig

    underscore

    你可以通过修改默认的配置项 JSONEditor.defaults.options.template 来支持模板引擎,如下

    JSONEditor.defaults.options.template = 'handlebars';

    你也可以在实例初始化的时候来设置

    var editor = new JSONEditor(element,{

    schema: schema,

    template: 'hogan'

    });

    这里有一个使用了模板引擎的完整的 full_name 的例子,供参考

    {

    "type": "object",

    "properties": {

    "first_name": {

    "type": "string"

    },

    "last_name": {

    "type": "string"

    },

    "full_name": {

    "type": "string",

    "template": "{{fname}} {{lname}}",

    "watch": {

    "fname": "first_name",

    "lname": "last_name"

    }

    }

    }

    }

    枚举值

    另外一个常见的情况就是其他的字段的值依赖于下拉菜单的值参考下面的例子

    {

    "type": "object",

    "properties": {

    "possible_colors": {

    "type": "array",

    "items": {

    "type": "string"

    }

    },

    "primary_color": {

    "type": "string"

    }

    }

    }

    让我来告诉你,你想强制primary_color为一个possible_colors 数组中的一个。

    首先,我们必须告诉 primary_color 字段监控possible_colors 数组

    {

    "primary_color": {

    "type": "string",

    "watch": {

    "colors": "possible_colors"

    }

    }

    }

    接下来,我们使用一个特殊的关键词 enumSource 去告诉编辑器,我们想使用这个字段去填充下拉框

    {

    "primary_color": {

    "type": "string",

    "watch": {

    "colors": "possible_colors"

    },

    "enumSource": "colors"

    }

    }

    那么一旦possible_colors数组的值发生变化,下拉菜单的值将被改变

    这是 enumSource的最基本的用法。

    这个属性支持更多的动作,例如 filtering, pulling from multiple sources, constant values 等等。

    这里有一个复杂的例子,它使用swig模板引擎的语法去显示高级特性

    {

    // An array of sources

    "enumSource": [

    // Constant values

    ["none"],

    {

    // A watched field source

    "source": "colors",

    // Use a subset of the array

    "slice": [2,5],

    // Filter items with a template (if this renders to an empty string, it won't be included)

    "filter": "{% if item !== 'black' %}1{% endif %}",

    // Specify the display text for the enum option

    "title": "{{item|upper}}",

    // Specify the value property for the enum option

    "value": "{{item|trim}}"

    },

    // Another constant value at the end of the list

    ["transparent"]

    ]

    }

    你也可以使用如下语法去实现一个特殊的一个静态列表。

    {

    "enumSource": [{

    // A watched field source

    "source": [

    {

    "value": 1,

    "title": "One"

    },

    {

    "value": 2,

    "title": "Two"

    }

    ],

    "title": "{{item.title}}",

    "value": "{{item.value}}"

    }]

    ]

    }

    这个例子直接使用了一个字符串数组。使用表单动作,你也可以将它构造成一个对象的数组,例如

    {

    "type": "object",

    "properties": {

    "possible_colors": {

    "type": "array",

    "items": {

    "type": "object",

    "properties": {

    "text": {

    "type": "string"

    }

    }

    }

    },

    "primary_color": {

    "type": "string",

    "watch": {

    "colors": "possible_colors"

    },

    "enumSource": [{

    "source": "colors",

    "value": "{{item.text}}"

    }]

    }

    }

    }

    在这个动作表单中,所有的模板选项都有一个item 和i 属性。

    item 指代的是数组元素

    i 是一个从0开始的序号

    动态标题

    The title keyword of a schema is used to add user friendly headers to the editing UI. Sometimes though, dynamic headers, which change based on other fields, are helpful.

    Consider the example of an array of children. Without dynamic headers, the UI for the array elements would show Child 1, Child 2, etc..

    It would be much nicer if the headers could be dynamic and incorporate information about the children, such as 1 - John (age 9), 2 - Sarah (age 11).

    To accomplish this, use the headerTemplate property. All of the watched variables are passed into this template, along with the static title title (e.g. "Child"), the 0-based index i0 (e.g. "0" and "1"), the 1-based index i1, and the field's value self (e.g. {"name": "John", "age": 9}).

    {

    "type": "array",

    "title": "Children",

    "items": {

    "type": "object",

    "title": "Child",

    "headerTemplate": "{{ i1 }} - {{ self.name }} (age {{ self.age }})",

    "properties": {

    "name": { "type": "string" },

    "age": { "type": "integer" }

    }

    }

    }

    Custom Template Engines

    If one of the included template engines isn't sufficient,

    you can use any custom template engine with a compile method. For example:

    var myengine = {

    compile: function(template) {

    // Compile should return a render function

    return function(vars) {

    // A real template engine would render the template here

    var result = template;

    return result;

    }

    }

    };

    // Set globally

    JSONEditor.defaults.options.template = myengine;

    // Set on a per-instance basis

    var editor = new JSONEditor(element,{

    schema: schema,

    template: myengine

    });

    Language and String Customization

    JSON Editor uses a translate function to generate strings in the UI. A default en language mapping is provided.

    You can easily override individual translations in the default language or create your own language mapping entirely.

    // Override a specific translation

    JSONEditor.defaults.languages.en.error_minLength =

    "This better be at least {{0}} characters long or else!";

    // Create your own language mapping

    // Any keys not defined here will fall back to the "en" language

    JSONEditor.defaults.languages.es = {

    error_notset: "propiedad debe existir"

    };

    By default, all instances of JSON Editor will use the en language. To override this default, set the JSONEditor.defaults.language property.

    JSONEditor.defaults.language = "es";

    Custom Editor Interfaces

    JSON Editor contains editor interfaces for each of the primitive JSON types as well as a few other specialized ones.

    You can add custom editors interfaces fairly easily. Look at any of the existing ones for an example.

    JSON Editor uses resolver functions to determine which editor interface to use for a particular schema or subschema.

    Let's say you make a custom location editor for editing geo data. You can add a resolver function to use this custom editor when appropriate. For example:

    // Add a resolver function to the beginning of the resolver list

    // This will make it run before any other ones

    JSONEditor.defaults.resolvers.unshift(function(schema) {

    if(schema.type === "object" && schema.format === "location") {

    return "location";

    }

    // If no valid editor is returned, the next resolver function will be used

    });

    The following schema will now use this custom editor for each of the array elements instead of the default object editor.

    {

    "type": "array",

    "items": {

    "type": "object",

    "format": "location",

    "properties": {

    "longitude": {

    "type": "number"

    },

    "latitude": {

    "type": "number"

    }

    }

    }

    }

    如果你创建了一个对其他人有用的自定义的编辑器,请提交并分享它给别人!

    可能性是无穷无尽的。下面有一些好的些想法:

    用一个紧凑的方式去编辑

    下拉框用单选按钮来实现

    字符串的自动提示,类似枚举但是并不局限于枚举

    字符串数组使用tag 方式来实现会更好些

    基于Canvas的图片编辑器等

    自定义验证

    // 如果验证通过返回一个空的数组,验证不通过则需要返回错误信息

    JSONEditor.defaults.custom_validators.push(function(schema, value, path) {

    var errors = [];

    if(schema.format==="date") {

    if(!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(value)) {

    // Errors must be an object with `path`, `property`, and `message`

    errors.push({

    path: path,

    property: 'format',

    message: 'Dates must be in the format "YYYY-MM-DD"'

    });

    }

    }

    return errors;

    });

    集成jQuery

    当jquery 加载到页面的时候,你可以用jquery 的方式去加载插件,如下

    $("#editor_holder")

    .jsoneditor({

    schema: {},

    theme: 'bootstrap3'

    })

    .on('ready', function() {

    // Get the value

    var value = $(this).jsoneditor('value');

    value.name = "John Smith";

    // Set the value

    $(this).jsoneditor('value',value);

    });

    npm的package.json字段含义中文文档

    简介 本文档有所有package.json中必要的配置.它必须是真正的json,而不是js对象. 本文档中描述的很多行为都受npm-config(7)的影响. 默认值 npm会根据包内容设置一些默认值 ...

    Knockout中文开发指南(完整版API中文文档) 目录索引

    a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...

    Spring中文文档

    前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

    Core 中文文档

    ASP.NET Core 中文文档 第二章 指南(1)用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序   原文:Your First ASP. ...

    phantomjs 中文文档

    phantomjs 中文文档 转载 入门教程:转载 http://www.cnblogs.com/front-Thinking/p/4321720.html 1.介绍 简介   PhantomJS是一 ...

    IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端

    IdentityServer4 中文文档 -15- (快速入门)添加 JavaScript 客户端 原文:http://docs.identityserver.io/en/release/quicks ...

    IdentityServer4 中文文档 -13- (快速入门)切换到混合流并添加 API 访问

    IdentityServer4 中文文档 -13- (快速入门)切换到混合流并添加 API 访问 原文:http://docs.identityserver.io/en/release/quickst ...

    axios 中文文档(转载)

    axios中文文档 转载来源:https://www.jianshu.com/p/7a9fbcbb1114 原始出处:lewis1990@amoy axios 基于promise用于浏览器和node. ...

    随机推荐

    mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风

    (-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...

    JAVA中的正则表达式

    正则表达式:是字符串内容的匹配模板 正则表达式本身就是一个字符串 正则表达式的模糊符号: 一个[ ]代表一个字符,括号里面表示可以选择那些字符 { }用来表示前面这个正则表达式出现的次数 ?+* 这三 ...

    javascript 获取父页面中元素对象方法

    父页面中:

    attr与prop的区别

    我们在获取checked属性值的时候,如果被选中则值为"checked"没选中获取值就是undefined. (引述他人)因为在有些浏览器中比如说只要写disabled,check ...

    spring security 3中的10个典型用法小结

    spring security 3比较庞大,但功能很强,下面小结下spring security 3中值得 注意的10个典型用法 1)多个authentication-provide可以同时使用 &l ...

    Python 简单聊天室

    #coding=utf-8 from socket import * from threading import Thread import time udpSocket = socket(AF_IN ...

    百度TTS的来由

    #### https://home-assistant.io/components/tts.baidu/#### https://github.com/charleyzhu/HomeAssistant ...

    cookie存储

    cookie就是用来存储数据的 cookie先分装函数 这是用来存数据的函数 function setCookie(name,value,iDay){ if(iDay){ var oDate = ne ...

    Spring-IOC 扩展点 BeanFactoryPostProcessor及其子接口解析

    BeanFactoryPostProcessor 接口的英文描述: Allows for custom modification of an application context's bean de ...

    展开全文
  • vue集成editor.md

    2021-05-26 12:37:27
    editor.md:一款markdown编辑器,个人这么理解的,看起来很高大尚 官网地址:https://pandao.github.io/editor.md/ 坑爹的是在vue里面不能直接使用,需要自己封装 markdown一般需要两个东西,编辑和预览,分享一个...

    editor.md:一款markdown编辑器,个人这么理解的,看起来很高大尚
    官网地址:https://pandao.github.io/editor.md/

    截图来自官网

    坑爹的是在vue里面不能直接使用,需要自己封装

    markdown一般需要两个东西,编辑和预览,分享一个我自己基于editor.md封装的组件,用的是vue3

    录屏就没有了,动图的话太大上传不了

    源码地址

    这里需要安装scriptjs

    npm install scriptjs --save
    

    编辑组件

    <template>
      <div>
        <link rel="stylesheet" href="/static/editor.md/css/editormd.css">
        <!-- editormd -->
        <div id="editor" style="z-index: 10" />
      </div>
    </template>
    
    <script>
    import scriptjs from 'scriptjs'
    
    export default {
      name: 'EditorMarkdown',
      props: {
        modelValue: {
          type: String,
          required: false,
          default: ''
        },
        height: {
          type: String,
          required: false,
          default: '600px'
        }
      },
      data() {
        return {
          editor: {}
        }
      },
      mounted() {
        // 设置延迟初始化markdown编辑器, 因为只会初始化一次,需要等待数据加载完成之后再初始化
        setTimeout(() => {
          this.initEditor()
        }, 300)
      },
      methods: {
        initEditor() {
          (async() => {
            await this.fetchScript('/static/editor.md/jquery-1.11.3.min.js')
            await this.fetchScript('/static/editor.md/editormd.min.js')
    
            this.$nextTick(() => {
              // 内容
              var content = this.modelValue
    
              const editor = window.editormd('editor', {
                path: '/static/editor.md/lib/',
                height: this.height,
                emoji: true,
                // 开启图片上传,图片上传重写了的
                imageUpload: true,
                imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
                // 这里需要考虑返回值,所以封装了一层
                imageUploadURL: '/markdown/upload',
                htmlDecode: true, // 识别html标签
                // 监听更新,更新父组件值
                change: function() {
                  this.$emit('update:modelValue', this.getMarkdown())
                },
                // 退出全屏
                onfullscreen: function() {
                  // 原生JS修改层级
                  var editor = document.getElementById('editor')
                  editor.style['z-index'] = 13
                },
                // 全屏
                onfullscreenExit: function() {
                  // 原生JS修改层级
                  var editor = document.getElementById('editor')
                  editor.style['z-index'] = 10
                },
                // 加载完成后再设置内容
                onload: function() {
                  this.setMarkdown(content)
                  // 加载ctrl + v粘贴图片插件
                  window.editormd.loadPlugin('/static/editor.md/plugins/image-handle-paste/image-handle-paste', function() {
                    editor.imagePaste()
                  })
                }
              })
    
              const vm = this
              // 监听,改变父组件的值
              editor.on('change', function() {
                vm.$emit('update:modelValue', this.getMarkdown())
              })
    
              this.editor = editor
            })
          })()
        },
        fetchScript(url) {
          return new Promise((resolve) => {
            scriptjs(url, () => {
              resolve()
            })
          })
        }
      }
    }
    </script>
    
    <style scoped>
    /* 上传图片弹窗样式有点问题,可能是冲突了 */
    #editor::v-deep(.editormd-dialog-header) {
      padding: 0 20px;
    }
    </style>
    
    

    这里需要注意:我踩过的坑

    1. editor对象
      this.editor = editor,data里面保存后,其他方法里面this.editor不是editormd('', options)创建的那个,所以setValue(), setMarkdown()方法都用不了

    2. 全屏压盖
      z-index层级问题,我这里的解决方法是监听editor的全屏和退出全屏事件,js修改z-index样式

    3. 更新反馈
      监听editor的change事件,将值反馈给父组件,父组件通过v-model绑定值,这里修改父组件的值是不是更新到子组件额

    4. 初始化延迟
      更新的时候,一般都是异步加载,由于editor只初始化一次的问题,所以这里设置延迟初始化

    调用

    <EditorMarkdown v-model="form.content" />
    

    预览组件

    <template>
      <div>
        <link rel="stylesheet" href="/static/editor.md/css/editormd.css">
        <div id="editor" style="padding: 0">
          <textarea id="content" v-model="markdownToHtml" />
        </div>
      </div>
    </template>
    
    <script>
    import scriptjs from 'scriptjs'
    export default {
      name: 'EditormdPreview',
      props: {
        value: {
          type: String,
          required: false,
          default: ''
        }
      },
      data() {
        return {
          editor: null
        }
      },
      computed: {
        markdownToHtml() {
          return this.value
        }
      },
      mounted() {
        // 初始化
        this.initEditor()
      },
      methods: {
        initEditor() {
          (async() => {
            await this.fetchScript('/static/editor.md/jquery-1.11.3.min.js')
            await this.fetchScript('/static/editor.md/lib/marked.min.js')
            await this.fetchScript('/static/editor.md/lib/prettify.min.js')
            await this.fetchScript('/static/editor.md/lib/raphael.min.js')
            await this.fetchScript('/static/editor.md/lib/underscore.min.js')
            await this.fetchScript('/static/editor.md/lib/sequence-diagram.min.js')
            await this.fetchScript('/static/editor.md/lib/flowchart.min.js')
            await this.fetchScript('/static/editor.md/lib/jquery.flowchart.min.js')
            await this.fetchScript('/static/editor.md/editormd.min.js')
    
            await this.$nextTick(() => {
              this.editor = window.editormd.markdownToHTML('editor', {
                path: '/static/editor.md/lib/',
                emoji: true,
                htmlDecode: true // 识别html标签
              })
            })
            // const content = this.value
            // // 设置值, 另一种方法
            // const contentDoc = document.getElementById('content')
            // contentDoc.value = content
          })()
        },
        fetchScript(url) {
          return new Promise((resolve) => {
            scriptjs(url, () => {
              resolve()
            })
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    调用

    <EditormdPreview :value="markdown.content" />
    

    图片上传

    这里需要重写上传,这里上传是不带token的,所以需要加到白名单里面去,要求携带token的话需要自己实现
    在这里插入图片描述
    image-dialog.js,这是从网上找的,可以用

    /*!
     * Image (upload) dialog plugin for Editor.md
     *
     * @file        image-dialog.js
     * @author      pandao
     * @version     1.3.4
     * @updateTime  2015-06-09
     * {@link       https://github.com/pandao/editor.md}
     * @license     MIT
     */
    
    (function() {
    
      var factory = function (exports) {
    
        var pluginName = "image-dialog";
    
        exports.fn.imageDialog = function () {
    
          var _this = this;
          var cm = this.cm;
          var lang = this.lang;
          var editor = this.editor;
          var settings = this.settings;
          var cursor = cm.getCursor();
          var selection = cm.getSelection();
          var imageLang = lang.dialog.image;
          var classPrefix = this.classPrefix;
          var iframeName = classPrefix + "image-iframe";
          var dialogName = classPrefix + pluginName, dialog;
    
          cm.focus();
    
          var loading = function (show) {
            var _loading = dialog.find("." + classPrefix + "dialog-mask");
            _loading[(show) ? "show" : "hide"]();
          };
    
          if (editor.find("." + dialogName).length < 1) {
            var guid = (new Date).getTime();
            var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
    
            if (settings.crossDomainUpload) {
              action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
            }
    
            //注释的是官方的写法
            // var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
            //                         ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
            //                         "<label>" + imageLang.url + "</label>" +
            //                         "<input type=\"text\" data-url />" + (function(){
            //                             return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
            //                                                                 "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
            //                                                                 "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
            //                                                             "</div>" : "";
            //                         })() +
            //                         "<br/>" +
            //                         "<label>" + imageLang.alt + "</label>" +
            //                         "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
            //                         "<br/>" +
            //                         "<label>" + imageLang.link + "</label>" +
            //                         "<input type=\"text\" value=\"http://\" data-link />" +
            //                         "<br/>" +
            //                     ( (settings.imageUpload) ? "</form>" : "</div>");
    
    
            //这是我个人写法
            var dialogContent = ((settings.imageUpload) ? "<form action=\"#\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">") +
              ((settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "") +
              "<label>" + imageLang.url + "</label>" +
              "<input type=\"text\" data-url />" + (function () {
                return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
                  "<input type=\"file\" name=\"" + classPrefix + "image-file\" id=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
                  "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
                  "</div>" : "";
              })() +
              "<br/>" +
              "<label>" + imageLang.alt + "</label>" +
              "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
              "<br/>" +
              "<label>" + imageLang.link + "</label>" +
              "<input type=\"text\" value=\"http://\" data-link />" +
              "<br/>" +
              ((settings.imageUpload) ? "</form>" : "</div>");
    
    
            //这是官方的,不知道为什么,官方把它给注释掉了
            //var imageFooterHTML = "<button class=\"" + classPrefix + "btn " + classPrefix + "image-manager-btn\" style=\"float:left;\">" + imageLang.managerButton + "</button>";
    
            dialog = this.createDialog({
              title: imageLang.title,
              width: (settings.imageUpload) ? 465 : 380,
              height: 254,
              name: dialogName,
              content: dialogContent,
              mask: settings.dialogShowMask,
              drag: settings.dialogDraggable,
              lockScreen: settings.dialogLockScreen,
              maskStyle: {
                opacity: settings.dialogMaskOpacity,
                backgroundColor: settings.dialogMaskBgColor
              },
              buttons: {
                enter: [lang.buttons.enter, function () {
                  var url = this.find("[data-url]").val();
                  var alt = this.find("[data-alt]").val();
                  var link = this.find("[data-link]").val();
    
                  if (url === "") {
                    alert(imageLang.imageURLEmpty);
                    return false;
                  }
    
                  var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
    
                  if (link === "" || link === "http://") {
                    cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
                  } else {
                    cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
                  }
    
                  if (alt === "") {
                    cm.setCursor(cursor.line, cursor.ch + 2);
                  }
    
                  this.hide().lockScreen(false).hideMask();
    
                  //删除对话框
                  this.remove();
    
                  return false;
                }],
    
                cancel: [lang.buttons.cancel, function () {
                  this.hide().lockScreen(false).hideMask();
    
                  //删除对话框
                  this.remove();
    
                  return false;
                }]
              }
            });
    
            dialog.attr("id", classPrefix + "image-dialog-" + guid);
    
            if (!settings.imageUpload) {
              return;
            }
    
            var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]");
    
            fileInput.bind("change", function () {
              var fileName = fileInput.val();
              var isImage = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$", "i"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/
    
              if (fileName === "") {
                alert(imageLang.uploadFileEmpty);
    
                return false;
              }
    
              if (!isImage.test(fileName)) {
                alert(imageLang.formatNotAllowed + settings.imageFormats.join(", "));
    
                return false;
              }
    
              loading(true);
    
              var submitHandler = function () {
    
    
                var uploadIframe = document.getElementById(iframeName);
    
                uploadIframe.onload = function () {
    
                  loading(false);
    
                  //注释的是官方写法
                  // var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body;
                  // var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null);
                  //
                  // json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")");
                  //
                  // if(!settings.crossDomainUpload)
                  // {
                  //   if (json.success === 1)
                  //   {
                  //       dialog.find("[data-url]").val(json.url);
                  //   }
                  //   else
                  //   {
                  //       alert(json.message);
                  //   }
                  // }
                  //
                  // return false;
    
    
                  //这是我个人写法
                  var formData = new FormData();
                  formData.append("editormd-image-file", $("#editormd-image-file")[0].files[0]);
                  var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
    
                  $.ajax({
                    type: "post",
                    url: action,
                    data: formData,
                    dataType: "json",
                    async: false,
                    processData: false, // 使数据不做处理
                    contentType: false, // 不要设置Content-Type请求头
                    success: function (data) {
                      // 成功拿到结果放到这个函数 data就是拿到的结果
                      if (data.success === "1") {
                        dialog.find("[data-url]").val(data.url);
                      } else {
                        alert(data.message);
                      }
                    },
                  });
    
                  return false;
                };
    
    
              };
    
              dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
            });
          }
    
          dialog = editor.find("." + dialogName);
          dialog.find("[type=\"text\"]").val("");
          dialog.find("[type=\"file\"]").val("");
          dialog.find("[data-link]").val("http://");
    
          this.dialogShowMask(dialog);
          this.dialogLockScreen();
          dialog.show();
    
        };
    
      };
    
      // CommonJS/Node.js
      if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        module.exports = factory;
      } else if (typeof define === "function")  // AMD/CMD/Sea.js
      {
        if (define.amd) { // for Require.js
    
          define(["editormd"], function (editormd) {
            factory(editormd);
          });
    
        } else { // for Sea.js
          define(function (require) {
            var editormd = require("./../../editormd");
            factory(editormd);
          });
        }
      } else {
        factory(window.editormd);
      }
    
    })();
    

    服务端接收与返回值

    /**
     * 文件上传
    * @param multipartFile 上传的文件对象
    * @return editormd格式的结果
    */
    @PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public JSONObject upload(@RequestParam(value = "editormd-image-file") MultipartFile multipartFile) {
    	System.out.println(multipartFile.getOriginalFilename());
    	Calendar calendar = Calendar.getInstance();
    	String path = "/" + calendar.get(Calendar.YEAR) + "/" + (calendar.get(Calendar.MONTH) + 1) + "/" + calendar.get(Calendar.DAY_OF_MONTH);
    	// 上传结果
    	ResultDto<String> upload = fileRemoteService.upload(path, multipartFile, true);
    	JSONObject jsonObject = new JSONObject();
    	jsonObject.put("success", "1");
    	jsonObject.put("message", "上传成功");
    	jsonObject.put("url", "/file" + upload.getData());
    	return jsonObject;
    }
    

    ctrl + v图片上传

    image-handle-paste.js
    在这里插入图片描述
    编辑,需要在初始化的时候注册插件

    展开全文
  • vue-uieditor

    2021-06-18 04:07:08
    VUE 可视化编辑器(vue-uieditor)基于 VUE 2.x在线可视化VUE开发,所见即所得支持 es2015 JS 语法开发结果不用二次编译,马上可以使用减轻开发成本,提升项目维护效率可实现低代码开发相关资源安装与使用安装yarn add...

    VUE 可视化编辑器(vue-uieditor)

    基于 VUE 2.x

    在线可视化VUE开发,所见即所得

    支持 es2015 JS 语法

    开发结果不用二次编译,马上可以使用

    减轻开发成本,提升项目维护效率

    可实现低代码开发

    相关资源

    安装与使用

    安装

    yarn add vue-uieditor

    vue-uieditor资源加载,使用 webpack copy

    config.plugin('copy-vue-uieditor-assets').use(CopyWebpackPlugin, [

    [{

    from: './node_modules/vue-uieditor/vue-uieditor',

    to: './vue-uieditor/'

    }]

    ]);

    引用 vue-uieditor

    import 'vue-uieditor';

    使用编辑器组件

    使用宣染组件

    宣染组件:将编辑器组件的JSON渲染到页面上

    options 和 json 与编辑器组件一般是一致的

    开发文档(API)

    options: UEOption

    vue-uieditor 组件参数

    options: UEOption = UERender.DefineOption({

    mixins:[{

    data(){

    return {

    text:'hello'

    };

    },

    created(){

    }

    }],

    templates: [

    {

    title: "JSON Object",

    group: "测试模板库/测试模板",

    json: {

    type: "uieditor-div"

    },

    },

    {

    title: "Tmpl",

    group: "测试模板库/测试模板",

    template: `

    `,

    },

    ],

    async extraLib(){

    return `const text:string;`

    },

    global(){

    return {

    _:lodash

    };

    },

    transfer:UERender.DefineTransfer({

    'uieditor-div': {

    "editor": {

    text: 'Div 块级标签',

    order: 0,

    groupOrder:0,

    group:'公用组件库/基础组件',

    icon: 'layui-icon layui-icon-template-1',

    container: true

    }

    }

    })

    });

    成员变量列表

    名称

    类型

    默认值

    描述

    mixins

    Array

    []

    vue 组合,扩展到组件内部,如:组件、指令或方法等

    templates

    UETemplate

    []

    设置模板到编辑器左边树

    transfer

    UETransfer

    {}

    转换器,定义json的渲染行为 和 定义组件在编辑时的行为属性

    transferBefore

    Function

    (render: UERenderItem, extend?: UETransferExtend) => UERenderItem

    转换器处理之前

    transferAfter

    Function

    (render: UERenderItem, extend?: UETransferExtend) => UERenderItem

    转换器处理之后

    extraLib

    Function

    ()=> Promise

    扩展代码智能提示声明

    global

    Function

    ()=> object

    定义全局变量

    babel

    Boolean

    true

    是否开启 babel 在线编译(要加载babel-standalone js),默认为 true

    templates: UETemplate

    设置模板到编辑器左边树

    options: UEOption = UERender.DefineOption({

    ...,

    templates: [

    {

    title: "JSON Object",

    group: "测试模板库/测试模板",

    json: {

    type: "uieditor-div"

    },

    },

    {

    title: "Tmpl",

    group: "测试模板库/测试模板",

    template: `

    `,

    },

    ]

    });

    成员变量列表

    名称

    类型

    默认值

    描述

    title

    string

    标题

    icon

    string

    图标

    group

    string

    分组

    groupOrder

    number

    分组顺序,同分组的第一个groupOrder生效

    json

    string 或 object

    json 模板,可以json字串或json对像

    template

    string

    html 模板,如果有json内容,优先使用json内容

    moving

    Function

    (p: any) => boolean

    拖动时处理,返回true

    theme: UETheme

    vue-uieditor 组件主题

    theme: UETheme = {

    modes: ["json", "script", "tmpl"],

    toolBar: [

    {

    title: "测试",

    click: ({ service }) => {

    this.json = service.getJson();

    console.log('json', JSON.stringify(json));

    },

    }

    ],

    contextmenus({ render, service }) {

    return [

    {

    title: "测 试",

    disabled: !render,

    click: (item) => {

    console.log(

    JSON.stringify(service.getJson(false, render) || {});

    );

    },

    },

    ];

    }

    };

    成员变量列表

    名称

    类型

    默认值

    描述

    modes

    Array

    ['json', 'script', 'tmpl]

    编辑器可用模式:json, script, tmpl

    toolBar

    UEToolBar[]

    []

    设置顶部工具栏

    about

    Function

    ({ service: UEService }): string

    设置关于对话框内容

    contextmenus

    Function

    ({ render: UERenderItem; parent: UERenderItem; editor: UETransferEditor; service: UEService; }): UEContextmenuItem[]

    选中组件的添加快捷菜单

    toolBar: UEToolBar

    vue-uieditor 组件顶部工具栏

    theme: UETheme = {

    ...,

    toolBar: [

    {

    title: "测试",

    click: ({ service }) => {

    this.json = service.getJson();

    console.log('json', JSON.stringify(json));

    },

    }

    ]

    };

    成员变量列表

    名称

    类型

    默认值

    描述

    modes

    Array

    ['json', 'script', 'tmpl]

    编辑器可用模式:json, script, tmpl

    toolBar

    UEToolBar[]

    []

    设置顶部工具栏

    about

    Function

    ({ service: UEService }): string

    设置关于对话框内容

    contextmenus

    Function

    ({ render: UERenderItem; parent: UERenderItem; editor: UETransferEditor; service: UEService; }): UEContextmenuItem[]

    选中组件的添加快捷菜单

    特殊组件属性

    限制组件编辑行为操作属性

    /** 标记为不能选择 */

    const UECanNotSelectProps = 'ue-cant-select';

    /** 标记为不能移动 */

    const UECanNotMoveProps = 'ue-cant-move';

    /** 标记为不能删除 */

    const UECanNotRemoveProps = 'ue-cant-remove';

    /** 标记为不能复制 */

    const UECanNotCopyProps = 'ue-cant-copy';

    /** 标记为不能选择子节点 */

    const UECanNotSelectChildProps = 'ue-cant-select-child';

    /** 标记为不能移动子节点 */

    const UECanNotMoveChildProps = 'ue-cant-move-child';

    /** 标记为不能删除子节点 */

    const UECanNotRemoveChildProps = 'ue-cant-remove-child';

    /** 标记为不能复制子节点 */

    const UECanNotCopyChildProps = 'ue-cant-copy-child';

    /** 标记为不能移入子节点 */

    const UECanNotMoveInProps = 'ue-cant-movein';

    /** 标记为不能移出子节点 */

    const UECanNotMoveOutProps = 'ue-cant-moveout';

    /** 标记节点是否锁定 */

    const UEIsLockProps = 'ue-is-lock';

    /** 标记节点是否折叠 */

    const UEIsCollapseProps = 'ue-is-collapse';

    transfer: UETransfer

    转换器,定义json的渲染行为 和 定义组件在编辑时的行为属性

    options: UEOption = UERender.DefineOption({

    ...,

    transfer:UERender.DefineTransfer({

    'uieditor-div': {

    "editor": {

    text: 'Div 块级标签',

    order: 0,

    groupOrder:0,

    group:'公用组件库/基础组件',

    icon: 'layui-icon layui-icon-template-1',

    container: true

    }

    }

    })

    });

    成员变量列表

    名称

    类型

    默认值

    描述

    type

    string

    组件名称

    editor

    UETransferEditor

    组件编辑时属性与行为特性

    transfer

    Function

    (render: UERenderItem, extend?: UETransferExtend): UERenderItem

    渲染时转换 render, 如果返回空不渲染

    editor: UETransferEditor

    组件编辑时属性与行为特性

    options: UEOption = UERender.DefineOption({

    ...,

    transfer:UERender.DefineTransfer({

    'uieditor-div': {

    "editor": {

    text: 'Div 块级标签',

    order: 0,

    groupOrder:0,

    group:'公用组件库/基础组件',

    icon: 'layui-icon layui-icon-template-1',

    container: true

    }

    }

    })

    });

    成员变量列表

    名称

    类型

    默认值

    描述

    text

    string

    ((p: { editor: UETransferEditor, attrs: UETransferEditorAttrs }) => string)

    defaultText

    string

    如果text为空时默认内容

    icon

    string

    图标

    json

    string

    默认JSON模板内容

    template

    string

    默认HTML模板内容

    order

    number

    99

    排序

    group

    string

    分组,可用"/"实现分组层级,如:基础库/基础组件

    groupOrder

    number

    99

    分组排序

    base

    boolean

    true

    是否基础组件,编辑时作为独立组件,子孙节点不能选中等操作

    container

    boolean

    false

    是否容器,如:div

    containerBorder

    boolean

    false

    是否显示容器边框,方便编辑时定位

    controlLeft

    boolean

    true

    是否在容器左边留空方便选择,容器时默认为 true

    empty

    string

    编辑时使用黑块代替组件显示,处理大型组件占用性能

    collapse

    boolean

    true

    是否可以收起,容器时默认为 true

    select

    boolean

    true

    是否可以选中(编辑)

    draggable

    boolean

    true

    是否可以拖动(编辑)

    showInTree

    boolean

    true

    是否显示在组件树

    show

    boolean

    true

    是否显示

    inline

    boolean

    true

    编辑时是否强制显示为inline

    className

    string

    编辑时临时添加样式

    placeholderAttr

    boolean

    false

    组件是否有placeholder属性

    disabledAttr

    boolean

    false

    组件是否有 disabled 属性

    hideAttrs

    string[]

    []

    隐藏已有属性attr,如: ['class']

    hideAttrGroups

    string[]

    []

    隐藏已有属性分组

    attrs

    UETransferEditorAttrs

    设置组件属性栏

    coping

    Function

    (p: { render: UERenderItem; parent: UERenderItem; service: UEService; }) => boolean

    处理是否可以复制,并可以处理复制内容

    contenting

    Function

    (p: any) => boolean

    是否可以拖动组件为子节点,容器时才会生产

    moving

    Function

    (p: any) => boolean

    拖动时处理,返回true

    movingChild

    Function

    (p: any) => boolean

    拖动时处理,返回true

    transferAttr

    Function

    (p: any) => void

    编辑渲染时转换 render 和 attr,转换内容会生成到JSON

    contextmenu

    Function

    (p: any) => void

    选中对像的快捷菜单

    toolbar

    Function

    (p: any) => void

    选中对像的工具栏

    attrs: UETransferEditorAttrs

    组件编辑时属性与行为特性

    options: UEOption = UERender.DefineOption({

    ...,

    transfer:UERender.DefineTransfer({

    'uieditor-img': {

    "editor": {

    text: "Image 图片",

    order: 2,

    groupOrder:0,

    group:'公用组件库/基础组件',

    icon: 'layui-icon layui-icon-picture',

    inline: true,

    attrs: {

    src: {

    order: 0,

    value: './vue-uieditor/assets/images/demo.png',

    effect: true,

    },

    style: { value: 'min-width:30px;min-height:30px' }

    }

    }

    }

    })

    });

    成员变量列表

    名称

    类型

    默认值

    描述

    text

    string

    显示名称

    value

    any

    默认值

    demoValue

    any

    编辑时代替value,保证组件编辑时的显示效果和防止使用value时出错

    editValue

    any

    进入高级代码编写时,使用些属性代替 value 属性

    desc

    string

    描述说明

    codeBtn

    boolean

    true

    是否默认代码编辑按钮

    language

    string

    javascript

    代码编辑语言,如:javascript,html

    row

    boolean

    false

    是否占一行

    group

    string

    分组

    groupOrder

    number

    99

    分组顺序,同组第一个为准

    order

    number

    99

    顺序

    show

    boolean

    true

    是否显示属性

    event

    boolean

    false

    是否事件

    vue

    boolean

    false

    是否vue属性

    effect

    boolean

    false

    是否在编辑时生效

    editorOlny

    boolean

    false

    此属性只使用于编辑器,即最终结果没有此属性

    type

    text, slider, select, select-only, boolean, boolean-only, number, custom'

    text

    显示类型

    typeOption

    any

    显示类型的参数,如:type为'slider'时,typeOption={min:1,max:24}

    datas

    string[]

    显示类型数据源,如:type为'select'时,datas=['small', 'large']

    bind

    boolean

    false

    是否为bind属性

    enabledBind

    boolean

    false

    是否允许修改bind属性

    editorBind

    boolean

    false

    编辑是否使用bind,编辑开此项容易报错

    change

    Function

    (attr: UETransferEditorAttrsItem, service: UEService) => boolean

    改变时处理,返回false中断

    service: UEService

    组件编辑时属性与行为特性

    options: UEOption = UERender.DefineOption({

    ...,

    transfer:UERender.DefineTransfer({

    'uieditor-div': {

    "editor": {

    text: "Div",

    order: 2,

    groupOrder:0,

    group:'公用组件库/基础组件',

    icon: 'layui-icon layui-icon-picture',

    inline: true,

    transferAttr({ service }) {

    console.log('service', service.getJson())

    }

    }

    })

    });

    成员变量列表

    名称

    类型

    默认值

    描述

    $uieditor

    Vue

    获取当前编辑组件

    options

    UEOption

    获取当前options

    history

    object

    获取历史记录信息

    current

    object

    获取当前信息,如果选中id等

    rootRender

    object

    获取当前JSON root

    成员函数列表

    setModeUI

    设置当前模式

    setModeUI(mode: UEMode): void;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    mode

    design, json, script, tmpl, preview

    design

    模式

    showMonacoEditorOther

    显示代码编辑器

    showMonacoEditorOther(option: MonacoEditorContext): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    option

    MonacoEditorContext

    选项

    getTmpl

    获取模板(html)

    getTmpl(): string

    setTmpl

    设置模板(html)

    setTmpl(html:string): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    html

    string

    html模板内容

    getJson

    获取json

    getJson(): string

    setJson

    设置json

    getJson(json:string | object): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    json

    string, object

    json内容

    getScript

    获取代码(script)

    getScript(): string

    setScript

    设置代码

    setScript(script:string): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    script

    string

    代码内容

    getCurRender

    获取当前选中节点

    getCurRender(): UERenderItem

    getRenderItem

    获取指定ID的节点

    getRenderItem(id: string, context?: UERenderItem): UERenderItem

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    ID

    context

    UERenderItem

    rootRender

    搜索上下文节点

    getRenderByType

    获取指定ID的节点

    getRenderByType(type: string, context?: UERenderItem): UERenderItem

    参数

    名称

    类型

    是否必选

    默认值

    描述

    type

    string

    类型

    context

    UERenderItem

    rootRender

    搜索上下文节点

    getParentRenderItem

    获取父节点

    getParentRenderItem(render: UERenderItem, all?: boolean): UERenderItem

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    all

    UERenderItem

    是否所有内容,否则根据select设置查找父节点

    getParentRenderByType

    根据类型,获取父级节点

    getParentRenderByType(render: UERenderItem, type: string): UERenderItem

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    type

    string

    类型

    closest

    向上查找节点,包涵本身

    closest(render: UERenderItem, fn: (render: UERenderItem) => boolean): UERenderItem

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    fn

    (render: UERenderItem) => boolean

    搜索条件,返回true

    empty

    清空内容

    empty(cnf?: boolean): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    cnf

    boolean

    false

    是否提示确认框

    getRenderTemp

    获取 render 的临时内容,使用于内容传送

    getRenderTemp(id: string, key: string): any

    getRenderTemp(render: UERenderItem, key: string): any

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    节点ID

    render

    UERenderItem

    节点

    key

    string

    内容key

    getRenderTemp

    设置 render 的临时内容,使用于内容传送

    setRenderTemp(id: string, key: string, value: any): any;

    setRenderTemp(render: UERenderItem, key: string, value: any): any;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    节点ID

    render

    UERenderItem

    节点

    key

    string

    内容key

    value

    any

    内容

    delCur

    删除选中节点

    delCur(cnf?: boolean, norefresh?: boolean): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    cnf

    boolean

    true

    是否提示确认框

    norefresh

    boolean

    false

    是否不刷新

    deleteWidget

    删除节点

    deleteWidget(parentId: string, id: string, norefresh?: boolean): void

    参数

    名称

    类型

    是否必选

    默认值

    描述

    parentId

    string

    父节点ID

    id

    string

    节点ID

    norefresh

    boolean

    false

    是否不刷新

    getAttr

    获取节点属性

    getAttr(id: string, key: string): UETransferEditorAttrsItem

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    节点ID

    key

    string

    属性key

    setAttr

    设置节点属性

    setAttr(id: string, attr: UETransferEditorAttrsItem, refresh?: boolean): Promise

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    节点ID

    attr

    UETransferEditorAttrsItem

    属性内容

    refresh

    boolean

    是否刷新

    addAttr

    添加自定义节点属性

    addAttr(id: string, key: string): UETransferEditorAttrsItem;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    节点ID

    key

    string

    属性key

    refresh

    刷新

    refresh(): Promise

    setCurrent

    设置(选中)当前节点

    setCurrent(render: UERenderItem): any;

    setCurrent(id: string): any;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    id

    string

    节点ID

    render

    render

    节点

    addByType

    在指定节点添加(插入)新内容(根据类型)

    addByType(type: string, renderId: string, type2: UEDragType2): Promise;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    type

    string

    节点类型,如:uieditor-div

    renderId

    string

    节点Id

    type2

    in, before, after

    位置

    addByJson

    在指定节点添加(插入)新内容(根据json内容)

    addByJson(json: any, renderId: string, type2: UEDragType2): Promise;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    json

    string, object

    json内容

    renderId

    string

    节点Id

    type2

    in, before, after

    位置

    addByTmpl

    在指定节点添加(插入)新内容(根据模板html内容)

    addByTmpl(template: string, renderId: string, type2: UEDragType2): Promise;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    template

    string

    模板html内容

    renderId

    string

    节点Id

    type2

    in, before, after

    位置

    isLocked

    节点是否锁定

    isLocked(render: UERenderItem): boolean;

    isLocked(id: string): boolean;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    locked

    锁定节点

    locked(render: UERenderItem, locked: boolean): Promise;

    locked(id: string, locked: boolean): Promise;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    locked

    boolean

    是否锁定

    isCollapse

    是否折叠节点

    isCollapse(render: UERenderItem): boolean;

    isCollapse(id: string): boolean;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    collapse

    折叠节点

    collapse(render: UERenderItem, isCollapse: boolean): Promise;

    collapse(id: string, isCollapse: boolean): Promise;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    isCollapse

    boolean

    是否折叠

    canRemove

    是否可以删除

    canRemove(render: UERenderItem): boolean;

    canRemove(id: string): boolean;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    canCopy

    是否可以复制

    canCopy(render: UERenderItem): boolean;

    canCopy(id: string): boolean;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    canSelect

    是否可以选中

    canSelect(render: UERenderItem): boolean;

    canSelect(id: string): boolean;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    render

    UERenderItem

    节点

    id

    string

    节点Id

    canMove

    是否可以移动

    canMove(fromId: string, toId: string, type2: UEDragType2): boolean;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    fromId

    string

    要移动节点Id

    toId

    string

    移动到节点Id

    type2

    in, before, after

    位置

    move

    移动节点

    move(fromId: string, toId: string, type2: string): Promise;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    fromId

    string

    要移动节点Id

    toId

    string

    移动到节点Id

    type2

    in, before, after

    位置

    copyCur

    复制当前节点

    copyCur(): void;

    copyCurToNext

    复制当前节点到后面位置

    copyCurToNext(): void;

    cutCur

    剪切当前节点

    cutCur(): void;

    pasteCur

    粘贴当前节点

    pasteCur(pos?: 'before' | 'after' | 'child', keepCur?: boolean, currentId?: string, focus?: boolean): void;

    参数

    名称

    类型

    是否必选

    默认值

    描述

    pos

    before, after, child

    位置

    keepCur

    boolean

    保留当前节点

    currentId

    string

    当前节点

    focus

    boolean

    粘贴后选中

    展开全文
  • swagger editor使用总结

    2021-03-15 19:16:55
    安装教程:先到git下载:https://github.com/swagger-api/swagger-editor;然后直接打开index.html 或者如上图创建一个服务器,访问该项目;然后就可以看到如1中的效果了。具体使用教程可以参考3.3.使用教程:Swagger...
  • 定义editor.md为vue组件 安装 scriptjs cnpm install --save scriptjs 在components文件夹下面创建一个组件 <template> <div class="markdown-editor-box"> <link rel="stylesheet" href="/...
  • 利用号Qt中example 示例,如使用editor? qt creater起始界面去搜。自动打开一个helper,code也有。 改Qt中字体?? 工具-选项-文本编辑器-consolas 在编辑器最前面显示第几行?codeEditor, 同时syntax ...
  • Monaco Editor 使用入门

    千次阅读 2021-04-09 09:14:19
    前端事件看见的VS Code编辑器Monaco Editor准备更换下,下面介绍一些使用中遇到的一点问题。代码提示 1.项目引用 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; 项目中引用了editor.api...
  • 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VS Code,而Monaco Editor就是从这个项目中成长出来的一个web编辑器,所以Monaco Editor和VS Code在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的...
  • 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持在浏览器中运行,但是功能基本是和VSCode...
  • [刷leetcode神器] IDEA 插件 leetcode editor

    万次阅读 多人点赞 2021-04-18 00:11:45
    今天阿淼就给大家推荐一款既可以用来上班摸鱼刷题,也可以方便单纯用来刷题及本地测试的插件 leetcode editor 吧。 Part1leetcode editor 介绍 在IDE中解决LeetCode问题,支持 leetcode.com 与 leetcode-cn.com,满足...
  • Ace editor中文文档

    2021-04-26 20:03:37
    介绍快速开始简单使用some textvar editor = ace.edit("editor");设置主题和语言模式要更改主题,请为编辑器配置要使用的主题路径。主题文件将按需加载:editor.setTheme("ace/theme/twilight");默认情况下,编辑器...
  • monaco-editor所有配置

    千次阅读 2021-09-03 08:40:40
    官网API地址: ...Const EditorOptions EditorOptions: { acceptSuggestionOnCommitCharacter: IEditorOption<acceptSuggestionOnCommitCharacter, boolean>; acceptSuggestionOnEnter: IEdito
  • 环境 Eclipse Version: 2020-12 (4.18.0...于是到Eclipse的插件市场(Eclipse Marketplace)逛逛, 输入 SQL Editor 马上就出现了一个匹配的插件"SQL Editor 1.2.0", 安装量超过7万。 So easy, 直接点击 “Install”
  • uniapp富文本组件editor的使用

    千次阅读 2021-02-25 14:26:23
    新建组件editor <template> <view class="container"> <view class="page-body"> <view class='wrapper'> <view class='toolbar' @tap="format" style="height: 130p
  • Video Editor2019

    2021-06-05 18:42:45
    Video Editor2019是一个视频编辑软件,可以帮助大家编辑各种的商品,并且也是2019年最新版本,功能也是众多,操作简单方便,有需要看视频或者编辑视频的小伙伴赶紧来下载Video Editor2019试试吧!应用介绍Video ...
  • MavonEditor是一个用于编辑markdown的JavaScript库,搭配Vue.js,非常适合博客网站,界面也很漂亮.可以使用npm安装,今天就让我们来了解一下,这个库的使用.首先,我们安装它:npm install mavon-editor --save我们需要在...
  • 使用editor.md踩坑血泪史总结

    千次阅读 2021-01-18 11:48:41
    当我们的项目需要引入一个功能强大的markdown编辑器,我们兴许会考虑使用当今比较主流的markdown编辑器:editor.md,最重要的是它完全开源,免费。 这是它的官方地址:https://pandao.github.io/editor.md/ 然而这个...
  • 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VS Code,而Monaco Editor就是从这个项目中成长出来的一个web编辑器,所以Monaco Editor和VS Code在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的...
  • 一、 Vue中使用quill-editor之初体验 二、 Vue中使用quill-editor之修改工具栏(toolbar) 三、Vue中使用quill-editor之增加字体和文字大小 四、Vue中使用quill-editor之二次封装quill-editor 文章目录系列文章目录...
  • 上篇文章介绍了如何在vue中使用quill-editor,但是quill-editor的工具栏不是很好用,所以本篇文章来定制quill-editor的工具栏 提示:以下是本篇文章正文内容,下面案例可供参考 一、toolbar工具栏对应的模块 大致...
  • 本文将介绍编辑器的使用和伴随的某些开发技巧。 该编辑器支持的功能有:基础的md编辑、md语法快捷键、记录保存、暗黑主题、图片上传/复制图片上传/裁剪图片上传、...yarn add md-editor-v3 .vue模板基础使用 <tem
  • -- bidirectional data binding(双向数据绑定) --> <quill-editor v-model="formData.content" ref="QuillEditor" class="editor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($...
  • 安装1、Avs Video Editor下载下来是一个压缩文件,解压后开始安装;AVS Video Editor的安装过程非常的简单,用户只要根据AVS Video Editor安装向导进行安装即可完成。如图1所示。AVS Video Editor安装界面 图12、在...
  • 一、 Vue中使用quill-editor之初体验 二、 Vue中使用quill-editor之修改工具栏(toolbar) 文章目录系列文章目录前言一、准备css文件二、使用该css文件1.引入到模块中2.将css注册到quill-editor中三、完整代码总结 ...
  • ace.editor 说明文档

    2021-01-28 13:45:16
    Configuring the editor there are several ways to pass configuration to Ace 有几种方法可以将配置传递给ace // pass options to ace.edit ace.edit(element,{ mode:"ace/mode/javascript", selectionStyle...
  • vue-html5-editor

    2020-12-20 17:35:05
    简介 IntroVue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11.Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 2.0+,...
  • Unity Editor编辑扩展

    2021-09-04 21:32:05
    在Assets下新建Editor文件,创建一个类,引用命名空间UnityEditor 写好一个静态方法,在方法上加一个属性[MenuItem("")] [MenuItem(“Tool/sss”)] [MenuItem(“Tool/sss”,bool isValidateFunction,int priority) ...
  • Swagger Editor 教程

    2020-12-23 19:54:00
    Swagger Editor 教程 文章目录Swagger Editor 教程一、swagger 是什么二、Swagger Editor1. Swagger Editor 简介2. 下载安装① 在线版② Windows 本地3. 具体使用步骤① 准备工作② 编写 yaml③ 服务端代码1)api_XX...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 422,728
精华内容 169,091
关键字:

editor

友情链接: Jquery轮播图.zip