self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Desktop: WYSIWYG: Added support for tables

Browse Source
This commit is contained in:
Laurent Cozic 2020-04-10 18:22:17 +00:00
parent ae4cecc621
commit 776411f882
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ElectronClient/gui/editors/TinyMCE.tsx
View File

@ -435,17 +435,19 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
const editors = await (window as any).tinymce.init({
selector: `#${rootIdRef.current}`,
width: '100%',
body_class: 'jop-tinymce',
height: '100%',
resize: false,
icons: 'Joplin',
icons_url: 'gui/editors/TinyMCE/icons.js',
plugins: 'noneditable link joplinLists hr searchreplace codesample',
plugins: 'noneditable link joplinLists hr searchreplace codesample table',
noneditable_noneditable_class: 'joplin-editable', // Can be a regex too
valid_elements: '*[*]', // We already filter in sanitize_html
menubar: false,
branding: false,
target_list: false,
toolbar: 'bold italic | link joplinInlineCode joplinCodeBlock joplinAttach | numlist bullist joplinChecklist | h1 h2 h3 hr blockquote',
table_resize_bars: false,
toolbar: 'bold italic | link joplinInlineCode joplinCodeBlock joplinAttach | numlist bullist joplinChecklist | h1 h2 h3 hr blockquote table',
setup: (editor:any) => {
function openEditDialog(editable:any) {

26
ReactNativeClient/lib/joplin-renderer/noteStyle.js
View File

@ -188,32 +188,46 @@ module.exports = function(theme) {
margin-left: 0;
opacity: .7;
}
.jop-tinymce table,
table {
text-align: left-align;
text-align: left;
border-collapse: collapse;
border: 1px solid ${theme.htmlCodeBorderColor};
background-color: ${theme.htmlBackgroundColor};
}
td, th {
.jop-tinymce table td, .jop-tinymce table th,
table td, th {
text-align: left;
padding: .5em 1em .5em 1em;
font-size: ${theme.htmlFontSize};
color: ${theme.htmlColor};
font-family: ${fontFamily};
}
td {
.jop-tinymce table td,
table td {
border: 1px solid ${theme.htmlCodeBorderColor};
}
th {
.jop-tinymce table th,
table th {
border: 1px solid ${theme.htmlCodeBorderColor};
border-bottom: 2px solid ${theme.htmlCodeBorderColor};
background-color: ${theme.htmlTableBackgroundColor};
}
tr:nth-child(even) {
.jop-tinymce table tr:nth-child(even),
table tr:nth-child(even) {
background-color: ${theme.htmlTableBackgroundColor};
}
tr:hover {
.jop-tinymce table tr:hover,
table tr:hover {
background-color: ${theme.raisedBackgroundColor};
}
hr {
border: none;
border-bottom: 2px solid ${theme.htmlDividerColor};