切换编辑器到tiny

View/Admin/Notebook/lists.blade.php

@@ -542,6 +542,7 @@
             this.noteBookVersion = 0;
             this.noteBookUpVersion = 0;
             tinymce.get('tiny').setContent(this.currentNotebook.content);
+            tinymce.get('tiny').options.set('readonly', this.currentNotebook.user_mode === 'read');
             this.getLatest();
         }
 

View/Admin/Notebook/share.sc.php

@@ -3,6 +3,8 @@
 use Plugins\Notebook\Model\Notebook;
 use Sc\Util\HtmlElement\El;
 use Sc\Util\HtmlStructure\Html\Html;
+use Sc\Util\HtmlStructure\Html\Js\JsCode;
+use Sc\Util\HtmlStructure\Html\Js\JsFunc;
 
 /**
  * @var Notebook $notebook
@@ -13,32 +15,28 @@ if (!$notebook) {
     Html::loadThemeResource('ElementUI');
 }
 
-Html::css()->addCss(<<<CSS
-#app {
-    width: 1100px;
-    margin: auto;
-    border-left: 1px #ddd solid;
-    border-right: 1px #ddd solid;
-    padding: 20px;
-    box-sizing: border-box;
-    background-color: white;
-    overflow: auto;
-    height: 100vh;
-}
-body{
-    background-color: #F2F3F5;
-    margin: 0 !important;
-    font-size: 14px;
-}
-table,table tr th, table tr td { 
-    border:1px solid #ddd;
-}
-table {
-    border-collapse: collapse;
-    padding:2px;
-} 
-CSS);
+Html::css()->load('/tiny/skins/content/writer/content.min.css');
+Html::js()->load('/tiny/tinymce.min.js');
+
+Html::js()->vue->set('initEditor', [
+    'selector' => '#tinymce-body',
+    'inline'   => true,
+    'readonly' => true,
+    "plugins" => "quickbars fullscreen lists advlist table preview quickbars image codesample code link media",
+    "toolbar" => "undo redo bold italic underline forecolor backcolor strikethrough align lineheight styleselect formatselect fontselect fontsizeselect bullist numlist outdent indent blocks blockquote removeformat image link codesample subscript superscript code hr fullscreen",
+    'setup' => JsFunc::arrow(['editor'])->code(
+        <<<JS
+        editor.on('init', () => {
+          editor.setContent(VueApp.content)  
+        });
+        JS
+    )
+]);
 
+Html::js()->vue->set('content', $notebook?->content);
+Html::js()->vue->event('mounted', JsCode::make(
+    JsCode::create(' tinymce.init(this.initEditor);'),
+));
 return $notebook?->content
-    ? El::double('div')->addClass('fr-element fr-view')->append($notebook->content)
+    ? El::double('div')->setId('tinymce-body')->addClass('fr-element fr-view')
     : ' <el-empty description="Not Found" />';