TinyMCE 6 编辑器+ Layui 2.8.2+单页面

最新推荐文章于 2023-11-15 15:43:13 发布

qqzeng-ip

最新推荐文章于 2023-11-15 15:43:13 发布

阅读量465

点赞数

文章标签：编辑器 layui javascript 前端 java

本文链接：https://blog.csdn.net/zengzhan/article/details/130664990

版权

文章描述了如何在Layui框架中整合TinyMCE6编辑器，通过创建tinymce.js文件进行初始化和功能定义，包括编辑器的构建、内容获取与设置。在单页面应用中，使用layui.extend方法引入并调用tinymce模块，实现了自定义配置的文本编辑器功能。

摘要由CSDN通过智能技术生成

TinyMCE 6 编辑器+ Layui 2.8.2 拓展 tinymce.js

目录结构

layui.define(function (exports) {

    var t = {};

    //初始化

    t.bulid = function (options) {
        if (typeof tinymce == 'undefined') {
           
            var script = document.createElement('script');
            script.src = '.././lib/layui_exts/tinymce/tinymce.min.js';
            script.onload = function () {
                tinymce.init(options);               
            };
            document.head.appendChild(script);
        } else {          
            tinymce.activeEditor.destroy();
            tinymce.init(options);  
           
        }
    }

    t.getContent = function () {
        return tinymce.activeEditor.getContent();
    }

    t.setContent = function (content) {
        return tinymce.activeEditor.setContent(content);
    }

    exports('tinymce', t);

});

单页面入口：

layui.extend({
    setter: "config",
    admin: "lib/admin",
    view: "lib/view",
    tinymce: '{/}/lib/layui_exts/tinymce'
}).define(["setter", "admin"], function (e) {

页面调用：

    layui.use([ "tinymce"], function (t) {     
            , layedit = layui.tinymce


  //编辑器
        layedit.bulid({ selector: "textarea#mycontent", height: 800, language: "zh-Hans" });

获取编辑器内容：