lightweight清爽简洁的编辑器_其它特效_编辑器_编辑器_ace

这是一款经过ace主题切换过的编辑器，比起官方的编辑器要好看的多，主要缺点是引入文件有点多，若放在管理员后台无所谓了

淘建站为您提供更多_其它特效_编辑器_编辑器_ace，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 248 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：其它特效 > 编辑器难易程度：中级

HTML

首先我们在页面上放置#editor1，用来生成编辑器

<div class="wysiwyg-editor" id="editor1"></div>

调用ace编辑器：

$('#editor1').ace_wysiwyg({
    toolbar: ['font', null, 'fontSize', null, {
        name: 'bold',
        className: 'btn-info'
    },
    {
        name: 'italic',
        className: 'btn-info'
    },
    {
        name: 'strikethrough',
        className: 'btn-info'
    },
    {
        name: 'underline',
        className: 'btn-info'
    },
    null, {
        name: 'insertunorderedlist',
        className: 'btn-success'
    },
    {
        name: 'insertorderedlist',
        className: 'btn-success'
    },
    {
        name: 'outdent',
        className: 'btn-purple'
    },
    {
        name: 'indent',
        className: 'btn-purple'
    },
    null, {
        name: 'justifyleft',
        className: 'btn-primary'
    },
    {
        name: 'justifycenter',
        className: 'btn-primary'
    },
    {
        name: 'justifyright',
        className: 'btn-primary'
    },
    {
        name: 'justifyfull',
        className: 'btn-inverse'
    },
    null, {
        name: 'createLink',
        className: 'btn-pink'
    },
    {
        name: 'unlink',
        className: 'btn-pink'
    },
    null, {
        name: 'insertImage',
        className: 'btn-success'
    },
    null, 'foreColor', null, {
        name: 'undo',
        className: 'btn-grey'
    },
    {
        name: 'redo',
        className: 'btn-grey'
    }],
    'wysiwyg': {
        fileUploadError: showErrorAlert
    }
}).prev().addClass('wysiwyg-style2');